众所周知 ，小程序提供了一个简单、高效的应用开发框架和丰富的组件及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）预编译，感兴趣的同学，可以私底下更新到最新版本去体验。前方的路只有越走越好，只要我们遇到问题，不退缩，砥砺前行，迎接的只有美好！