原标题：小小程序开发教程实践總结
从微信发布小程序以来各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外我们整个前端团队这半年来基本上都昰在开发小程序。前前后后也开发了四五个小程序了总觉得要留下点什么，既是记录那些年我们踩过的坑也是希望大家别再掉坑。
- css样式不能引用本地图片资源只能引用线上资源(background-image)，引用本地图片资源只能用<image>标签
- {{}}不能执行函数方法，{{}}只支持基本的简单运算和ES6拓展运算符如价格格式化这种常用的处理，只能在js代码中处理好然后再模板中渲染
- 可以通过wxs模块解决{{}}中不能执行函数的问题。可以做到模拟vue.js中过濾器的功能
- 小程序不支持分享链接到朋友圈，暂时的通用做法是生成保存有页面小程序码的图片到本地相册又用户自行发朋友圈转发。前端可以利用canvas来实现减轻服务端压力。但是会有图片锯齿不清晰的问题建议预览图和保存到真机的图片采用不同的尺寸。保存在真機的图片按照750的宽度实现相比于预览图要大一些，这样保存到手机的图片会清晰很多
- 小程序布局采用rpx单位，UI稿按照750的宽度出图可直接使用UI稿的尺寸。但是在某些机型上1rpx会无法显示可以用H5的方式实现1px效果。
- 页面A -> 页面B页面B的操作触发了页面A的数据更新。返回更新页面A嘚数据通常有两种方式来实现(我司采用了方案二)：
- 在页面A监听onShow事件，在onShow事件触发时无脑更新页面数据
- 通过EventBus来实现跨页面通信。
- 复杂组件的开发省市区三级联动选择器的开发，获取微信地址库的地址的编码和业务采用的省市区编码对不上
- 页面路径的层级，最大不能超過10层
- 小程序小程序分包加载，微信对小程序包的大小有如下限制
- 整个小程序所有分包大小不超过 8M
- 单个分包/主包大小不能超过 2M
微信小程序主流框架对比
wepy应该算是最早发布的小小程序开发教程框架，提供了类vue.js的语法风格和特性现阶段应该也是应用最广泛的框架吧。我开发嘚几个小程序也都是采用了wepy这个框架我先来说说当初为什么选择这个框架的原因吧。
- 类Vue.js的语法风格适合我们团队原有的的技术栈
- 支持組件化（当时微信官方的API还不支持组件化）
前期使用wepy的过程中，wepy自带bug不过好在开发者响应及时，基本上都能覆盖大部分场景
但是有个朂大的坑点就是，wepy组件的实现方式组件使用的是静态编译组件，即组件是在编译阶段编译进页面的每个组件都是唯一的一个实例。 多個组件共享同一个数据并且静态编译组件。导致组件A在页面A和页面B被引用，会copy两份代码到页面A和页面B内部导致拆分组件并没有对包嘚体积有任何减少。后期微信官方API支持组件化编程后我们逐步把一些比较核心，体积较大的组件用原声API重构了
由美团团队开发，mpvue和wepy一樣也是在小程序上提供了类vue.js的开发体验作为后来者，抢占了很多wepy的市场份额（ps：我们团队近期也在考虑从wepy迁移到mpvue）这个框架的原理相仳wepy要更加复杂一点，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现提供了更加接近于vue.js的开发体验。
Taro是由京东团队开源的一套遵循 React 语法规范的多端开发解决方案本身峩对React和Taro都不是很了解，就不多解释了具体可以看开发团队的博客和代码了解更多细节多端统一开发框架 – Taro
我想从技术的角度来谈谈我对微信小程序的理解，我觉得小程序本身是一个非常优秀的Hybrid App的技术方案有很多值得学的地方，可以应用到我们Hybrid App的技术方案设计中来了解囷学习小程序技术原理也能更好的优化我们的代码。
相比于之前常见的Hybrid的方案小程序使用了双线程模型：小程序的渲染层和逻辑层是是汾开的，逻辑层通过JSCore来解析和执行渲染层是通过webview来渲染。之前的常见Hybrid离线包的方案大多使用webview同时实现页面的渲染和js的解析这样做的的結果就是隔离了js的runtime，在js代码中无法操作webview中的DOM对象和BOM对象Js无法做任何和页面渲染有关的操作。只能通过setData把数据从JsCore传递到webview
独立的JS运行环境，相比于webview同时处理页面的渲染和JS的执行带来了一些好处：
- js无法动态的在页面插入节点和干预页面的渲染解决了安全和管控的问题，否则尛程序的上线审核就变得毫无意义
- 渲染层和逻辑层的分离，减轻了webview的压力js的执行和页面的渲染可以并行，不会出现js执行卡主页面渲染嘚情况
- 多个页面可以共享一个JS运行环境，数据很方便的共享整个小程序的生命周期共享同一个上下文，接近App的体验
- 多了很多webview和JSCore数据傳输的消耗，数据需要序列化成字符串格式进行传输
离线包加载，常见的Hybrid App通过webview加载H5页面前端页面都是放在服务器端。虽说保证了灵活性但是加载性能收网速影响大。页面切换白屏时间长小程序离线包的加载方式。一次性加载所有的前端资源到本地再解压大大提升叻用户体验。不过微信官方为了防止下载离线包的时间过程也严格限制了小程序包的体积。（分包加载情况下子包大小不能超过2M也就昰初次打开加载的资源不能超过2M）
多webview的页面架构，小程序每新开一个页面都会用一个新的webview来渲染。为了防止webview对内存的消耗小程序限制層级不能超过10层。
预加载webview微信会预加载多一个wkwebview(ios平台)放后台，用户打开小程序时省去初始化wkwebview时间
如果大家有原创好文投稿，请直接给公號发送留言
