微信开发实用方案
ColdXu opened this issue · comments
微信开发实用方案
初次接触微信项目的开发人员，会遇到一些开发难点。例如:采用什么方式页面布局、滚动性能差、用户体验不好、缺失触摸事件等一系列问题。许多开发者会选择插件扩展页面功能，但移动端插件繁多很难取舍。
为了解决这一问题，我把移动端项目中实用的插件整合到了一起，尽量避免重复使用无用插件，按照文档流程开发页面即可，并且可以满足大多数业务需求，无需学习其他框架库知识，只需了解插件用法和API。底层库使用Zepto
使用的插件工具
移动端项目，尤其是针对微信端项目，推荐使用以上JS插件做为基础插件可以满足大多需求。
1. rem.js
弹性布局插件
遵循插件推荐的公式算出rem值，元素赋于rem后内容会适应各种屏幕尺寸。
2. iScroll.js
移动端滚动插件
解决手机浏览器滚动性能低下卡顿问题，自带缩放、拉动刷新、捕捉元素等等。
3. hammer.js
触摸事件插件
弥补原生JS缺失触摸事件的不足，支持点击、滑动、拖动、多点触控等事件，并且体积较小。
开发流程
-
页面需要用到的图片，在PSD设计稿里导出。
-
html里引入插件，根据
iScroll5插件要求，把HTML基础结构写好。 -
确认PSD基准尺寸，参考PSD设计稿切图，并且完成rem布局。
(支持高分屏的设计稿，PSD设计稿大小缩至一倍在进行参考切图)rem值换算方法
- 切图过程中不用去管rem换算，切图完成后在把固定单位，根据公式推算出rem值
- 或者使用sass、less之类的CSS编译语言，封装一个计算rem值的函数 -
根据客户需求添加网页功能和iScroll相关配置，涉及事件处理请使用
hammer.js。
注意事项
-
避免使用
jQuery Mobile，初学jQuery Mobile人员会遇到很多与jQuery Mobile有关联的冲突和缺点。 例如audio标签无法播放音乐- 表单元素莫名被嵌套预定义的div标签
- 微信加载速度缓慢
- 体积过于庞大等等
如果需要使用
jQuerye Mobile的触摸事件，可以用hammer.js来替代。 -
此微信开发方案，为了减少其他框架的学习成本，使用jquery库但所使用插件不依赖
jquery。