開發整體體驗

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

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

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

一些開發建議

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

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

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

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

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

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

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

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

  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
  }
  

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

• 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)
      }
    })
  }
  

  第一個參數為返回 promise 的函數列表，第二個參數為并發個數，函數返回 Promise 對象。

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

•    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 中 & 符號會變為 ％2C\u0026 (感覺是微信的 bug)，解決辦法是使用其它自定義分割符號，例如下劃線 _, 然后在小程序代碼里對其進行單獨解析。

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

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