摘要：全量發(fā)布即時向全量微信用戶發(fā)布新版小程序?？偨Y在開發(fā)這個小程序時，微信小程序只支持頁面級開發(fā)，如今小程序已支持組件開發(fā)和插件開發(fā)。

人的一生90%的時間都在做著無聊的事情，社會的發(fā)展使得我們的閑暇時間越來越多，我們把除了工作的其他時間放在各種娛樂活動上。

程序員有點特殊，他們把敲代碼看成娛樂活動的一部分，以此打發(fā)時間的不占少數(shù)。這不最近無聊搞了一個口袋吉他小程序，使用bmob后端云提供數(shù)據(jù)存儲服務，除吉他譜圖片，其他圖片存儲在七牛。

關于bmob小程序開發(fā)文檔請戳這里，文檔詳細簡練，主要是縮短了開發(fā)周期，不過對于復雜的項目，還是推薦使用自己服務器提供數(shù)據(jù)服務。

源碼地址：https://github.com/alex1504/wx-guita_tab

下面分點分享下小程序的開發(fā)過程中的關鍵點及感受，說明：

小程序標簽統(tǒng)稱組件，Html標簽統(tǒng)稱元素。

部分內容會與vuejs及jQuery作對比

新建項目并添加圖標

在app.wxss中以unicode方式引入

@font-face {
  font-family: "iconfont";  /* project id 431644 */
  src: url("http://at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot");
  src: url("http://at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.eot?#iefix") format("embedded-opentype"),
  url("http://at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.woff") format("woff"),
  url("http://at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.ttf") format("truetype"),
  url("http://at.alicdn.com/t/font_431644_aahynh26y6lp7gb9.svg#iconfont") format("svg");
}

定義通用icon樣式，定義偽元素

.icon{
  display: inline-block;
  font-family: "iconfont";
}
.icon-home::before{
  content: "e600";
}

使用

小程序并沒有類似vuejs的v-model進行雙向綁定，使用bindinput類似jQuery監(jiān)聽input事件在事件處理器中更新數(shù)據(jù)，通過event對象e.data.value即可獲得input的值。

// bindconfirm監(jiān)聽鍵盤回車事件，focus屬性聚焦渲染組件時會自動彈出手機軟鍵盤

bindSearchInput(e) {
  this.setData({
    searchTxt: e.detail.value
  })
}

小程序中的事件處理器并不能像vue一樣傳入?yún)?shù)，因為事件處理器只有一個默認的參數(shù)event對象，在for循環(huán)的組件中如果要想獲取元素綁定的id，可以通過和jQuery相同的方式綁定data屬性。

獲取id：

//事件處理函數(shù)
navigateToDetail: function (e) {
  const id = e.currentTarget.dataset.id;
}

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle

對應阻止冒泡事件將bind用catch替代

小程序的視圖更新需要調用setData修改綁定數(shù)據(jù)，直接對數(shù)據(jù)進行修改是不會觸發(fā)視圖層更新的。setData接受一個對象，為需要添加或修改的屬性。屬性名有點特殊，[]中的值會被識別為變量，因此如果要對對象數(shù)組中的某個屬性進行修改，只能預先拼接好屬性名。
錯誤做法：

// 視圖不更新
this.data.searchSongs[index].love_flag": 2
// SyntaxError: unknown: Unexpected token
this.setData({
  "searchSongs[" + index + "].love_flag": 2
})

正確做法：

setSongFlag(e) {
// 注意setData屬性名[]中的非整數(shù)值會被識別為變量
let key = "searchSongs[" + index + "].love_flag"
this.setData({
  [key]: 2
})

小程序wxss的background-image及image組件都不支持本地url
在H5的開發(fā)中，通常我們會將頁面一些不需要根據(jù)容器大小來選擇顯示方式的圖片使用img標簽，需要一些特殊顯示方式的使用background。但小程序只需要image組件便可。它提供的mode屬性和背景定義圖片及img元素控制圖片顯示方式對比

| mode屬性 | background-size| html img元素|
| -------- | -----: | -----: |
| scaleToFill | 100%,100%(默認) | width:100%;height:100% |
| aspectFit | contain | js實現(xiàn) |
| aspectFill | cover | js實現(xiàn) |
| widthFix | 100%, auto | width: 100%;|
其他的top、bottom、right、left等不縮放圖片調整位置的屬性與background-position作用相同，img元素則只能通過定位控制。

如果沒有強迫癥，小程序API使用默認回調的方式即可；另外由于小程序只支持es6，不支持async及await，也可以將API封裝成promise的方式。

function promisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)//執(zhí)行函數(shù)，obj為傳入函數(shù)的參數(shù)
    })
  }
}
module.exports = {
    promisify: promisify
}

使用：

const promisify = require("./promisify.js")
const request = promisify(wx.request);

request({
    url: "some URL"
    method: "GET",
}).then(res => {   
    console.log(res)                 
}

調試器沒有css快捷提示功能和顏色面板，影響布局及顏色調整效率（隨性派）

無法引入第三方js庫

內置組件單調，沒有考慮字體數(shù)量比較多時的自適應情況

不支持跳轉外部鏈接

背景圖片或者image組件不能用本地圖片

小程序上線需要經(jīng)過審核、發(fā)布兩個過程。
審核通過后有全量更新、或者分階段發(fā)布，小程序才會更新，首次發(fā)布沒有選項。

全量發(fā)布：即時向全量微信用戶發(fā)布新版小程序。
分階段發(fā)布：新版小程序將在15天內以開發(fā)者自定義比例，向微信用戶發(fā)布更新
詳情見知乎：發(fā)布小程序時選擇全量發(fā)布和分階段發(fā)布是什么意思？

不得不說小程序審核速度是非常快的，即便是個人申請（相比以企業(yè)賬號申請會有應用服務類型限制），通常小程序沒有涉及政策不允許的內容或者超過小程序允許的應用服務類型，都是可以順利通過，初次體驗，即便在國慶期間，也是有工作團隊進行審核，審核時間通常在幾小時內。

在開發(fā)這個小程序時，微信小程序只支持頁面級開發(fā)，如今小程序已支持組件開發(fā)和插件開發(fā)。組件的結構和頁面并無區(qū)別，自定義組件可以引入其他的組件，具體的開發(fā)步驟可以參考這邊文章【微信小程序】自定義組件

小程序的興起使得前端開發(fā)又多了一個工作任務，但這也使得前端程序員的成就感越來越強，當然沒有經(jīng)歷過瀏覽器刀耕火種年代的工程師難以體會這種辛酸，但也沒必要，只要跟上時代的潮流和注重自身的基礎建設便已足夠了，前端路途艱辛，我在路上與你共勉。