众所周知 ，小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

但随着功能的日益叠加，产品需求的更新迭代，使得小程序开发越来越复杂，良好的编码习惯以及好的处理方式，使得我们在开发中事半功倍！，笔者最近几年在从事小程序方面的开发，期间也踩了不少坑，也总结了一些小技巧，希望读者在开发中少走一些弯路，下面罗列了一些笔者日常开发中使用的小技巧。

小程序全局组件的引入

有时候我们 需要用到的公共组件，在每个页面的 json文件都需要引入，太麻烦，小程序支持全局引入的方式，不过必须在 wxml文件中 加载组件具体使用: 我们可以在 app.json 文件中的 usingComponents 这个属性下引入

"usingComponents": { "mp-button": "/components/mp-button/mp-button", },

实现一个工厂函数 包装微信相关的方法 让其支持 Promise 写法

描述：我们知道 小程序相关的api 都是采用 回调的方式处理异步，这样我们在开发使用的时候很不方便 ，可不可以把微信相关的方法用 异步的方式书写呢？（基础库版本小于1.9.6，此版本以上以支持promise写法）实现思路：其实是对 wx 相关的api 进行promise 包装，success 调用 resolve 通过 ，fail 调用 reject 拒绝。// wx 原始api写法 如选择相册 wx.chooseImage({ count: 1, sizeType: [original, compressed], sourceType: [album, camera], success (res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths } fail(err){ console.log(err) } }) /* * 我们可以发现规律 微信的 回调写法 成功会走 success ，失败会走 fail 方法 * 所以我们可以实现如下 工厂函数，去对 wx.api 进行包装 返回一个promise **/ function promisify(func) { if (typeof func !== function) return fn return (args = {}) => new Promise((resolve, reject) => { func( Object.assign(args, { success: resolve, fail: reject }) ) }) } //使用 先加工 api const promiseChooseImage = promisify(wx.chooseImage) // 使用：异步写法 async ()=>{ await promiseChooseImage({ count: 1, sizeType: [original, compressed], sourceType: [album, camera], }) }

当然，我们也可以实现一个工具类，把用到的相关api 加工就行了 如下：

module.exports = { login: promisify(wx.login), chooseImage:promisify(wx.chooseImage:promisify), ... 把需要用到的api 进行加工就行了 }

用 async await 的方式 去写异步

小程序开发者工具已经支持 async await 语法糖去写异步(最新版的工具，已经把增强编译和 将es6编译成es5融合在了一起)

需要开启增强编译

写法如下： async onLoad(options) { const res = await this.fetchData() }

适配：一段查询样式解决 iphone x系列的适配

我们知道 iPhone x 系列的手机基本上都有 一个刘海 还有小嘴巴，这给我们开发带来了适配挑战

用css 查询的写法适配 iphone x系列原理：利用css constant 和 env 属性// 样式 @supports (bottom: constant(safe-area-inset-bottom)) { .iphonex-safe-area { padding-bottom: env(safe-area-inset-bottom); } } @supports (bottom: env(safe-area-inset-bottom)) { .iphonex-safe-area { padding-bottom: env(safe-area-inset-bottom); } } //用法： <view class="iphonex-safe-area"/>

通过 wx.getAccountInfoSync().envVersion 获取微信的包环境

有时候我们需要实现 去判断小程序代码包是生产包，还是预发布包的需求，wx给我们提供了相关的api

const accountInfo = wx.getAccountInfoSync() console.log(accountInfo.envVersion )

envVersion 三个变量值

develop: 开发版trial: 体验版release: 正式版

通过 wx.onAppRoute 实现自动化埋点上报

当我们的产品做到一定程度的时候，肯定离不来 用户分析行为，去帮助运营统计 页面的访问量，页面的停留时间等。笔者**想法 会在小程序的每个页面去实现，但是发现我们的小程序非常庞大，有好多页面，瞬间崩溃，这该写到什么时候呢？还好发现了一个 wx.onAppRoute 这个方法，一个非常好用，但是官方隐藏的api，用于路由监听的方法

该方法，可以实现监听路由的变化，并返回当前路由的一些信息 如下：

openType 当前路由的跳转形式page 当前路由的的 页面配置信息window (小程序的状态栏、导航条、标题、窗口背景色配置) 信息usingComponents 用到的组件path 当前路由地址query 当前路由携带的参数webviewId 当前视图的id

自动化埋点伪代码：

//维护一个路由栈 const routStack = [] wx.onAppRoute( res =>{ //每次路由变化的时候，如果 打开类型 openType 是 navigateTo 类型的，就入栈 if(res.openType === navigateTo ){ //页面进入上报 reportEntePage(res.path) routStack.push({ path:res.path, enterTime: new Date().getTime() }) } if(res.openType === "navigateBack" ){ const popRoute = routStack.pop() // 上报 页面停留时间 const leaveTime = new Date().getTime() reportStayPage({ ...popRoute, leaveTime, //页面离开时间 stayTime: leaveTime - popRoute.enterTime //计算页面停留时间 }) } })

如何获取 小程序的 navigationBarTitleText

我们可以通过 wx.setNavigationBarTitle 去动态的设置 小程序 的导航标题，但是如何获取呢？官方也没有提供类似的api , 我猜想 微信可能既然你可以动态的设置title，你肯定知道这个title的名称，所以没提供获取 导航名称的方法 那如何实现获取标题的方法呢？ 那就是微信的 __wxConfig 这个对象，有兴趣的同学，可以在开发工具控制台 打印下看看这个 微信私有配置

思路： 获取当前路由 ，匹配 __wxConfig 下的路由的 window（视图信息）注意： __wxConfig下的 page 是以 xxx.html的形式的键值/** * 获取当前路由 */ function getCurrentRoute(len = 1) { const pages = getCurrentPages() const page = pages[pages.length - len] return page } //获取动态 navigationBarTitleText __wxConfig.page[`${getCurrentRoute().route}.html`].window.navigationBarTitleText

如何实现 Page 的钩子函数

描述：由于小程序是多页面的方式，有时候我们需要去实现一个 钩子函数去解决重复的代码量 比如： 权限 这些功能思路： 对 Page 进行重写，拦截生命周期相关方法，进行处理，然后再通过 call 继承Page 生命周期方法相关方法

如下：

/** * 实现一个 创建小程序page 方法 * @param option */ function createPage(option) { const onLoad = option.onLoad option.onLoad = function () { // 可以在生命周期onLoad 进行拦截，处理一些业务，比如上报，自定义实现store onLoad && onLoad.call(this) } const onShow = option.onShow option.onShow = function () { onShow && onShow.call(this) } const onUnload = option.onUnload option.onUnload = function () { onUnload && onUnload.call(this) } Page(option) }

用法：同小程序原生写法

createPage({ onLoad(){}, })

用法：

import cratePage from ../../utils/createPage Page(createPage({ data: { }, onLoad(options) { }, onShow() { }, onHide() { }, }));

通过wxs 数据格式化

有时候我们需要去 格式化数据，去满足 UI 相关的展示，但是如果是列表，又不想通过循环遍历的方式去改变每条数据 怎么办呢？ 这时候wxs就派上用场了

开发中我们常见的案例，格式化 订单号，每隔4位一个空格 如12345678 -> 1234 5678 这种，可以借助wxs去实现

代码如下： //wxs <wxs module="_"> var handleOrderNo = function(orderno) { var _orderno = orderno if(orderno){ var reg = getRegExp((.{4}),g); _orderno = (orderno+"").replace(reg,"$1 "); } return _orderno; } module.exports.handleOrderNo = handleOrderNo; </wxs> //wxml <view>{{_.handleOrderNo(orderNo)}}</view>

总结：

当下，小程序越来越受欢迎，小程序生态也在不停的完善，包括我们碎碎念的开发者工具也在不停的迭代，最新版本小程序开发者工具已经支持了 （ts,sass,less）预编译，感兴趣的同学，可以私底下更新到最新版本去体验。前方的路只有越走越好，只要我们遇到问题，不退缩，砥砺前行，迎接的只有美好！