自从手机微信微信小程序发布以来，主要公司一直在竞相追踪并希望获得一部分手机微信流量池。我公司也不例外，在过去的六个月中，大多数前端开发精英团队一直在开发小程序。从头到尾也已经开发和设计了四个或五个微信小程序。我一直觉得这里还有待保留的地方，不仅是要记录那些年我们踩过的坑，而且还希望每个人都不要再掉进坑里。

那几年我们踩的坑

css样式不能引用本地图像资源，只能引用联机资源（背景图像），并且只能将本地徽标资源与徽标一起使用。 {{}}不能用于包含数字，仅适用于基本的简单计算和ES6扩展运算符。对于常见的解决方案，例如将价格恢复为出厂设置，只能在js代码中解决，然后在模板中进行3D渲染。 this.setData（{价格：this.formatPrice（this.data.price）}）可以解决无法根据wxs将数据包含在控制模块中的问题。它可以保证模拟仿真vue.js中过滤设备的功能。价格：{{tools.formatPrice（price）}} // wxs控制模块var formatPrice =函数（价格）{price = price >> 0; return Number（price / 100).toFixed（2);}模块.exports = {formatPrice} 微信小程序与共享指向微信Moments的链接不兼容。临时的常规方法是使用网页小程序的QR码到本地相册，然后客户独立发送Moments。Promotion。前端开发可以通过canvas完成，从而减轻了服务器端的工作压力。

但是，可能会出现锯齿状和不清楚的照片问题。建议将不同的规范用于浏览图像和存储在真实设备中的照片。实际设备中存储的照片的总宽度为750。与浏览的图片相比，它更大，因此在手机上存储的图片会更清晰。 微信小程序合理的布局选择rpx企业，并且UI草案符合750宽的工程图。 UI草案的规范可以立即应用。但是，在某些机型上不会显示1rpx。您可以使用H5方法完成1px的实际效果。 IphoneX与底部按钮兼容，您可以使用媒体查询获取wx.getSystemInfo以获得模型。请参阅@media only屏幕和（device-width：375px）和（device-height：812px）和（-webkit-device-pixel-ratio：3){}网页A->网页B，网页B实际操作开始了网页A的数据信息升级。回到升级网页A的数据信息，通常有两种方法可以完成（我公司选择了计划二)：监视Web上的onShow恶意事件A页，当onShow恶意事件打开时，我没有大脑去升级网页数据信息，根据EventBus完成跨网页通信，复杂组件的开发设计，组件的开发设计。省，地区和城市的三级链接选择器，获取微信地址库的详细信息。地址的编号与业务流程中选择的省，区，市的编号不同。

网页访问级别不能超过10个级别。 微信小程序 微信小程序该项目已打包并加载。手机微信对小程序包装的尺寸有以下限制。所有项目分包的所有微信小程序大小均不得超过8M。单个项目分包/主包的大小不能超过2M。 小程序流行的体系结构cf. wepympvueTarowepy应该算作开始时宣布的小程序定制开发体系结构，显示出类似的含义。 js English的语法设计风格和特征也应该是当前最常用的体系结构。我开发和设计的许多微信小程序都使用wepy架构。让我从谈论为什么选择这种结构开始。类似于Vue.js的英语语法设计风格，适用于精英团队的原始技术栈，适用于组件化（当时微信官方网站API与组件化不兼容），适用于加载外部npm包，适用于ES6编写早期应用程序在wepy的整个过程中，wepy具有内置的错误。但幸运的是，开发人员立即做出了回应，其中大多数可以涵盖大多数情况。

但是，wepy组件的完成方法有一个很大的陷阱。该组件是静态数据编译器组件，即该组件在编译器链接期间将程序编译到网页中，并且每个组件都是唯一的情况。几个组件共享相同的数据信息。和静态数据编译器组件。结果，组件A被引入到网页A和网页B中，并且它将被复制两次并编码到网页A和网页B中。由此产生的部件拆卸并没有完全减少袋子的体积。 。在微信的中后期，官方网站API是使用组件化程序编写的，我们逐渐使用原始的音轨API重建了一些更关键，更大量的组件。

由美团外卖精英团队开发和设计的mpvue和wepy还展示了与微信小程序上的vue.js类似的开发和设计经验。幸运的是，它已经占据了Wepy的很多市场份额（ps：每个人的精英团队也在考虑从wepy转到mpvue）。这种架构的基本原理比wepy要复杂一些。 mpvue改变了Vue.js的运行时和编译器，显示了更接近vue.js的开发和设计经验。

Taro是由京东商城精英团队开源系统开发的跨平台开发和设计解决方案，符合React英语语法标准。我对React和Taro不太熟悉，因此很少表达它们。实际上，您可以看到开发和设计精英团队的博客和编码。掌握大量要点。跨平台统一开发框架-芋头

我认为微信小程序我想从技术角度谈谈我对小程序的理解。我认为微信小程序本身是混合应用程序非常好的技术规范。有很多值得学习的领域，可以应用于Hybrid App的技术设计。掌握，学习和培训微信小程序技术基本原理也可以增强每个人的编码。 3D渲染层和逻辑层是分开的

微信小程序与以前的一般Hybrid计划相比，应用了两线程实体模型：微信小程序的3D渲染层和逻辑层是分离的，并且根据JSCore分析和实现了逻辑层。 3D渲染层是基于Webview的3D渲染。先前的大多数常规Hybrid离线打包计划都使用webview来完成网页的3D渲染和js分析。这样做的结果是隔离js的运行时，并且不可能在js代码中实际操作Web视图中的DOM对象和BOM目标。 Js无法完成与网页3D渲染有关的所有实际操作。仅根据setData将数据信息从JsCore传输到Webview。与webview相比，一个单独的JS软件环境在解决网页的3D渲染和JS的实现方面具有一些好处：js无法在网页中动态插入连接点并干扰网页的3D渲染，从而解决了安全性和监管问题，否则微信小程序的发布批准将变得越来越毫无价值。 3D渲染层和逻辑层的分离减轻了Web视图的工作压力。 js的实现和网页的3D渲染可以并行处理，很难引起js执行主页的3D渲染的情况。几个网页可以在JS软件环境中共享资源，数据信息共享资源非常方便，所有微信小程序生命周期共享资源都具有相同的上下文，接近于应用程序体验。缺点取决于：

添加了许多Webview和JSCore数据传输成本。数据信息必须被编码并序列化为字符串数组文件格式以进行传输。离线打包加载

脱机软件包加载，流行的Hybrid App基于webview加载H5网页，所有前端开发网页都放在服务器端。虽然可以确保协调。但是，加载功能网络的速度非常有害。网页切换到黑屏需要很长时间。 微信小程序如何加载离线软件包。立即将所有前端资源加载到本地以减轻压力。大大改善了客户体验。但是，为了更好地避免下载脱机软件包的整个过程，微信官方网站还严格限制了小程序软件包的数量。 （在项目子包加载的情况下，子包的大小不能超过2M，即第一次加载的资源不能超过2M）

多网页视图框架

多网页视图网页结构。 微信小程序打开的每个新网页均以3D呈现，并带有一个新的Webview。为了更好地避免webview占用运行内存。 微信小程序限制级别不能超过10个级别。

预载网页视图

预加载webview，手机微信将预加载一个wkwebview（ios平台）以进行后台管理，客户在打开微信小程序时将节省重置wkwebview的时间。