微信小程序 2019 入坑手冊

時間 2019-11-17

標籤微信程序手冊简体版

原文原文鏈接

微信小程序差很少已經推出了兩年半的時間，對於尚未入坑或剛準備動手的開發同窗，本文檔將嘗試在幾分鐘內讓你快速的瞭解其基本開發生態，雖嫌走馬觀花零零碎碎，但應該可對接下來的開發作出合理的抉擇。javascript

秉持乾溼分離的原則，本文將組織成如下結構：php

I.    優勢  
  II.   資源和生態  
  III.  小程序和雲開發點滴  
  IV.   小程序和開發者工具的基本原理
  V.   《組隊點餐寶》雲開發 DEMO 小程序  
  VI.    擴展閱讀和參考資料
複製代碼

大部份內容很是初級，大佬請輕拍或繞行，另外...html

🚨 多圖預警，酌情觀看

I. 優勢

輕量，目前最大 4M，沒有手動安裝過程，點開即用
使用體驗：HTML5 < 微信小程序 < RN/Weex < 原生
開發難度：微信小程序 < HTML5 < RN/Weex < 原生
開發體驗接近 Vue 和 React，兼容問題少，人力成本和開發時間優點明顯
推廣和上線相比原生應用更簡單
和微信服務號、模板消息等互相打通
易用且安全的微信數據開放
附近小程序等功能，不用開發就能得到實體店商業推廣
雲開發將開發門檻降至最低，一個前端人員就能快速完成整個開發過程

II. 資源和生態

微信公衆平臺 mp.weixin.qq.com前端

2.1 - 文檔

小程序開發文檔 developers.weixin.qq.com/miniprogram…vue

2.2 - 官方社區

2.3 - 開發者工具

在原有的公衆號網頁調試工具的基礎上，集成了公衆號網頁調試和小程序調試兩種開發模式java

使用公衆號網頁調試，開發者能夠調試微信網頁受權和微信JS-SDK 詳情
使用小程序調試，開發者能夠完成小程序的 API 和頁面的開發調試、代碼查看和編輯、小程序預覽和發佈等功能

相關概念：公衆號網頁

許多複雜的業務場景，須要經過網頁形式來提供服務，這時須要用到：node

經過網頁受權獲取用戶的 OpenID 和基本信息等
開發者在網頁上經過微信 JS-SDK 工具包，在網頁上實現錄製和播放微信語音、監聽微信分享、上傳手機本地圖片、拍照等許多能力

相關概念：微信小遊戲

一種特殊類型的小程序，沒有小程序 WXML 等，更接近傳統 H5 遊戲
主要編程對象是 Canvas 畫布，全部東西都是經過繪製到可見畫布來展現的
Cocos、Egret、Laya 等遊戲引擎都適配了小遊戲開發

擴展雜談：Egret 白鷺引擎

developer.egret.com/cn/react

創始人原來是 Adobe 中國的 flash 佈道師，很大程度上覆制了原有的成功思路和生態
提供了完整的 2D/3D 開發引擎、完善的開發調試工具等產品

堪稱 ActionScript3 復刻版的 API 設計：webpack

2.4 - 市場上的同類小程序

2.5 - 第三方開發框架

微信小程序必須在官方的開發者工具圖形界面中開發、調試、上傳，這限制了預處理樣式、轉譯圖片等前端開發經常使用能力，也沒法使用 npm 引入第三方包或使用常見的開發框架git

一種最簡單的思路是開發一些用 npm scripts 執行 node.js 腳本，完成上述官方工具中不方便的工做，此時通常的目錄結構是在「官方規範代碼」外面包裹一層，如：

├ mock/
├ assets/
├ dist/ # 這裏存放開發者工具中的標準代碼
│  ├ ...
│  └ pages/index/
│    ├ index.js
│    ├ index.json
│    ├ index.wxml
│    └ index.wxss # 由外部 less/sass 實時生成，不手動編輯
├                 # 也包含了轉換後的外部路徑或編碼後的圖片
├ styles/
├ nodemon.json
├ package.json
└ dev.js # 一些 watch、轉譯等工做
複製代碼

這種方式雖然「簡陋」，但因爲基本上仍是用的原生開發，因此不用擔憂官方升級後（仍是至關頻繁的）不匹配等問題。

不過畢竟 bigger 略低，能力提高頗有限，更多平時前端項目中積累的代碼也沒法直接複用；

藉助 AST 轉譯的能力，市面上更多成熟的解決方案提供了更好的選擇：

Taro

一套遵循 React 語法規範的多端統一開發框架

京東「凹凸實驗室」出品，長期保持更新維護
一鍵生成微信小程序、H五、ReactNative、百度小程序、字節跳動小程序、支付寶小程序
採用 React 語法標準，支持 JSX 書寫，讓代碼更具表現性
支持 TypeScript
支持使用 npm/yarn 安裝管理第三方依賴
支持使用 ES7/ES8 甚至更新的 ES 規範，可自行配置
支持使用 CSS 預編譯器，例如 Sass 等
支持使用 Redux/MobX 進行狀態管理
小程序 API 優化，異步 API Promise 化等等
配套的開發工具 Taro CLI 讓開發流程自動化

WePy

騰訊開發的「讓小程序支持組件化開發的框架」

開發風格接近於 Vue.js，支持 Props、自定義事件、Mixin、computed、slot 等
支持使用第三方 npm 資源
經過 polyfill 讓小程序完美支持 Promise
可以使用 Generator Fu-nction / Class / Async Function 等特性
支持 Less/Sass/Styus，wx-ml/Pug，Babel/Typescript
支持多種插件處理，如文件壓縮，圖片壓縮，內容替換等，擴展簡單

mpVue

美團出品的「一個使用 Vue.js 開發小程序的前端框架」

完全的組件化開發能力：提升代碼複用性
完整的 Vue.js 開發體驗
方便的 Vuex 數據管理方案：方便構建複雜應用
快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令行工具 vue-cli 快速初始化項目
H5 代碼轉換編譯成小程序目標代碼的能力

2.6 - 適用於小程序的組件庫等

`WeUI`

github.com/Tencent/weu…

視覺規範

github.com/weui/weui-d…

幾種具體技術的實現版本

應用在小程序中

github.com/Tencent/weu…

`wxParse`

微信小程序富文本解析組件，支持 HTML 及 Markdown 轉 WXML 可視化

github.com/icindy/wxPa…

小程序發佈之初並不支持直接內嵌 h5 頁面，這讓不少躍躍欲試直接用既有公衆號頁面拓展入口的商家和開發者怨聲載道。

不到一年後，開始支持 <web-view> 組件，但也特別聲明瞭我的類型與海外類型的小程序暫不支持使用。

這使得一些嵌入網頁和構建富文本的工做變得困難，也讓 wxParse 組件至今仍然富有意義。

`miniprogram-simulate`

新出現的小程序自定義組件測試工具集

因爲小程序有獨特的運行環境，因此對於小程序自定義組件的單元測試一直沒有比較優雅的解決方案；

此工具集就是爲了解決這一痛點，將本來小程序自定義組件雙線程分離運行的機制調整成單線程模擬運行，利用 dom 環境進行渲染，藉此來完成整個自定義組件樹的搭建。

運行此工具集須要依賴 js 運行環境和 dom 環境，所以能夠採用 jsdom + nodejs（如 jest），也能夠採用真實瀏覽器環境（如 karma）

const path = require('path')
const expect = require('chai').expect

describe('component', () => {
    it ('should run successfully', () => {
        // 直接使用全局的 simulate
        const id = simulate.load(path.resolve(__dirname, '../src/component/index'))
        const comp = simulate.render(id, {prop: 'index.test.properties'})

        comp.attach(document.body) // 掛載在 body 下面

        expect(
          simulate.match(
            comp.dom, 
            '<wx-view class="main--index">index.test.properties</wx-view>'
          )
        ).to.equal(true)
    })
})
複製代碼

III. 小程序和雲開發點滴

登陸態和幾種術語

`AppID`

每一個小程序對應一個，在開發階段開始前從開放平臺申請

註冊成功以後，點擊「開發」—「開發設置」能夠看到 AppID
須要在開發者工具中填入 AppID，才能開始編輯項目
當場景爲由從另外一個小程序或公衆號打開時，能在小程序的 wx.onShow 回調中得到來源的 AppID
用 iOS 或 Android 的 OpenSDK 開發原生 APP，並涉及到打開小程序時，須要配置 AppID
AppId 是公開信息，泄露 AppId 不會帶來安全風險

`AppSecret`

AppSecret 是開發者的隱私數據不該該泄露

`code`

由小程序端調用 wx.login()，從微信服務器獲取的一個帶有時效性的憑證

有效期爲 5 分鐘
由開發者服務器發送 code 等到微信服務器，換取 openid、session_key、unionid 等

`openid`

也就是用戶 id，能夠用這個 id 來區分不一樣的微信用戶

`unionid`

用戶在微信開放平臺的惟一標識符

同一個微信開放平臺賬號下的移動應用、網站應用和公衆賬號（包括小程序），用戶的unionid是惟一的
在知足不一樣條件的前提下，能夠經過 wx.login() 或 wx.getUserInfo() 得到

`session_key`

微信服務器給開發者服務器頒發的身份憑證，開發者能夠用 session_key 請求微信服務器其餘接口來獲取一些其餘信息

若是每次都經過小程序前端 wx.login() 生成 code 去微信服務器請求信息，總體耗時嚴重
對於一個比較可信的服務端，session_key 至關於給開發者端頒發一個時效性更長的會話密鑰
session_key 也存在過時時間

`SessionID`

開發者服務器和開發者的小程序之間的會話密鑰，通常稱爲 SessionID

用戶登陸成功以後，由開發者服務器須要生成，並保存對應的用戶身份信息
把 SessionId 返回給小程序，在後續發起的請求中攜帶上 SessionId
這樣就不須要每次都從新獲取 code，省去了不少通訊消耗

`OpenSDK`

開發者的第三方 APP 須要喚起小程序等操做時，須要集成對應版本的開發工具包

`JS-SDK`

微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包

`wx-server-sdk`

雲開發時，在「雲函數」中引用的 npm 包，wx-server-sdk 與小程序端的雲 API 以一樣的風格提供了數據庫、存儲和雲函數的 API

雲開發簡述

開發者可使用雲開發開發微信小程序、小遊戲，無需搭建服務器，便可使用雲端能力

雲開發弱化了後端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，便可實現快速上線和迭代。

目前提供三大基礎能力支持：

雲函數：在雲端運行的代碼，微信私有協議自然鑑權，開發者只需編寫自身業務邏輯代碼
數據庫：一個既可在小程序前端操做，也能在雲函數中讀寫的 JSON 數據庫
存儲：在小程序前端直接上傳/下載雲端文件，在雲開發控制檯可視化管理

在雲開發中簡化登陸態的獲取

不一樣於以前章節中獲取登陸態的複雜，雲開發時極度的簡化了這一過程。

好比有一個雲函數 test ：

// cloudfunction/test/index.js

const cloud = require('wx-server-sdk')
exports.main = (event, context) => {
  // 這裏獲取到的 openId、 appId 和 unionId 是可信的
  const {OPENID, APPID, UNIONID} = cloud.getWXContext()
  return {
    OPENID,
    APPID,
    UNIONID,
  }
}
複製代碼

上傳並部署該雲函數後，可在小程序中測試調用：

wx.cloud.callFunction({
  name: 'test',
  complete: res => {
    console.log('callFunction test result: ', res)
  }
})

複製代碼

會在調試器看到輸出的 res 爲以下結構的對象：

{
  "APPID": "xxx",
  "OPENID": "yyy",
  "UNIONID": "zzz" // 僅在知足 unionId 獲取條件時返回
}
複製代碼

部分資源配額

分類	配額種類	額度
存儲	容量	5 GB
雲函數	調用次數	20 萬次 / 月
數據庫	容量	2 GB

IV. 小程序和開發者工具的基本原理

小程序實現原理

運行環境	邏輯層	渲染層
iOS	JavaScriptCore	WKWebView
安卓	X5 JSCore	X5瀏覽器
小程序開發者工具	NWJS	Chrome WebView

不太同樣的 JS 方言

小程序中的 JavaScript 同瀏覽器或 NodeJS 中的 JavaScript 都是不相同的：

小程序缺乏相關的 DOM API 和 BOM API，這致使了 jQuery 等沒法運行
JSCore 的環境同 NodeJS 環境也是不盡相同，因此一些 NPM 的包也沒法運行

JSCore

JSCore 是 WebKit 默認內嵌的單線程 JS 引擎，進行詞法分析、語法分析以及解釋執行等工做

詞法分析階段，將源代碼分解成 Token 序列
對 Token 序列進行語法分析，並生成對應的一棵抽象語法樹(AST)
ByteCode Generator 根據 AST 生成 JSCore 的字節碼，完成語法分析
用 LLInt 和 JIT 解釋執行字節碼

雙線程模式

在傳統網頁開發中， JS 引擎與 GUI 渲染引擎兩個線程是互斥的，因此 JS 執行腳本時間過長會引發頁面渲染加載阻塞致使其渲染的不連貫
在小程序中，邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，渲染層用 webview 實現

渲染層和邏輯層的通訊會經由 Native 中轉
邏輯層發送網絡請求也經由 Native 轉發

在渲染層，宿主環境會把 WXML 轉化成對應的表示樹狀結構的 JS 對象
在邏輯層發生數據變動的時候，經過宿主環境提供的 setData 方法把數據從邏輯層傳遞到渲染層，造成新的結構 JS 數據對象
再通過對比新舊結構 JS 對象的先後差別，把差別應用在原來的 Dom 樹上

一類事件是「用戶在渲染層的行爲反饋」，好比點擊
另外一類事件是「組件的部分狀態反饋」，好比播放進度變化
以上兩類渲染層事件抽象後，通過 Native 轉發給邏輯層

開發者工具實現原理

基於 NW.js，一種 Chromium + Node.js 實現的跨平臺桌面打包技術
用系統 API 來實現底層模塊，使用 React、Redux 等前端技術框架來搭建用戶交互層
引用了 monaco-editor 等插件實現編輯器功能
用 webview 實現預覽窗口部分
用 webview + chrome 原生調試工具實現調試器

結合官網的介紹，並基於開源的 github.com/cytle/wecha… 項目，一窺相關實現：

預覽窗口

預覽窗口視圖

在微信開發者工具上 WebView 是一個 chrome 中的 <webview /> 標籤。與<iframe />標籤不一樣的是，<webview/>標籤是採用獨立的線程運行的。

移動端的 JsCore 是一個單純的腳本解析器，爲此開發者工具作了一個很巧妙的工做，將瀏覽器的 BOM 對象局部變量化，從而使得在開發階段就能發現問題。
用於模擬小程序邏輯層的<webview/> 加載的連接是

http://127.0.0.1:9973/appservice/appservice
複製代碼

預覽窗口邏輯

編輯窗口

編輯器視圖

編輯器邏輯

編輯器邏輯

編輯器邏輯

調試窗口

調試器邏輯

nw.js 對 <webview/>提供打開 Chrome Devtools 調試界面的接口，使得開發者工具具有對小程序的邏輯層和渲染層進行調試的能力
同時爲了方便調試小程序，開發者工具在 Chrome Devtools 的基礎上進行擴展和定製
經過在 devtoolsWebView 中注入腳本的方式將 Chrome Devtools 的 Element 面板隱藏，同時提供了 Chrome Devtools 插件 WXML 面板