微信开发实用方案

[ColdXu]

微信开发实用方案

初次接触微信项目的开发人员，会遇到一些开发难点。例如:采用什么方式页面布局、滚动性能差、用户体验不好、缺失触摸事件等一系列问题。许多开发者会选择插件扩展页面功能，但移动端插件繁多很难取舍。

为了解决这一问题，我把移动端项目中实用的插件整合到了一起，尽量避免重复使用无用插件，按照文档流程开发页面即可，并且可以满足大多数业务需求，无需学习其他框架库知识，只需了解插件用法和API。底层库使用Zepto

使用的插件工具

• rem.js (弹性布局) 文档 下载
• iscroll.js (移动端滚动插件) 文档 下载
• hammer.js (触摸事件插件) 文档 下载

移动端项目，尤其是针对微信端项目，推荐使用以上JS插件做为基础插件可以满足大多需求。

---

1. rem.js
弹性布局插件
遵循插件推荐的公式算出rem值，元素赋于rem后内容会适应各种屏幕尺寸。

2. iScroll.js
移动端滚动插件
解决手机浏览器滚动性能低下卡顿问题，自带缩放、拉动刷新、捕捉元素等等。

3. hammer.js
触摸事件插件
弥补原生JS缺失触摸事件的不足，支持点击、滑动、拖动、多点触控等事件，并且体积较小。

开发流程

1. 页面需要用到的图片，在PSD设计稿里导出。

2. html里引入插件，根据iScroll5插件要求，把HTML基础结构写好。

3. 确认PSD基准尺寸，参考PSD设计稿切图，并且完成rem布局。(支持高分屏的设计稿，PSD设计稿大小缩至一倍在进行参考切图)

   rem值换算方法
   - 切图过程中不用去管rem换算，切图完成后在把固定单位，根据公式推算出rem值
   - 或者使用sass、less之类的CSS编译语言，封装一个计算rem值的函数

4. 根据客户需求添加网页功能和iScroll相关配置，涉及事件处理请使用hammer.js。

注意事项

1. 避免使用jQuery Mobile，初学jQuery Mobile人员会遇到很多与jQuery Mobile有关联的冲突和缺点。 例如

   • audio标签无法播放音乐
   • 表单元素莫名被嵌套预定义的div标签
   • 微信加载速度缓慢
   • 体积过于庞大等等

   如果需要使用jQuerye Mobile的触摸事件，可以用hammer.js来替代。

2. 此微信开发方案，为了减少其他框架的学习成本，使用jquery库但所使用插件不依赖jquery。

相关参考下载

rem.js
isroll.js
hammer.js
文档后续还有补充