開發(fā)整體體驗

首先我們回憶下最開始公測時官方開發(fā)工具是個什么樣子：

• 每次編輯完需要點擊編譯，偶爾還需要再刷新，因為刷新完總回到首頁，所以調(diào)試特定頁面需要每次重新導(dǎo)航
• 編譯出錯或者運行出錯看不到提示，開發(fā)者只能對著白屏進行各種嘗試性修復(fù)
• 經(jīng)常性崩潰，高 CPU 高內(nèi)存占用問題頻發(fā)

前兩個問題開發(fā)工具已經(jīng)很好解決了，最后的問題在正式版發(fā)布后我也沒再碰到過了，可以說已經(jīng)比較穩(wěn)定了。

一些開發(fā)建議

• 使用 es6 , 讓你的代碼更少更可靠，有一點要注意的是 object spread 并不屬于 es6 規(guī)范

// 以下的用法是不行的
this.setData{obj, ...data}

// 參數(shù) spread 是可以的
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}

• 使用 polyfill， 微信盡管最大程序統(tǒng)一了 webview， 但是部分舊的 webview 依然是缺少部分常用方法的，例如：Array.find, Array.findIndex. 給出一份我使用的 polyfill.jshttps://gist.github.com/chemzqm/3653bdc576d7110acee4b9413d254ef6, 代碼多數(shù)來自 MDN，僅供參考
• 使用 Promise，讓你的異步并發(fā)和串行代碼更容易編寫和維護。因為微信舊版是沒有原生 Promise 的，所以官方屏蔽了 Promise，你需要自己做一個 Promise 實現(xiàn)，網(wǎng)上有兼容標(biāo)注 Promise 規(guī)范的實現(xiàn)，只需去掉相關(guān) window 的判定即可：https://gist.github.com/chemzqm/8e50e23c35cc14992831027a40b8d871
• 分離 UI 代碼和請求邏輯，這樣你的請求可以在不同頁面重用，將來維護相對容易些。我們有一個 service.js 文件，里面包含了所有請求后臺的函數(shù)，返回均為 Promise， 這樣方便做統(tǒng)一的控制管理
• 合理使用 wxml 中的 import 和 include，import 對應(yīng)需要填充數(shù)據(jù)的模板，而 include 則用于引入靜態(tài)的內(nèi)容
• 避免把一個頁面設(shè)計的太復(fù)雜，否則一個頁面對象上過多的 data 數(shù)據(jù)和方法會變得很難管理
• 避免使用你不熟悉的第三方框架，例如使用 redux 來管理數(shù)據(jù)狀態(tài)，因為小程序本身就有通過 data 屬性實現(xiàn)了統(tǒng)一的數(shù)據(jù)管理，另外還提供了 devtools 工具方便調(diào)試，引入 redux 卻不能在開發(fā)工具使用 redux 插件，結(jié)果可能只是增加了數(shù)據(jù)管理的難度
• 使用官方 UI 簡化設(shè)計開發(fā)流程，weui/weui-wxss: A UI library by WeChat official design team, includes the most useful widgets/modules. 如果你的項目對 UI 定制要求不是很高的話
• 微信官方的 animation API 只是封裝相關(guān) css 屬性的生成，其實質(zhì)還是使用 css 的 transtion 樣式，你也可以自己寫相關(guān)樣式后添加到元素 style 屬性或者使用 animation 實現(xiàn)動畫。出于性能考慮，不建議使用 tween 之類的庫動態(tài)生成樣式傳遞給 setData 函數(shù)
• 使用 svg data-uri 來做 icon， 小程序的 background 里只能使用完整的 image 路徑，對于針對項目的 icon 來說，使用 svg 會更為方便一些，而且svg 是矢量圖，具備完美的可伸縮性，使用 utf8 格式將來也可以很容易進行調(diào)整（主要是顏色），參考 Probably Don't Base64 SVG | CSS-Tricks 。Material icons - Material Design 提供了大量常用 icon 的多種格式，推薦使用。
• 盡可能利用 flex 進行布局，因為 flex 適應(yīng)性最好，而且非常靈活，
• 合理使用 rpx 單位，rpx 是一個相當(dāng)于屏幕寬度百分比的相對單位，我們在實現(xiàn)上對于部分padding 和 margin 樣式使用了 rpx 來使得大屏上的布局獲得更佳的展示效果，對于 font-size，border-width 等樣式，不建議使用 rpx
• 不考慮性能問題可以使用 css 反鋸齒，讓字體渲染更精細一些，只需要 app.wxss 中加入：

  page {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  

• 使用有質(zhì)量的開發(fā)輔助工具，例如：
  • chemzqm/wept: 微信小程序 web 端實時運行工具
  • chemzqm/wxapp.vim: 提供微信小程序開發(fā)全方位支持的 vim 插件
  • chemzqm/mockapi: Create a mock api service in minutes （有待完善）

遇到的一些問題及解決辦法

• html 無法使用，使用正則去掉 html 標(biāo)簽就是了，我們使用的代碼如下：

  export function formatHTML(html) {
    html = html.replace(/<style([\s\S]*?)<\/style>/gi, '');
    html = html.replace(/<script([\s\S]*?)<\/script>/gi, '');
    html = html.replace(/<\/div>/ig, '\n');
    html = html.replace(/<\/li>/ig, '\n');
    html = html.replace(/<li>/ig, '  *  ');
    html = html.replace(/<\/ul>/ig, '\n');
    html = html.replace(/<\/p>/ig, '\n');
    html = html.replace(/<br\s*[\/]?>/gi, "\n");
    html = html.replace(/<[^>]+>/ig, '');
    html = html.replace(/\n{2,}/g, '\n\n')
    html = html.replace(/\n+$/g, '')
    html = html.replace(/&nbsp;/g, ' ')
    return html
  }
  

  性能不是很高，但是現(xiàn)代瀏覽器性能還是不錯的，完全感受不到。
• 頁面深度限制，小程序出于性能角度考慮做了 5 層跳轉(zhuǎn)層次的限制，解決辦法就是盡可能避免深層次的交互
  • 合并多個頁面，例如將搜索頁面和搜索結(jié)果頁面放到同一個頁面上
  • 使用彈層而不是跳轉(zhuǎn)，例如我們支付頁面的添加收貨地址使用了彈出層，而不是跳轉(zhuǎn)添加頁面
  • 使用 switchTab API，該接口會清理之前的頁面棧
  • 使用 redirectTo 接口重定向而不是使用 navigateTo
• 原生組件總是顯示在最上層，小程序中 canvas、textarea、video 等組件使用原生渲染，如果需要彈層交互的話它們會擋住彈層。解決辦法就是在彈層后將這些組件 hidden 屬性設(shè)置為 true，彈出消失時重置為 false 即可。另一個問題是如果這些組件在彈層內(nèi)，它們不會限制在彈層中，而是會隨著頁面整體進行滾動。
• 并發(fā)請求限制，小程序限制了最多 5 個并發(fā)的 request 請求。我們遇到的一個情況是需要圖片自適應(yīng)高度，而小程序不支持圖片高度自適應(yīng)，需要顯示用 wx.getImageInfo 接口獲取圖片尺寸信息，如果圖片多于 5 個且同時請求就會觸發(fā)這個限制。解決辦法是使用一個 promise 隊列函數(shù)，實現(xiàn)如下：

• export function queue (fns, count) {
    return new Promise(function(resolve, reject) {
      let a = fns.slice(0, count)
      let b = fns.slice(count)
      let l = fns.length
      let runs = 0
      if (fns.length == 0 ) return resolve()
      for (let fn of a) {
        fn().then(() => {
          runs += 1
          if (runs == l) return resolve()
          let next = function () {
            let fn = b.shift()
            if (!fn) return
            return fn().then(() => {
              runs += 1
              if (runs == l) return resolve()
              return next()
            }, reject)
          }
          return next()
        }, reject)
      }
    })
  }
  

  第一個參數(shù)為返回 promise 的函數(shù)列表，第二個參數(shù)為并發(fā)個數(shù)，函數(shù)返回 Promise 對象。

• 小程序 url 生成限制。如果你想設(shè)置多個參數(shù)到二維碼的 url 上，以下的調(diào)用是不行的：

•    response = RestClient.post("https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=#{token}", {
        path: "pages/affiliate/index?id=#{id}&#{code}",
        width: 430
      }.to_json)
  

  掃碼后的 url 中 & 符號會變?yōu)?％2C\u0026 (感覺是微信的 bug)，解決辦法是使用其它自定義分割符號，例如下劃線 _, 然后在小程序代碼里對其進行單獨解析。

最后，開發(fā)本身對于小程序而言只能算是剛開始的一小步，由于微信的流量控制，后續(xù)的鋪碼之路任重道遠。

以上，不希望對您有所幫助，因為小程序的開發(fā)實在不是一件可以讓人愉悅的事：）