众所周知 ，小程序提供了一个简单、高效的应用开发框架和丰富的组件及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

wx.onAppRoute 实例

自动化埋点伪代码：

//维护一个路由栈
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

__wxConfig实例

如何实现 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）预编译，感兴趣的同学，可以私底下更新到最新版本去体验。前方的路只有越走越好，只要我们遇到问题，不退缩，砥砺前行，迎接的只有美好！