最近接触了一下微信小程序的开发, 虽然项目中的页面很简单, 但是最后做出成果来, 也是费了一番周折作为一个偏前的前端, 小程序的开发对我来说, 在习惯上的改变还是巨大的一开始做时, 不适应感蛮大的现在把自己的一点点总结归纳一下, 微信小程序毕竟不是自己擅长的领域, 真怕时间长了遗忘, 写一篇文章做为备忘录也好
先说明, 本文不涉及数据绑定的任何内容, 如果你和我一样是一名偏前的前端人员, 那这篇文章一定非常有用, 如果不是, 那么可以忽略
一开发前的准备
首先要注册, 在微信开发平台的官网上, 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%, 就是常说的通栏, 那么他的宽度就是 750rpx50% 宽的, 就是 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, 这些最近崛起的框架, 迷之相似, 最核心的在于数据绑定但是我此次没有涉及这方面内容, 只是给前端的小伙伴一点帮助而已说白了, 小程序也是一套框架, 任何框架都有其详细的开发文档, 我们一定要学会查看它, 用好它, 让它更好的服务于我们自己的项目
就写这些吧, 有些地方写的较仓促, 但是, 入门足够了
来源: https://www.cnblogs.com/xiaoxianweb/p/8430844.html