眾所周知 ，小程序提供了一個簡單、高效的應用開發(fā)框架和豐富的組件及API，幫助開發(fā)者在微信中開發(fā)具有原生 APP 體驗的服務。

但隨著功能的日益疊加，產品需求的更新迭代，使得小程序開發(fā)越來越復雜，良好的編碼習慣以及好的處理方式，使得我們在開發(fā)中事半功倍！，筆者最近幾年在從事小程序方面的開發(fā)，期間也踩了不少坑，也總結了一些小技巧，希望讀者在開發(fā)中少走一些彎路，下面羅列了一些筆者日常開發(fā)中使用的小技巧。

微信小程序

小程序全局組件的引入

有時候我們 需要用到的公共組件，在每個頁面的 json文件都需要引入，太麻煩，小程序支持全局引入的方式，不過必須在 wxml文件中 加載組件
具體使用: 我們可以在 app.json 文件中的 usingComponents 這個屬性下引入

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

實現(xiàn)一個工廠函數(shù) 包裝微信相關的方法 讓其支持 Promise 寫法

• 描述：我們知道 小程序相關的api 都是采用 回調的方式處理異步，這樣我們在開發(fā)使用的時候很不方便 ，可不可以把微信相關的方法用 異步的方式書寫呢？（基礎庫版本小于1.9.6，此版本以上以支持promise寫法）
• 實現(xiàn)思路：其實是對 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)
}
})

/* 
 * 我們可以發(fā)現(xiàn)規(guī)律 微信的 回調寫法 成功會走 success ，失敗會走 fail 方法
 * 所以我們可以實現(xiàn)如下 工廠函數(shù)，去對 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'],
})
}

當然，我們也可以實現(xiàn)一個工具類，把用到的相關api 加工就行了 如下：

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

用 async await 的方式 去寫異步

• 小程序開發(fā)者工具已經支持 async await 語法糖去寫異步(最新版的工具，已經把增強編譯和 將es6編譯成es5融合在了一起)
• 需要開啟增強編譯
  寫法如下：

async onLoad(options) {
const res = await this.fetchData()
}

適配：一段查詢樣式解決 iphone x系列的適配

我們知道 iPhone x 系列的手機基本上都有 一個劉海 還有小嘴巴，這給我們開發(fā)帶來了適配挑戰(zhàn)

• 用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 獲取微信的包環(huán)境

有時候我們需要實現(xiàn) 去判斷小程序代碼包是生產包，還是預發(fā)布包的需求，wx給我們提供了相關的api

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

envVersion 三個變量值

• develop: 開發(fā)版
• trial: 體驗版
• release: 正式版

通過 wx.onAppRoute 實現(xiàn)自動化埋點上報

當我們的產品做到一定程度的時候，肯定離不來 用戶分析行為，去幫助運營統(tǒng)計 頁面的訪問量，頁面的停留時間等。筆者第一想法 會在小程序的每個頁面去實現(xiàn)，但是發(fā)現(xiàn)我們的小程序非常龐大，有好多頁面，瞬間崩潰，這該寫到什么時候呢？還好發(fā)現(xiàn)了一個 wx.onAppRoute 這個方法，一個非常好用，但是官方隱藏的api，用于路由監(jiān)聽的方法

該方法，可以實現(xiàn)監(jiān)聽路由的變化，并返回當前路由的一些信息 如下：

• openType 當前路由的跳轉形式
• page 當前路由的的 頁面配置信息
• window (小程序的狀態(tài)欄、導航條、標題、窗口背景色配置) 信息
• usingComponents 用到的組件
• path 當前路由地址
• query 當前路由攜帶的參數(shù)
• 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 去動態(tài)的設置 小程序 的導航標題，但是如何獲取呢？官方也沒有提供類似的api , 我猜想 微信可能既然你可以動態(tài)的設置title，你肯定知道這個title的名稱，所以沒提供獲取 導航名稱的方法 那如何實現(xiàn)獲取標題的方法呢？ 那就是微信的 __wxConfig 這個對象，有興趣的同學，可以在開發(fā)工具控制臺 打印下看看這個 微信私有配置

• 思路： 獲取當前路由 ，匹配 __wxConfig 下的路由的 window（視圖信息）
• 注意： __wxConfig下的 page 是以 xxx.html的形式的鍵值

/**
 * 獲取當前路由
 */
function getCurrentRoute(len = 1) {
  const pages = getCurrentPages()
  const page = pages[pages.length - len]
  return page
}

//獲取動態(tài) navigationBarTitleText
__wxConfig.page[`${getCurrentRoute().route}.html`].window.navigationBarTitleText

__wxConfig實例

如何實現(xiàn) Page 的鉤子函數(shù)

• 描述：由于小程序是多頁面的方式，有時候我們需要去實現(xiàn)一個 鉤子函數(shù)去解決重復的代碼量 比如： 權限 這些功能
• 思路： 對 Page 進行重寫，攔截生命周期相關方法，進行處理，然后再通過 call 繼承Page 生命周期方法相關方法

如下：

/**
 * 實現(xiàn)一個 創(chuàng)建小程序page 方法
 * @param option 
 */
function createPage(option) {
    const onLoad = option.onLoad
    option.onLoad = function () {
        // 可以在生命周期onLoad 進行攔截，處理一些業(yè)務，比如上報，自定義實現(xiàn)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 數(shù)據(jù)格式化

有時候我們需要去 格式化數(shù)據(jù)，去滿足 UI 相關的展示，但是如果是列表，又不想通過循環(huán)遍歷的方式去改變每條數(shù)據(jù) 怎么辦呢？ 這時候wxs就派上用場了
開發(fā)中我們常見的案例，格式化 訂單號，每隔4位一個空格 如12345678 -> 1234 5678 這種，可以借助wxs去實現(xiàn)
代碼如下：

//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>

總結：

當下，小程序越來越受歡迎，小程序生態(tài)也在不停的完善，包括我們碎碎念的開發(fā)者工具也在不停的迭代，最新版本小程序開發(fā)者工具已經支持了 （ts,sass,less）預編譯，感興趣的同學，可以私底下更新到最新版本去體驗。前方的路只有越走越好，只要我們遇到問題，不退縮，砥礪前行，迎接的只有美好！