小程序开发实践总结

作者：Darko

segmentfault.com/a/1190000016027966

自微信推出小程序以来，各大公司纷纷跟进，试图从微信中分一杯羹。我们公司也不例外。过去六个月，我们整个前端团队基本上都在开发小程序。已经开发了四五个小程序。我总觉得我们应该留下一些东西。它不仅是对那些年我们踩过的坑的记录，更是希望我们不会再次掉进坑里。

那些年我们踩过的洞

css样式不能引用本地图像资源，只能引用联机资源（背景图像），本地图像资源只能使用＜image＞标签引用。

｛｛｝｝无法执行函数方法。｛｛｝｝只支持基本的简单操作和ES6扩展运算符。价格格式化等常见处理只能在js代码中完成，然后在模板中呈现。

this.set数据({

价格：this.formatPrice（this.data.price）

})

wxs模块可以解决｛｛｝无法执行函数的问题。它可以模拟vue.js中的过滤函数。

价格：｛｛tools.formatPrice（Price）｝｝</view>

//Wxs模块

var formatPrice=函数（价格）{

price=价格>>；0

return Number（price/100）.toFixed（2）；

}

单元导出={

格式价格

}

小程序不支持共享朋友圈的链接。目前，一般做法是使用保存的页面小程序代码生成图片到本地相册。用户也会发送自己的朋友进行转发。前端可以通过canvas实现，以减轻服务器上的压力。然而，将存在图像锯齿不清晰的问题。建议预览图像和保存到真实机器的图像采用不同的大小。保存在真实机器上的图片有750宽。它比预览更大，因此保存到手机中的图片将更清晰。

小程序布局采用rpx单位，根据750的宽度绘制UI草稿。您可以直接使用UI草稿的大小。但是，在某些型号上无法显示1rpx。您可以使用H5实现1px效果。

对于iPhone X底部抽吸按钮的适配，您可以使用媒体查询获取wx。getSystemInfo获取模型。

@仅媒体屏幕

和（设备宽度：375px）

和（设备高度：812px）

和（-webkit设备像素比：3）｛｝

页面A->页面B，页面B的操作触发了页面A的数据更新。通常有两种方式返回更新页面A上的数据（我们公司采用方案2）：

倾听页面A上的onShow事件，并更新页面数据，而不考虑何时触发onShow。

通过EventBus实现跨页面通信。

复杂组件的开发、省市区三级联动选择器的开发、微信地址库的地址代码和用于业务的省市区代码不匹配。

页面路径的最大级别不能超过10。

小程序以包的形式加载。微信对小包裹的大小有以下限制。

1.整个小程序的所有子包的大小不得超过8M

2.单个分包/主包的尺寸不能超过2M

微信小程序主流框架比较

纬纱

mpvue公司

芋头

纬纱

Wepy应该被视为第一个发布的小程序开发框架，提供了一个vue类。js的语法风格和特性也应该是现阶段使用最广泛的框架。我开发的几个小程序也使用了wepy框架。首先让我告诉你为什么我们选择这个框架。

Vue。类似js的语法风格适合我们团队的原始技术堆栈

支持组件化（当时微信官方API不支持组件化）

支持加载外部npm包

支持ES6写入

在wepy的早期使用中，wepy有自己的bug。幸运的是，开发人员反应迅速，基本涵盖了大部分场景。

但最大的缺陷之一是wepy组件的实现方式。组件使用静态编译组件，即组件在编译阶段被编译到页面中，每个组件都是唯一的实例。多个组件共享相同的数据。并静态编译组件。因此，在页面a和页面B上引用的组件a会将两个代码副本复制到页面a和B中。因此，拆分组件不会减少包的数量。后来，在微信官方API支持基于组件的编程之后，我们逐渐用声学API重构了一些核心和大型组件。

mpvue公司

由美团团队开发的mpvue和wepy也在小程序Js上提供了类似的vue开发体验。作为一个