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

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

微信小程序

小程序全局組件的引入

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

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

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

• 描述：我們知道 小程序相關(guān)的api 都是采用 回調(diào)的方式處理異步，這樣我們?cè)陂_(kāi)發(fā)使用的時(shí)候很不方便 ，可不可以把微信相關(guān)的方法用 異步的方式書(shū)寫呢？（基礎(chǔ)庫(kù)版本小于1.9.6，此版本以上以支持promise寫法）
• 實(shí)現(xiàn)思路：其實(shí)是對(duì) wx 相關(guān)的api 進(jìn)行promise 包裝，success 調(diào)用 resolve 通過(guò) ，fail 調(diào)用 reject 拒絕。

// wx 原始api寫法 如選擇相冊(cè)
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success (res) {
    // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
    const tempFilePaths = res.tempFilePaths
  }
fail(err){
 console.log(err)
}
})

/* 
 * 我們可以發(fā)現(xiàn)規(guī)律 微信的 回調(diào)寫法 成功會(huì)走 success ，失敗會(huì)走 fail 方法
 * 所以我們可以實(shí)現(xiàn)如下 工廠函數(shù)，去對(duì) wx.api 進(jìn)行包裝 返回一個(gè)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'],
})
}

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

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

用 async await 的方式 去寫異步

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

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

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

我們知道 iPhone x 系列的手機(jī)基本上都有 一個(gè)劉海 還有小嘴巴，這給我們開(kāi)發(fā)帶來(lái)了適配挑戰(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"/>

通過(guò) wx.getAccountInfoSync().envVersion 獲取微信的包環(huán)境

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

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

envVersion 三個(gè)變量值

• develop: 開(kāi)發(fā)版
• trial: 體驗(yàn)版
• release: 正式版

通過(guò) wx.onAppRoute 實(shí)現(xiàn)自動(dòng)化埋點(diǎn)上報(bào)

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

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

• openType 當(dāng)前路由的跳轉(zhuǎn)形式
• page 當(dāng)前路由的的 頁(yè)面配置信息
• window (小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色配置) 信息
• usingComponents 用到的組件
• path 當(dāng)前路由地址
• query 當(dāng)前路由攜帶的參數(shù)
• webviewId 當(dāng)前視圖的id

wx.onAppRoute 實(shí)例

自動(dòng)化埋點(diǎn)偽代碼：

//維護(hù)一個(gè)路由棧
const routStack = []

wx.onAppRoute( res =>{
   //每次路由變化的時(shí)候，如果 打開(kāi)類型 openType 是 navigateTo 類型的，就入棧
  if(res.openType === 'navigateTo' ){
      //頁(yè)面進(jìn)入上報(bào)
       reportEntePage(res.path)
      routStack.push({
         path:res.path,
         enterTime: new Date().getTime()
     })
 }
  if(res.openType === '"navigateBack"' ){
   
     const popRoute = routStack.pop()
     // 上報(bào) 頁(yè)面停留時(shí)間
    const leaveTime = new Date().getTime()
     reportStayPage({
          ...popRoute,
         leaveTime, //頁(yè)面離開(kāi)時(shí)間
         stayTime: leaveTime - popRoute.enterTime     //計(jì)算頁(yè)面停留時(shí)間
      })

  }
  
})

如何獲取 小程序的 navigationBarTitleText

我們可以通過(guò) wx.setNavigationBarTitle 去動(dòng)態(tài)的設(shè)置 小程序 的導(dǎo)航標(biāo)題，但是如何獲取呢？官方也沒(méi)有提供類似的api , 我猜想 微信可能既然你可以動(dòng)態(tài)的設(shè)置title，你肯定知道這個(gè)title的名稱，所以沒(méi)提供獲取 導(dǎo)航名稱的方法 那如何實(shí)現(xiàn)獲取標(biāo)題的方法呢？ 那就是微信的 __wxConfig 這個(gè)對(duì)象，有興趣的同學(xué)，可以在開(kāi)發(fā)工具控制臺(tái) 打印下看看這個(gè) 微信私有配置

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

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

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

__wxConfig實(shí)例

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

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

如下：

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

  },
 


}));

通過(guò)wxs 數(shù)據(jù)格式化

有時(shí)候我們需要去 格式化數(shù)據(jù)，去滿足 UI 相關(guān)的展示，但是如果是列表，又不想通過(guò)循環(huán)遍歷的方式去改變每條數(shù)據(jù) 怎么辦呢？ 這時(shí)候wxs就派上用場(chǎng)了
開(kāi)發(fā)中我們常見(jiàn)的案例，格式化 訂單號(hào)，每隔4位一個(gè)空格 如12345678 -> 1234 5678 這種，可以借助wxs去實(shí)現(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>

總結(jié)：

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