在开发小程序的过程中，我们会遇到很多问题。 前端是为用户解释的图形界面。 接下来讨论一下后端开发的实战总结。
自从陌陌发布小程序以来，各大公司纷纷跟进，想要从陌陌的流量池中分一杯羹。 我们公司也不例外。 我们整个后端团队在过去的六个月里基本上都在开发小程序。 前后还开发了四五个小程序。 我一直认为，应该留下一些东西，不仅是为了记录这些年我们踩过的坑，也是希望你不要再掉进坑里。
那些年我们踩过的坑
this.setData({
价格： this.formatPrice(this.data.price)
})
价格：{{tools.formatPrice(price)}}查看>
//wxs模块
var formatPrice = 函数（价格）{
价格=价格>>0；
返回 Number(价格 / 100).toFixed(2);
模块. 导出 = {
格式价格
@仅媒体屏幕
和（设备宽度：375px）
和（设备高度：812px）
和 (-webkit-device-pixel-ratio : 3) { }
微信小程序主流框架对比
韦皮
Wepy应该算是最早发布的小程序开发框架，提供了类似vue.js的语句风格和功能，应该是现阶段应用最广泛的框架。 我开发的几个小程序也使用了wepy框架。 先说一下我选择这个框架的原因。
类似Vue.js的句子风格适合我们团队原有的技术栈。 支持组件化（当时Momo官方API不支持组件化）。 支持加载外部npm包，支持ES6编写。
在wepy的早期使用中，wepy有自己的bug。 好在开发者反应及时，基本可以覆盖大部分场景。
但最大的坑是wepy组件的实现方法。 组件采用静态编译组件，即在编译阶段将组件编译到页面中，每个组件都是唯一的实例。 多个组件共享相同的数据。 并静态编译组件。 这样一来，在页面 A 和页面 B 中引用的组件 A 就会将两份代码复制到页面 A 和页面 B。分离组件并不会导致包体积减少。 后来，陌陌官方API支持组件化编程后，我们逐渐使用原生API构建了一些核心和更大的组件。
mpvue
mpvue 由美团团队开发，和 wepy 一样，在小程序上也提供了类似 vue.js 的开发体验。 作为后来者css锯齿边框，它抢占了wepy的大量市场份额（ps：我们团队最近也在考虑从wepy迁移到mpvue）。 这个框架的原理比wepy要复杂一些。 mpvue 修改了 Vue.js 的运行时和编译器实现，提供更接近 vue.js 的开发体验。
芋头
Taro 是京东团队开源的一套遵循 React 语法规范的多终端开发解决方案。 我对React或者Taro不太了解，所以就不多解释了。 具体可以阅读开发团队的博客和代码了解更多详情。 多终端统一开发框架-Taro
我看到小程序
我想从技术角度谈谈我对陌陌小程序的理解。 我认为小程序本身对于Hybrid App来说是一个特别优秀的技术解决方案。 有很多值得学习的地方，可以应用到我们Hybrid App的技术方案设计中。 了解和学习小程序的技术原理也可以更好地优化我们的代码。
渲染层和逻辑层分离
与之前常见的Hybrid方案相比，小程序采用了双线程模型：小程序的渲染层和逻辑层分离，逻辑层由JSCore解析执行，渲染层由webview渲染。 之前常见的Hybrid离线包解决方案大多采用webview同时实现页面渲染和js解析。 这样做的结果就是隔离了js运行时，导致在js代码中操作webview中的DOM对象和BOM对象变得困难。 任何与页面渲染相关的操作都很难用Js来做。 数据只能通过setData从JsCore传递到webview。
独立的 JS 运行环境相比同时处理页面渲染和 JS 执行的 webview 带来了一些好处：
Node.js 无法在页面上动态插入节点并干预页面的渲染，这就解决了安全和控制的问题，否则小程序的初步审查就没有意义了。 渲染层和逻辑层分离，减轻了webview的压力。 js的执行和页面的渲染可以并行进行，不会出现js执行卡在渲染主页面的情况。 多个页面可以共享单一的JS运行环境，数据可以轻松共享，小程序的整个生命周期共享相同的上下文，接近App体验。
缺点是：
webview和JSCore数据传输的消耗较多，需要将数据序列化成字符串格式进行传输。
离线包加载
离线包加载，常见的Hybrid Apps通过webview加载H5页面，前端页面放在服务器端。 虽然灵活性有保证。 然而，加载性能受网络速度影响很大。 页面切换卡顿时间较长。 小程序中钱包的加载形式。 将所有后端资源一次性加载到本地，然后解压。 大大提高了用户体验。 不过，为了避免下载离线包的时间过程，陌陌官方也严格限制了小程序包的大小。 （分包加载的情况下，分包大小不能超过2Mcss锯齿边框，即第一次加载的资源不能超过2M）
多webview框架
采用多webview页面结构，小程序中每次打开新页面，都会使用新的webview来渲染。 为了避免webview消耗显存。 小程序限制级别不能超过10级。
预加载网页视图
预加载webview，微信会再预加载一个wkwebview（ios平台）并放到后台，节省用户打开小程序时初始化wkwebview的时间。
发表评论