【原创】前端开发人员如何制作微信小程序模板
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出。)
最近接触了一下微信小程序的开发,虽然项目中的页面很简单,但是最后做出成果来,也是费了一番周折。作为一个偏前的前端,小程序的开发对我来说,在习惯上的改变还是巨大的。一开始做时,不适应感蛮大的。现在把自己的一点点总结归纳一下,微信小程序毕竟不是自己擅长的领域,真怕时间长了遗忘,写一篇文章做为备忘录也好。
先说明,本文不涉及数据绑定的任何内容,如果你和我一样是一名偏前的前端人员,那这篇文章一定非常有用,如果不是,那么可以忽略。
一、开发前的准备
首先要注册,在微信开发平台的官网上,https://mp.weixin.qq.com/,按照提示,一步步来,注册一个小程序帐号,然后登录。
接着是安装开发者工具,
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201822
装好后,设置项目的目录、名称等信息,有一个重要的AppId要填,在管理平台的设置-开发设置里面
建好之后,就是这样一个界面:
左边是界面演示区,中间是文件目录,右面是代码编辑区
二、重要文件app.json的设置和项目目录的配置
我先说一个观点,凡是遇到新技术、新工具,我都是把他尽量和自己现有的知识技能体系相靠拢,这样至少可以尽快上手。
小程序中的文件类型,和html也可以一一对应起来,.wxml就对应着.html文件,.wxss就对应着.css文件,.js文件也有,不用多说。
新建一个项目后,根目录下除了文件夹,有四个文件,其中3个以app命名,这三个文件可是相当有用。特别是app.json,是对小程序做全局配置的,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。app.wxss,写在这个里面的css代码可以作用到所有页面上,app.js,写在这个里面的js代码同样可以作用到所有页面上。展开pages目录,有一个index目录,里面也有三个文件,
那么,写在index.wxss里面的css样式,和写在index.js里面的js代码,就只作用于index.wxml。
我的经验之谈:每个页面都单独建一个目录,例如常见的会有这些:index,list,detail,news,product等,这样利于管理,文件清晰好查找。
然后我要说一个重要的问题,每当建一个目录,并建了一个.wxml文件后,就在app.json的pages参数中写上这个文件的路径,
这里面的每一条,对应着一个页面,就按照这个格式写,不要写错,注意最后一条没有逗号。第一条,会显示在左边演示界面中,也就是说,想调试哪个页面,就把哪个页面的路径移到最上方。
写完之后,保存,就可以看到,刚才我们新建的目录下,自动多了三个文件,
然后就可以在.wxml中写结构代码,在.wxss中写样式代码,在.js中写行为代码了。
三、与html5既相同又不同
以上说的,可以说全是准备工作,真正的写代码,刚刚开始,怎么写呢,其实原理和写H5页面完全一样,不同的只是标签换了,写法换了,有一些特殊注意的地方,我们按照原来的习惯,对应的转换过来,即可。
1、标签更换
小程序中的标签,没有html那么丰富,用于包裹的块元素标签,最最常用的div,在小程序中写成view,内联元素标签则是text。
那么,div,section,article,p,h1到h6,ul,li等,通通写成view,
span,em,i,b,font,strong,del等,通通写成text
链接,比较特别,<a href=""></a>,到小程序中是
<navigator url=""></navigator>
图片,原来是img,换成image,而且需要加一个aspectFit属性,否则图片的比例会失调,当然,还有很多其他属性,查询开发文档,都很好理解:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/image.html
表单元素,改变也很大,具体就不说了,在官方文档都有说明。
所以,既然小程序的标签比较单一,那么就需要我们添加更多的class了啊,才能分别设置样式。
2、单位更换
写H5页面,一般用rem,px,百分比等,在小程序中,有自己的单位rpx,我自己的理解就是,一个div,宽度是100%,就是常说的通栏,那么他的宽度就是750rpx。50%宽的,就是375rpx。
这个rpx可以自动适应不同的屏幕尺寸,所以说,小程序中的页面,兼容性无需担心。那么效果图最好是按750px去设计喽。
3、全面支持flex布局
flex布局之前也接触过,因为浏览器兼容性还没有全覆盖,所以没有用,还是用的float,在小程序中,可以放心的用了。实际用过后,感觉比float强大很多呀。我相信,过不了几年,flex布局就会成为主流,这将是前端布局的一场革命,因为他完全改变了现有模式。还不熟悉flex的小伙伴,抓紧去学学吧。
4、关于背景图
先说明,小程序中是不支持背景图的。不要说什么可以使用网络地址呀,base64呀,对前端人员来说,这两种方法是完全不现实的。所以,就等于不支持背景图。
那么,怎么办,我的解决方法是:小图,用字体图标写。大图,用image写,再写绝对定位。目前没发现更好的办法。
5、字体图标的使用
小程序有自己的字体图标,但是,也太少了吧,这根本不够用好嘛。
我们还是要借助大阿里的图标库,但不能直接用,要把ttf字体转化成base64,具体方式百度一下就有。参考这一篇,可以说很详细了:
http://blog.csdn.net/nongweiyilady/article/details/74244362
6、关于标签闭合
小程序对于标签闭合,要求的特别严格,太精确,可以说,差了一点,都会报错,有点像xhtml,标签必须要闭合,尤其注意像input这种单标签 ,后面的 / 不写,那是绝对行不通的。
四、模板和文件引用
只要遇到重复使用的代码块,就可以建成一个模板,来到处引用它,例如头部、底部、列表。模板的用法也不难,就是把代码放到<template></template>中,起个名字name,就是一个模板了,引用模板用is属性,具体查看官方文档吧。(哈哈,越往后写越想偷懒,什么都是“请查看官方文档”了)
我自己的习惯是,建一个名为template的目录,专门存放模板文件。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html
前面说的,每个页面有自己的样式表文件和js文件,那么别的页面想使用这个页面的样式和js,有办法么,当然有,用文件引用啊,和css中的文件引用差不多,import和include两种方式。
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/import.html
五、用好官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
前端人员主要看组件,和框架的一部分内容,就够用了。
小程序有自己的官方开发文档,很详细,就是吧,对于第一次接触的人来说,有点无从下手,而且容易看的头疼。我就是这样的,以上写的这些,也是我花了多少精力,百度了多少次,并在实践中,慢慢领会的。所以我写的这些,不是说,看完了,就会写出一个小程序模板了,只是一点点入门指点,一点点经验之谈。我个人体会,小程序和AngularJS,Vue.js,这些最近崛起的框架,迷之相似,最核心的在于数据绑定。但是我此次没有涉及这方面内容,只是给前端的小伙伴一点帮助而已。说白了,小程序也是一套框架,任何框架都有其详细的开发文档,我们一定要学会查看它,用好它,让它更好的服务于我们自己的项目。
就写这些吧,有些地方写的较仓促,但是,入门足够了。
【原创】前端开发人员如何制作微信小程序模板的更多相关文章
- 微信小程序在线制作 自己制作微信小程序
小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...
- 微信小程序开发系列二:微信小程序的视图设计
大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
- 微信小程序开发系列五:微信小程序中如何响应用户输入事件
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发系列四:微信小程序之控制器的初始化逻辑
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 这个教程的前两篇文章,介绍了如何 ...
- 微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
- 微信小程序模板消息后端代码
利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...
- 120多套各种类别微信小程序模板源码打包下载
120多套各种类别微信小程序模板源码打包下载,以下是部分截图欢迎下载!120多套各种类别微信小程序模板源码打包下载 下载地址:https://pan.baidu.com/s/1Cfqyc9p2ZDOc ...
- 两天快速开发一个自己的微信小程序
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...
随机推荐
- C#初学者们,请离代码生成器远点!!!
在程序开发的世界里,各路前辈们为了提高所谓的编码速度,搞出了各式各样的代码生成器,来避免所谓的重复的人为机械地粘贴和复制代码,以此来提高生产力. 早几年前,我可能会认为这样的做法真得有用,特别是在编码 ...
- python 使用paramiko模块上传本地文件到ssh
我们要了解几个函数: paramiko.Tranport(("目标ip,端口"))#这是上传目标的IP和端口 paramiko.SFTPClient.from_tranport() ...
- 洛谷 P1598 垂直柱状图【字符串+模拟】
P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...
- UEP-查询方式总结
public void retrieve() { QueryParamList params = getQueryParam("dataWrap"); //获取页面上的参数,即查询 ...
- PHPStorm+PHPStudy新建第一个PHP项目
img { max-width: 100% } 熟悉了.net的编程,偶尔也来客串一下PHP.前几天闲来无事随便加了一个PHP的开发群,入群之后傻眼了,群里有大小各位程工1600多人,所以决定学习一下 ...
- Mybatis中是否需要依赖配置文件的名称要和mapper接口的名称一致 params错误
一:当核心配置文件mapper标签下以resource形式指向依赖配置文件时,不需要 这样就可以加载到其相应的依赖配置文件通过namespace找到其相应的方法 二:如果mapper标签下以packa ...
- reduceByKeyLocally
2017年3月15日, 星期三 reduceByKeyLocally--Transformation类算子 代码示例
- libpng+VS2012(VS2015)的使用
OpenCV保存PNG图像底层调用的就是libpng库,简要说一下libPNG库的单独使用. 1.首先需要下载两个库,一个是libpng,一个是zlib libpng库下载地址:http://www. ...
- Ubuntu问题:E45: 'readonly' option is set (add ! to override)错误解决
问题描述:E45: 'readonly' option is set (add ! to override) 问题分析:该错误为当前用户没有权限对文件作修改 问题解决: 输入 :w !sudo tee ...
- Django将request对象传入模板配置
对于很多时候,需要从模板中获取很请求中很多内容,比如当前请求的url,当前的session变量中的某个值,这时候我们可以通过配置可将request对象传递进模板. django1.10版本: sett ...