背景 俗话说，产品有三宝：弹窗、浮层加引导，足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说，实现一个模态框基本都可以达到信手拈来的地步，但是，当模态框里边的内容滚动起来以后，就会出现各种各样的让人摸不着头脑的问题，其中，最出名的想必就是滚动穿透。 什么是滚动穿透？ 滚动穿透的定义：指我们滑动顶层的弹窗，但效果上却滑动了底层的内容。 具体解决方案分析如下： 改变顶层：从穿透的思路考虑，如果顶层不会穿透过去，那么问题就解决了，所以我们尝试给蒙层加catchtouchmove，但是发现部分场景无效果，那么就不再赘述了。 改变底层：既然是顶层影响了底层，要是底层不会滚动，那就没这个问题了。 如何改变底层解决该问题呢？ 不成熟方案： 底部页面最外层view设置position: fixed;页面不可滚动，但是这个时候会导致页面回到顶部。 滚动时监听滚动距离，弹窗时记录滚动位置，关闭弹窗后使用wx.pageScrollTo回滚到记录的位置。 成熟方案 使用page-meta组件，通过该组件我们可以操作Page的style样式，类似于h5里body设置overflow: hidden; 控制页面不可滚动。文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 使用wx.setPageStyle设置overflow: hidden， 也可以实现给Page组件设置样式。） page-meta组件： 通过该组件我们可以直接操作[代码]Page[代码]组件 ，我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] wx.setPageStyle方法： 调用这个api，动态设置它为hidden/auto，用于控制页面是否可滚动，主要用于页面组件内使用，比如封装好的弹窗组件，就不用单独写page-meta组件了。。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // ‘auto’ } }) [代码] 老规矩，结尾放代码片段： https://developers.weixin.qq.com/s/U6ItgQmP7upQ 拓展 支付宝小程序虽然存在page-meta组件，但是由于内核为69版本，给page设置overflow: hidden 也无法控制底部元素不可滚动，目前已联系支付宝的底层开发同学提供API控制页面disableScroll，目前正在封装Appx，近期开放。

简介 一门热门的编程语言通常会留下一些带惊喜的「彩蛋」让你去自己深挖，小程序也是如此。此文是收集与整理官方未公布的一些彩蛋。希望大家多多提供线索。本文仅整理官方未公布的小程序相关包括但不限于：组件属性、功能、方法、API。 组件类 scroll-view里面的隐藏属性 throttle="{{false}}" 功能：关闭函数节流功能，可以更精准的bindScroll。但也更耗手机性能 [代码]app.json里面配置关闭同层渲染功能： "window": { "renderingMode": "seperated" } [代码] 收集中… 功能类 wx:for支持Object列表渲染 [代码]{ '2018-1-9':{ address: '....', name: '....' }, '2018-1-10':{ address: '....', name: '....' }, '2018-1-11':{ address: '....', name: '....' } } //wxml <view wx:for="{{obj}}" wx:for-index="key" wx:for-item="value"> {{key}} : {{value.address}} </view> [代码] 2.wx.chooseContact 作用：从手机通讯录中选择联系人并获取相关信息（iPhone下有兼容问题） [代码]参考代码： wx.chooseContact({ success:res=>{ that.customer.name = res.displayName; that.customer.contract = res.phoneNumber; }, complete: function(res) { } }); [代码] 收集中… 开发者工具类 完美支持各种插件安装，详见： 动手打造更强更好用的微信开发者工具-编辑器扩展篇 | 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000a8816e18748dd52f96f8975b413 历史版本的隐藏下载链接 升级开发者工具到最新，种种原因需要恢复旧版，旧版安装包找不到应急处理方法 | 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0008c4833f4450f8e32ab0dbc51013 官方社区类 有几个隐藏的官方的美女甩锅采用非官方账号在社区带节奏。具体我就不点名了。🐶🐶🐶🐶 收集中… 其他未公布的隐藏功能： 给此文点赞后的码农写代码永无BUG ，CP设计的产品人见人爱，BOSS每年收入翻番！ ↓↓↓↓

效果如下 [图片] 反正我是碰到了，在个人有限的英文单词库里给变量取一个合适的词能达意的英文变量名真是很费脑！要知道一个好的项目都是团队维护的，变量名的取名非常重要。这些相信不用俺说大家都深有体会。 今天要说的其实还是小程序编辑器的插件推荐，这个编辑器扩展工具可以解决变量取名的烦恼，提升开发效率。 今天说的插件是svenzhao.var-translation。大家可以在vscode上搜索到的。然后使用小程序编辑器扩展安装教程，把此vsCode插件安装到小程序编辑器里！ 小程序编辑器扩展安装教程：动手打造更强更好用的微信开发者工具-编辑器扩展篇 | 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000a8816e18748dd52f96f8975b413

1. 写在前面 1.1 微信开发者工具现状 具备一些基本的通用IDE功能，但是第三方的支持扩展需要加强。 1.2 开发者工具自带的编辑器扩展功能 可能很多老铁没用过官方的微信开发者工具的编辑器扩展（我一般称为编辑器插件）。官方把这块功能也隐藏得很深，也没有相关文档介绍，但是预留了相关的入口。合理利用第三方编辑器插件，可以极大的提升开发效率。下面先来看看官方预留的编辑器插件入口： [图片] （图一） 2. 几个不错插件安装效果 2.1 标签高亮插件-vincaslt.highlight-matching-tag [图片] 功能：可以把当前行对应的标签开头和结尾高亮起来，让开发者一目了然 2.2 小程序开发助手插件-overtrue.miniapp-helper [图片] 功能：必须要说的这个是纯国产的插件，里面的代码片段功能很全，具体介绍：小程序开发助手 - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=overtrue.miniapp-helper 2.3 minapp插件-qiu8310.minapp-vscode [图片] 功能：这个是今天的明星插件，里面的跳转功能很强，可以在wxml里CMD+点击对应变量/方法和CSS样式名称直接跳转到对应的js/wxss文件对应的地方。具体的下面是官方介绍： 标签名与属性自动补全 根据组件已有的属性，自动筛选出对应支持的属性集合 属性值自动补全 点击模板文件中的函数或属性跳转到 js/ts 定义的地方（纯 wxml 或 pug 文件才支持，vue 文件不完全支持） 样式名自动补全（纯 wxml 或 pug 文件才支持，vue 文件不完全支持） 在 vue 模板文件中也能自动补全，同时支持 pug 语言 支持 link（纯 wxml 或 pug 文件才支持，vue 文件不支持） 自定义组件自动补全（纯 wxml 文件才支持，vue 或 pug 文件不支持） 模板文件中 js 变量高亮（纯 wxml 或 pug 文件才支持，vue 文件不支持） 内置 snippets 支持 emmet 写法 wxml 格式化 3. DIY添加适合自己的插件 3.1 添加插件功能简介 仔细研究过微信开发者工具的人可能知道或者了解，其实微信开发者工具编辑器跟微软的开源编辑器vsCode「颇有渊源」。再深入研究发现，vsCode的插件完全可以无缝移植到微信开发者工具编辑器里来，所以今天的内容就是移植vsCode的插件到微信开发者工具。咱们先看看微信开发者工具自带的「管理编辑器扩展」功能（图1标注为2的地方） [图片]（图二） 3.2 插件添加具体步骤 3.2.1 安装插件，获取插件文件 安装vsCode并安装你需要移植的插件，必须要说的是vsCode的插件非常多，好的插件也很多。相关安装，搜索插件教程建议大家百度相关教程。或者直接下载vsCode亲自体验，插件安装过程还是非常简单的。 3.2.2 复制插件文件夹 找到vsCode相关插件的安装文件夹： 操作系统 安装路径 windows %USERPROFILE%.vscode\extensions macOS ~/.vscode/extensions Linux ~/.vscode/extensions 复制对应插件文件夹到微信开发者工具的「打开编辑器扩展目录」（图一标注为1的地方） 3.2.3 添加插件配置文件 新版开发者工具直接进入图形设置，扩展设置里勾选对应插件即可。如下图： [图片] 旧版操作方法：进入微信开发者工具的「管理编辑器扩展」功能页面，在尾端加入对应添加的插件名称。以以上3个介绍的插件为例，在原来的尾端加入： “vincaslt.highlight-matching-tag”, “overtrue.miniapp-helper”, “qiu8310.minapp-vscode” 3.2.4 见证奇迹 重启微信开发者工具，见证插件带来的编码便利吧！ 4 需要注意的 vsCode的插件很多，小程序相关的也越来越多了，但是插件质量参差不齐，所以安装时建议选择「标星」star比较多的插件。

前言:  数据的存储的位置会影响数据检索，读取的速度。书中选择了两个最为常见的的用法深入探究：函数和对象。本文主要记录的是函数相关研究。 结论： 1. 函数尽量使用局部变量，少访问全局变量；2. 不要使用with语句；3. 谨慎使用闭包。 正文： JavaScript函数中和数据直接联系的就是变量，而变量和作用域息息相关。于是乎如何快速的从作用域中读取变量，便是我们研究的关键。 1. 作用域 首先我们需要正确理解作用域的工作原理。每一个JavaScript函数是Funtion对象的一个实例，作用域Scope就是Funtion对象原型的一个内部属性。而作用域Scope由包含了一个当前函数会用到的各种变量对象的集合，并且按照顺序排列。这个集合被称为作用域链。作用域链是链表结构的。 当创建一个函数时，会在该函数的作用域链中插入一个全局对象，代表所有在全局范围内定义的变量，如图1所示。 [图片] 图1 作用域链(创建函数)   当执行一个函数时，会为该函数创建一个”执行环境(执行上下文)”的内部对象。每次调用函数时都会创建一个新的执行环境，当函数执行完毕，执行环境就被销毁。 当执行环境被创建时，同时会创建一个其专属的作用域链。先继承创建函数时的作用域链，然后将当前函数中的值，按照它们出现顺序复制到一个新对象中，这个对象称为活动对象。这个活动对象包含了该函数的所有局部变量，命名参数，参数集合以及this，然后这个活动对象推入作用域链的最前端，如图2所示。当函数执行完毕，执行环境被销毁，活动对象也随之销毁。   [图片]  图2 作用域链(执行函数)   2. 搜索变量 了解了作用域的工作原理后，我们便要开始研究变量。在执行函数过程中，每遇到一个变量，都会按顺序搜索执行环境的作用域链，查找同名的标识符。首先会在活动对象中查找，没找到则继续搜索作用域链的下一个对象，直到找到标识符。最终没找到则视为该标识符未定义。 显而易见，变量存储在作用域链越前端则搜索速度越快。而且需要知道的是，全局变量总是存在于作用域链的最末端。因此，尽量使用局部变量，能有效提高性能。 3. 不要使用with语句的一个原因 with语句用来给对象的所有属性新建一个存储对象，这个对象包含了参数指定的对象的所有属性，然后这个对象会被推入作用域链的首位，如图3所示，随之带来就是访问局部变量的代价变高了，因此这种方式是不可取的。 [图片] 图3 作用域链（with语句）   4. 慎用闭包 闭包是JavaScript最强大的特性之一，但是使用闭包会影响性能。 function setA () { return setB(); //这里setB就是一个闭包。 } setA执行时，会产生图2的作用域链。与此同时，闭包setB被创建，它的初始作用域链的引用和setA的作用域链的引用是完全一致的，如图4所示。闭包被调用时，还会推入自己的活动对象。  [图片] 图4 作用域链（带有闭包）   但是，由于闭包和setA有相同的作用域对象的引用，当setA销毁时，其作用域链无法销毁，因为闭包还在使用。所以使用闭包时需要更多的内存开销，需要谨慎使用。 拓展:1. 虽然对象是哈希表结构，但是作用域链却是实实在在的链表结构。 作用域在ES6被称为词法环境，词法环境在ES6 Spec中有这么一段解释：词法环境由一个 环境记录表 和一个指向外部词法环境的引用（可能为null）构成。这表明词法环境（作用域）是一个链表结构，而作用域链初始时便是函数创建时的词法环境。 由三段论即可证明作用域链是链表结构的。作用域链的查询越深，代价越大正是查询链表的特点之一。 2. 全局执行环境是最外围的一个执行环境，即window对象。所整个代码都是在各个执行环境里进行的，执行过程由一个环境栈控制，进入一个函数时，函数的执行环境就会入栈，执行结束则栈会将其执行环境弹出。 3. 作用域链中有多少个对象取决于执行环境的深度，本文举的只是最简单的例子。但是，全局对象在每个作用域链中都处于最末端（参考拓展1）这是不容置喙的。 4. try-catch语句的catch语句也可以改变作用域链，也是在作用域链的最前面加入一个新的对象，其包含的是被抛出的错误对象的声明，图3的with对象换成错误对象即可。  结语： 如有问题之处，还请指正，欢迎大家多多交流！

小程序性能优化[图片]启动加载优化在小程序启动时，微信会在背后完成几项工作：下载小程序代码包、加载小程序代码包、初始化小程序首页。 初始化小程序环境是微信环境做的工作,我们只需要控制代码包大小，和通过一些相关的缓存策略控制，和资源控制，逻辑控制，分包加载控制来进行启动加载优化。 勾选开发者工具中， 上传时压缩代码（若采用wepy高级版本，自带压缩，请按官网文档采取点击）精简代码，去掉不必要的WXML结构和未使用的WXSS定义。减少在代码包中直接嵌入的资源文件。（比如全国地区库，微信有自带的，在没必要的时候，勿自用自己的库）及时清理无用的资源（js文件、图片、demo页面等）压缩图片，使用适当的图片格式，减少本地图片数量等如果小程序比较复杂，优化后的代码总量可能仍然比较大，此时可以采用分包加载的方式进行优化，分包加载初始化时只加载首评相关、高频访问的资源，其他的按需加载。提前做异步请求，页面最好在onLoad时异步请求数据，不要在onReady时请求启用缓存数据策略，请求时先展示缓存内容，让页面尽快展示，请求到最新数据之后再刷新避免白屏，使用骨架屏等数据通信优化为了提升数据更新的性能，开发者在执行setData调用时，最好遵循以下原则： 不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用；数据通信的性能与数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂或包含长字符串，则不应使用setData来设置这些数据；与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下。提升数据更新性能方式的代码示例： Page({ onShow: function() { // 不要频繁调用setData this.setData({ a: 1 }) this.setData({ b: 2 }) // 绝大多数时候可优化为 this.setData({ a: 1, b: 2 }) // 不要设置不在界面渲染时使用的数据，并将界面无关的数据放在data外 this.setData({ myData: { a: '这个字符串在WXML中用到了', b: '这个字符串未在WXML中用到，而且它很长…………………………' } }) // 可以优化为 this.setData({ 'myData.a': '这个字符串在WXML中用到了' }) this._myData = { b: '这个字符串未在WXML中用到，而且它很长…………………………' } } }) 事件通信优化视图层会接受用户事件，如点击事件、触摸事件等。当一个用户事件被触发且有相关的事件监听器需要被触发时，视图层会将信息反馈给逻辑层。这个反馈是异步的，会产生延迟，降低延迟的方法有两个： 去掉不必要的事件绑定（WXML中的bind和catch），从而减少通信的数据量和次数；事件绑定时需要传输target和currentTarget的dataset，因而不要在节点的data前缀属性中放置过大的数据。渲染优化页面方法onPageScroll使用， 每次页面滚动都会触发，避免在里面写过于复杂的逻辑 ，特别是一些执行重渲染页面的逻辑在进行视图重渲染的时候，会进行当前节点树与新节点树的比较，去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。

使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基础用法 <!--web开发中顶层变量的key名是:root，小程序使用page--> page {    --main-bg-color: brown; } .one {   color: white;   background-color: var(--main-bg-color);   margin: 10px; } .two {   color: white;   background-color: black;   margin: 10px; } .three {   color: white;   background-color: var(--main-bg-color); } 提升用法 <div class="one">   <div class="two">     <div class="three">     </div>     <div class="four">     </div>   <div> </div> .two { --test: 10px; } .three { --test: 2em; } 在这个例子中，var(--test)的结果是： class="two" 对应的节点: 10px class="three" 对应的节点: element: 2em class="four" 对应的节点: 10px (继承自父级.two) class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值 上述是一些基本概念，大致说明css变量的使用方法，注意在web开发中，我们使用:root来设置顶层变量，更多详细说明参考MDN的 文档 妙用css变量 开发中经常遇到的问题是，css的数据是写死的，不能够和js变量直通，即有些数据使用动态变化的，但css用不了。对了，可以使用css变量试试呀 js // 在js中设置css变量 let myStyle = ` --bg-color:red;  --border-radius:50%; --wid:200px; --hgt:200px;` let chageStyle = ` --bg-color:red;  --border-radius:50%; --wid:300px; --hgt:300px;` Page({   data: {     viewData: {       style: myStyle     }   },   onLoad(){     setTimeout(() => {       this.setData({'viewData.style': chageStyle})     }, 2000);   } }) wxml <!--将css变量(js中设置的那些)赋值给style--> <view class="container">   <view class="my-view" style="{{viewData.style}}">     <image src="/images/abc.png" mode="widthFix"/>   </view> </view> wxss /* 使用var */ .my-view{   width: var(--wid);   height: var(--hgt);   border-radius: var(--border-radius);   padding: 10px;   box-sizing: border-box;   background-color: var(--bg-color);   transition: all 0.3s ease-in; } .my-view image{   width: 100%;   height: 100%;   border-radius: var(--border-radius); } 通过css变量就可以动态设置css的属性值 作者：天天修改 链接：https://segmentfault.com/a/1190000021922132

在小程序开发中，1rpx边框随处可见， 像上图UI给的设计稿，如果只是简单使用[代码]border: 1rpx solid red;[代码]的话，在不同的机型上会有不同的表现 [图片] 表现IOS 机型上[图片] Android机型上[图片] 由图片可以看出， IOS机型上会有边框缺失（然而经常出现缺不能稳定复现）， 而Android机型上边框比较粗 原因上面这两种表现形式很难联系到一起 首先先看IOS边框缺失的问题，借鉴网络上前辈们的经验 当父元素的高度为奇数，容易出现上下边框缺失，同理宽度为奇数，容易出现左右边框缺失解决办法是在边框内部添加一个1rpx的元素或者伪元素， 撑开内部使父元素的宽高是偶数。 然而我们发现这种方案在Iphone 6等2倍屏可以生效， 但放在如Iphone X等3倍屏下面就很飘了， 还是经常会出现边框缺失的情况， 这种情况下再去把父元素改为2和3共同的倍数就非常不现实了。 再回过头看导致边框缺失的具体原因是啥。 在这之前需要了解下高分屏的物理像素和虚拟像素的概念 简单来说物理像素是设备的实际像素 虚拟像素是设备的坐标点， 可以简单理解为css像素 而rpx类似rem，渲染后实际转换成px之后可能存在小数，在不同的设备上多多少少会存在渲染的问题。而1rpx的问题就更加明显，因为不足1个物理像素的话，在IOS会进行四舍五入，而安卓好像统一向上取整，这也是上面两种设备表现不同的原因。 解决方法我们采用的方法是采用translate:scale(0.5)的方法对边框进行缩放 具体的代码如下 .border1rpx, .border1rpx_before{ position: relative; border-width: 0rpx !important; padding: 0.5rpx; z-index: 0; } .border1rpx::after, .border1rpx_before::before{ content: ""; border-style: inherit; border-color: inherit; border-radius: inherit; box-sizing: border-box !important; position: absolute; border-width: 2rpx !important; left: 0; top: 0; width: 200% !important; height: 200% !important; transform-origin: 0 0; transform: scale(0.5) !important; z-index: -1; } .border1rpx-full { margin: -1rpx; } 给.border1rpx的元素设置边框宽度为0给::after伪元素宽高为两倍，边框设置2rpx，边框其他样式继承元素的设置然后再缩放0.5来达到边框为1rpx的效果 用法基础用法给相应的元素添加border1rpx的class即可， （.borde1rpx说：我们不生产边框，只是边框的搬运工，要显示边框样式的话还需要在元素上自行设置） 圆角边框圆角边框需要自行设置相应伪元素::before 或 ::after的border-raduis值为预期的2倍， 如原本想要设置10rpx的圆角，需要设置[代码].xxx::after{border-raduis: 20rpx;}[代码] 边框内部填充由于设计原因，目标元素会留1rpx的padding用于显示伪元素的边框，如果内部元素是填充的，正常会看到填充元素和目标元素有小部分间隙，此时需要给填充元素添加.border1rpx_full来解决 注意点此方案默认使用::after伪元素实现边框，如果目标元素的after被占用(如iconfont)，请使用[代码].border1rpx_before[代码]如单独设置边框(如上边框), [代码]border: 1rpx solid red;border-width: 1rpx 0 0 0;[代码]不能被正确继承，请使用简写[代码]border-top: 1rpx solid red;[代码]由于设计原因，目标元素请最少设置1rpx的padding用于显示边框,(上面的样式已经有了默认的padding，不写也可以， 只是不要用padding:0覆盖)请自行测试点击功能是否正常，防止层级关系导致元素区域被伪元素覆盖

本文整理了微盟小程序开发过程中遇到的一些问题。 问题一： iOS时间转换问题怎么解决？pc端调试、安卓机都能正常执行，iOS上time的结果是null var resData = ‘2017-3-14 10:03:45’ console.log(“返回时间：” + resData) var time = Date.parse(new Date(resData)) ; console.log(time); 解决方案： 将 ‘-’ 替换成 ‘/’ resData = resData.replace(/-/g, ‘/’); 问题二： 直播过程中可能会开始、暂停、继续、结束，客户端需要相应的做暂停和播放、结束，我们是希望通过消息的发送来通知到客户端，但是腾讯云IM的API调接口发群消息，限制 100次/秒，满足不了我们的需求 解决方案： 两点。 1、客户端轮询我们的接口，查询播放状态，舍弃。因为客户端数量过大时，服务端扛不住。 2、操作管理后台界面做轮询，一旦暂停，发送消息。客户端接口通过特定code跟普通消息做区分。 问题三： storage不可以共用，小程序和插件之间数据共享有问题怎么解决呢？ 解决方案： 插件使用小程序的共用方法(该方法由插件初始化时从构造函数传入)，可以通过此方法从小程序发起请求、存储数据等。 问题四： 小程序的10层跳转限制怎么破？ 解决方案： 判断一下当前页面长度是否达到10级，达到10级用redirectTo，未达到用navigateTo var jumpUrl = function (data) { [代码] let pages = getCurrentPages(); if (pages.length >= 10) { wx.redirectTo({ url: data }) } else { wx.navigateTo({ url: data }) } [代码] } 问题五： 浮点运算的精度问题一般怎么解决？ 解决方案： 先转成整数，再进行运算，最后进行除法运算。 列举一个减法运算： function accSub(arg1, arg2) { [代码] var r1, r2, m, n; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(".")[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //动态控制精度长度 n = (r1 >= r2) ? r1 : r2; return ((arg1 * m - arg2 * m) / m).toFixed(n); [代码] } 问题六： 小程序二维码scene的长度限制最多32位可见字符，这个有什么妙招吗 解决方案： 1、中间页 + 短参数 [代码] 新建一个中间空白跳转页面，每次生成的二维码都是这个页面， 访问这个页面时，将参数中的scene的值，去指定接口获取完整的 带参数的链接， 然后跳转过去，适用于一个解决方案中有很多个页面需要生成二维码来跳转； [代码] 2、短参数 [代码] 二维码指向到特定页面，scene值为短参数，进入页面时请求接口获取完整的参数(json格式)； [代码] 问题七： 还有一个图片预加载问题，有些活动图片太多太大，且不确定使用哪张图片，接口返回数据时即刻显示图片可能出现短暂空白的问题 解决方案： 分三步，你需要建立一个图片预加载器 1、js /** [代码]* 图片预加载组件 */ [代码] class ImgLoader { [代码] /** * 初始化方法，在页面的 onLoad 方法中调用，传入 Page 对象及图片加载完成的默认回调 */ constructor(pageContext, defaultCallback) { this.page = pageContext this.defaultCallback = defaultCallback || function () { } this.callbacks = {} this.imgInfo = {} this.page.data.imgLoadList = [] //下载队列 this.page._imgOnLoad = this._imgOnLoad.bind(this) [代码] this.page._imgOnLoadError= this._imgOnLoadError.bind(this) [代码] } /** * 加载图片 * * @param {String} src 图片地址 * @param {Function} callback 加载完成后的回调（可选），第一个参数个错误信息，第二个为图片信息 */ load(src, callback) { if (!src) return; let list = this.page.data.imgLoadList, imgInfo = this.imgInfo[src] if (callback) this.callbacks[src] = callback //已经加载成功过的，直接回调 if (imgInfo) { this._runCallback(null, { src: src, width: imgInfo.width, height: imgInfo.height }) //新的未在下载队列中的 } else if (list.indexOf(src) == -1) { list.push(src) this.page.setData({ 'imgLoadList': list }) } } _imgOnLoad(ev) { let src = ev.currentTarget.dataset.src, width = ev.detail.width, height = ev.detail.height //记录已下载图片的尺寸信息 this.imgInfo[src] = { width, height } this._removeFromLoadList(src) this._runCallback(null, { src, width, height }) } _imgOnLoadError(ev) { let src = ev.currentTarget.dataset.src this._removeFromLoadList(src) this._runCallback('Loading failed', { src }) } //将图片从下载队列中移除 _removeFromLoadList(src) { let list = this.page.data.imgLoadList list.splice(list.indexOf(src), 1) this.page.setData({ 'imgLoadList': list }) } //执行回调 _runCallback(err, data) { [代码] let callback = this.callbacks[data.src] || this.defaultCallback [代码] callback(err, data) delete this.callbacks[data.src] } [代码] } module.exports = ImgLoader 2、wxml <template name=“img-loader”> [代码] <image mode="aspectFill" wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="_imgOnLoad" binderror="_imgOnLoadError" style="width:0;height:0;opacity:0" /> [代码] </template> 3、使用 let images = [ [代码] 'http://cdn.weimob.com/saas/activity/bargain/images/arms/shoulie.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/shandian.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/fengbao.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/yingren.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/leiming.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/caidao.png', 'http://cdn.weimob.com/saas/activity/bargain/images/arms/liehen.png' [代码] ] //初始化图片预加载组件，并指定统一的加载完成回调 this.imgLoader = new ImgLoader(this, null); images.forEach(item => { [代码] this.imgLoader.load(item) [代码] }) 问题八： 服务端时间和客户端时间问题，实际项目中有很多倒计时存在，服务端和客户端时间不对应会引起错乱。 解决方案： 将服务器时间通过接口下发给客户端，计算出二者的差值，计算倒计时的时候，可以将客户端时间加上这个差值来，再跟开始时间或结束时间计算倒计时。 如果你还有什么问题，欢迎在下方留言，我们会尽力为你解答。

阅读基础：有小程序项目经验，有查阅官方文档习惯的小伙伴 随着公司小程序项目日益繁多，仅仅靠着官方提供的框架、组件、API，已经远远不能满足项目高效迭代的要求了，于是我们组内萌生了对小程序进行模块化的想法。 实际项目中我们对小程序模块化已经涉及各个模块，我总结一下，从三个方向跟大家分享我们不一样的模块化思路：[代码]Page+[代码]，[代码]basePage[代码]，[代码]适配层[代码]。 Page+：赋予页面更多的功能 [代码]Page()[代码]作为页面的入口，我们可以通过对其入参对象的封装实现：生命周期的改造、全局状态管理和新增页面功能。 官方删除了小程序分享回调 complete，一起来尝试将其恢复吧。一般我们的逻辑是这样的： [代码]// pages/index/index.js Page({ // 数据初始化 data: { shareFlag: false, //页面是否处于分享中 shareComplete: false //分享回调事件 }, // onShow 生命周期 onShow: function () { const { shareFlag, shareComplete } = this.data if( shareFlag ){ this.data.shareFlag = false //变量不涉及页面渲染，不使用 setData shareComplete && shareComplete() } }, // 分享事件 onShareAppMessage: function () { let shareInfo = { title: '分享测试标题', path: '', complete: function () { console.log('页面分享成功啦~') } } this.data.shareFlag = true this.data.shareComplete = typeof (shareInfo.complete) == 'function' ? shareInfo.complete : false return shareInfo } }) [代码] 在单页面内实现分享回调这样操作是可行的，如果多页面、多项目都要实现该功能，重复拷贝代码，则显格外得繁琐。 我们来将这个功能抽离封装一下吧。 [代码]// pages/index/index.js import PagePlus from './pagePlus.js' PagePlus({ // 分享事件 onShareAppMessage: function () { return { title: '分享测试标题', path: '', complete: function () { console.log('页面分享成功啦~') } } } }) [代码] [代码]// pages/index/pagePlus.js const PagePlus = (pageObj) => { const _onShow = pageObj.onShow, _onShareAppMessage = pageObj.onShareAppMessage, _data = { shareStatus: false, //页面是否处于分享中 shareComplete: false //分享回调事件 } Object.assign(_data, pageObj.data) delete pageObj.data pageObj.onShow = function () { typeof _onShow == 'function' && _onShow.apply(this) const { shareStatus, shareComplete } = this.data if (shareStatus) { this.data.shareStatus = false //变量不涉及页面渲染，不使用 setData shareComplete && shareComplete() } } pageObj.onShareAppMessage = function () { const shareInfo = typeof _onShareAppMessage == 'function' && _onShareAppMessage.apply(this) this.data.shareStatus = true shareInfo && (this.data.shareComplete = shareInfo.complete) return shareInfo } Page({ data: _data, ...pageObj }) } export default PagePlus [代码] 我们来增加一个新的生命周期回调——[代码]onReshow[代码]（页面非首次显示回调，常用于详情页操作影响上一页列表数据的场景）。 [代码]// pages/index/index.js import PagePlus from './pagePlus.js' PagePlus({ // 监听页面非首次显示 onReshow: function(){ console.log('onReshow lifeCallBack') }, onShareAppMessage: function () { return { title: '分享测试标题', path: '', complete: function () { console.log('页面分享成功啦~') } } } }) [代码] [代码]// pages/index/pagePlus.js class BasePage{ data = { pagePlus: { shareStatus: false, //页面是否处于分享中 shareComplete: false, //分享回调事件 firstEnter: true //第一次进入页面 } } methods = { onShow: this.onShow, onShareAppMessage: this.onShareAppMessage, onReshow: this.onReshow } onShow(){ const { shareStatus, shareComplete, firstEnter } = this.data.pagePlus if (firstEnter) { this.data.pagePlus.firstEnter = false } else { this.onReshow() } if (shareStatus) { this.data.pagePlus.shareStatus = false shareComplete && shareComplete() } } onShareAppMessage(shareInfo){ this.data.pagePlus.shareStatus = true shareInfo && (this.data.pagePlus.shareComplete = shareInfo.complete) } } const PagePlus = (pageObj) => { const basePage = new BasePage() for (var i in basePage.methods) { basePage.methods[i] = (() => { const key = i const _temFn = basePage.methods[key] return function () { if (key == 'onShareAppMessage') { const shareInfo = typeof pageObj[key] == 'function' && pageObj[key].apply(this, arguments) _temFn.apply(this, [shareInfo]) return shareInfo } typeof pageObj[key] == 'function' && pageObj[key].apply(this, arguments) typeof _temFn == 'function' && _temFn.apply(this, arguments) } })() } Object.assign(basePage.data, pageObj.data) delete pageObj.data Page({ data: basePage.data, ...pageObj, ...basePage.methods }) } export default PagePlus [代码] 自此，我们修改了原生的生命周期回调和增加了新的生命周期回调。当然我们还能为 Page+ 赋予更多的功能，例如： [代码]页面刷新[代码]：下拉自动刷新当前页。 [代码]定时器自动清除[代码]：离开页面时，自动清除页面执行的定时器。 [代码]全局状态管理[代码]：页面间数据共享，相关数据关联的组件即时渲染更新。 相关的代码实现，大家可以自己思考一下怎么实现；我的实现细节，如果大家感兴趣的话就在下方给我留言吧，你们的回复是我更新的动力哦。 basePage：公共 Component 管理器 小程序页面彼此独立，使用 Component 都需要各自引用，为了实现页面公共 Component 的统一管理，这个时候就可以引入 basePage 的概念：以 basePage 作为父组件，其他公共 Component 作为子组件，页面通过 basePage 对公共 Component 进行管理。 实现原理 1、定义一个 Component ，作为 basePage 。 2、每个页面统一引用 basePage ，且规定页面的元素都需要写到 <basePage/> 标签内部 。 3、通过 basePage 引用页面公共的 Component ，并进行业务逻辑编辑。 实现细节 实际使用过程中，我发现有两个问题： 1、Page 和 basePage 通信是非常频繁的，需要通过 WXML 数据绑定和 triggerEvent 触发事件，略显麻烦。 2、setTimeout、webSocket 等后台进程，可能触发[代码]非当前显示页面[代码]的渲染更新，而绝大部分情况，我们只需要[代码]当前显示页面[代码]的渲染更新。 针对这两种场景的优化，我们可以把当前显示页面的 basePage 实例对象赋值到 global 的某个具体变量；每当 Page 触发 show 生命周期回调的时候，我们就对这个变量赋值的实例对象进行更新，这样我们就可以通过 global 的变量直接操作当前显示页面的 basePage 了。 部分代码示例 [代码]{ "文件路径": "pages/index/index.json", "usingComponents": { "basePage": "../../components/basePage/index" } } [代码] [代码]<!--pages/index/index.wxml--> <basePage> <!-- 页面元素 --> </basePage> [代码] [代码]// components/basePage/index.js Component({ /** * Component 所在页面的生命周期函数 */ pageLifetimes: { show: function () { global.basePage = this }, hide: function () { global.basePage = null } } }) [代码] [代码]{ "文件路径": "components/basePage/index.json", "说明": "在此处统一引入页面公共的 Component", "component": true, "usingComponents": {} } [代码] [代码]<!--components/basePage/index.wxml--> <slot /> [代码] 适配层：让代码适应更多的场景 如果你的项目对代码后续维护、迭代和可移植性有较高需求，或者需要多项目并行，这个时候通过适配层去调用各个功能模块就显得尤为重要。适配层方面我做的还是比较粗糙的，如果有建议欢迎指出。 适配层的时机 项目不是 bugfix 级别的迭代，都有适配层设计的必要。 如果是[代码]新项目[代码]，心底不认为自己是“咸鱼”而是代码的“亲爹”，[代码]适配层完全可以作为标配[代码]去实现；这就是展现自己对代码全局观的时候了，把自己对代码的理解都用适配层去诠释吧。 如果是[代码]旧项目迭代[代码]，在项目排期允许的情况下，尽可能理解原代码的基本实现细节；对比新的项目是要束手束脚一些，适配层的设计要在[代码]尽可能少改变原有代码[代码]的情况下进行；如果排期比紧急，适配层的完整实现[代码]可以在几个版本迭代中逐步实现[代码]。 模块设计必须高内聚低耦合 如果功能模块的设计过于松散、耦合复杂，这就意味着适配层将需要做各种兼容，这和适配层设计的初衷背道而驰，不做也罢。 配置文件 如果你的代码有移植性要求，为这些不同环境准备对应的配置文件吧，配置文件可以通过自制脚手架实现，也可以粗暴地手动替换，在保证尽可能不出错的情况下实现即可。 功能模块的入口 所有整合的功能模块都需要通过适配层进行调用，适配层就是你的“王之财宝”。 规范 && 文档 适配层是从代码的全局考虑，如果是项目是分工完成，项目的开发人员都需要遵守适配层规范进行代码开发；文档我一直都认为都是非常必要的，但还是经常会懈怠，没有进行完整的文档编写，但我基本会在所有项目成员都能理解适配层的情况下，进行简单的口头说明。 因为开心说一些废话 一次需求迭代中，几乎涉及手头上的所有小程序项目；刚好就在需求前的半个月，我们小组完成了对所有项目模块化改造；虽然需求来得很急，我们还是很完美的实现了。毕竟[代码]模块化之前，每个项目的改造都是独立的工作量；模块化之后，就只有适配层迭代的工作量了[代码]。不过真是辛苦了测试小伙伴，因为对所有项目进行模块化改造，意味着测试小伙伴对所有项目进行回归测试，感谢测试小伙伴，比心！ 这篇文章，对 Page+ 的具体实现展示比较详细，感觉对 basePage 和适配层讲的都比较偏概念。毕竟这部分内容都和业务逻辑联系比较紧密，很难抽象深入讲解。刚好还有假期还有一段时间，如果自己还有时间就再写一篇关于最近项目的模块化剖析吧，哈哈。

数据统计作为⽬前⼀种常⽤的分析⽤户⾏为的⽅式，⼩程序端也是必不可少 的。⼩程序采取的曝光，点击数据埋点其实和h5原理是⼀样的。但是埋点作为⼀个和业务逻辑不相关的需求，我们如果在每⼀个点击事件，每⼀个⽣命周期加⼊各种埋点代码，则会⼲扰正常的业务逻辑，和使代码变的臃肿，提供下面方案来解决数据埋点 page = function(params) { let keys = params.keys()  keys.forEach(v => {  if (v === 'onLoad') {  params[v] = function(options) {  stat() //埋点代码  params[v].call(this, options)  }  }  else if (v.includes('click')) {  params[v] = funciton(event) {  let data = event.dataset.config  stat(data) // 点击埋点  param[v].call(this)  }  }  }) } 这种思路不光适⽤于埋点，也可以⽤来作全局异常处理等场景 。