微信小程序開發中前后端的交互
微信小程序的開發有點類似與普通網頁的開發，但是也不盡然相同。小程序的主要開發語言是JavaScript，開發同普通的網頁開發有很大的相似性，對於前端開發者而言，從網頁開發遷移到小程序的開發成本並不高，但是二者還是有些許區別的。
網頁開發渲染線程和腳本線程是互斥的，這也是為什么長時間的腳本運行可能會導致頁面失去響應，而在小程序中，二者是分開的，分別運行在不同的線程中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，並沒有一個完整瀏覽器對象，因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運行的。
網頁開發者在開發網頁的時候，只需要使用到瀏覽器，並且搭配上一些輔助工具或者編輯器即可。小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。
前端
-
注冊微信小程序賬號
進入：微信公眾平台, 選擇小程序的賬號類型按照流程進行注冊。注意每個郵箱只能注冊一個賬號。 -
下載開發工具
有了賬號后，我們就可以使用這個賬號進行開發了，開發用的IDE是騰訊出品的微信開發者工具，進入：小程序開發工具，下載對應的版本安裝即可。 -
開始進入小程序前端開發
打開剛下載好的微信開發者工具，掃碼登錄、創建小程序項目。登錄微信公眾號平台，在開發->開發設置->開發者ID中找到你小程序的AppID並填入到項目設置里。
接着開始真正具體頁面的開發了，開發過程參考開發文檔：微信小程序接入指南
-
前端開發過程
小程序前端開發其實就是在騰訊的開發工具里，使用js語言，遵循騰訊小程序的開發文檔規范進行代碼編寫。開發過程中可以編譯、預覽、真機調試等，可以使用各種插件，可以調用一些公共的api或者自己定義的后端接口，也可以使用騰訊提供的雲函數。 -
打包上線
開發完成后就可以准備上線了，首先在開發者工具里將寫好的代碼上傳，點擊上傳，定義版本號和注釋，再到微信公眾平台的版本管理提交審核，待審核通過了就表示上線成功了，就可以在微信中搜索到你的小程序進行訪問了。
后端
開發者可以使用雲開發開發微信小程序、小游戲，無需搭建服務器，即可使用雲端能力。
雲開發為開發者提供完整的原生雲端支持和微信服務支持，弱化后端和運維概念，無需搭建服務器，使用平台提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的雲服務相互兼容，並不互斥。
新建雲開發模板：
1. 新建雲開發模板
新建項目選擇一個空目錄，填入 AppID（使用雲開發能力必須填寫 AppID），勾選創建 “雲開發 QuickStart 項目”，點擊創建即可得到一個展示雲開發基礎能力的示例小程序。需要注意如下幾點：
- 不可以使用 測試號
project.config.json中增加了字段cloudfunctionRoot用於指定存放雲函數的目錄cloudfunctionRoot指定的目錄有特殊的圖標- 雲開發能力從基礎庫 2.2.3 開始支持（覆蓋率 97.3%，查看兼容性問題）
從基礎庫 2.4.1 開始，在小程序插件中可以使用雲開發，插件中使用雲開發時，使用的是插件方的雲資源而非宿主的雲資源，在使用方式上與在小程序中使用無異。
2. 開通雲開發、創建環境
創建了第一個雲開發小程序后，在使用雲開發能力之前需要先開通雲開發。在開發者工具工具欄左側，點擊 “雲開發” 按鈕即可打開雲控制台、根據提示開通雲開發、創建雲環境。默認配額下可以創建兩個環境，各個環境相互隔離，每個環境都包含獨立的數據庫實例、存儲空間、雲函數配置等資源。每個環境都有唯一的環境 ID 標識，初始創建的環境自動成為默認環境。
3. 體驗小程序
開通創建環境后，即可以開始在模擬器上操作小程序體驗雲開發提供的部分基礎能力演示。
4. 查看控制台
雲開發控制台是管理雲開發資源的地方，控制台提供以下能力：
-
運營分析：查看雲開發監控、配額使用量、用戶訪問情況
-
數據庫：管理數據庫，可查看、增加、更新、查找、刪除數據、管理索引、管理數據庫訪問權限等
-
存儲管理：查看和管理存儲空間
-
雲函數：查看雲函數列表、配置、日志
雲開發提供了以下三大功能：
雲數據庫：
雲開發提供了一個 JSON 數據庫，顧名思義，數據庫中的每條記錄都是一個 JSON 格式的對象。一個數據庫可以有多個集合（相當於關系型數據中的表），集合可看做一個 JSON 數組，數組中的每個對象就是一條記錄，記錄的格式是 JSON 對象。
關系型數據庫和 JSON 數據庫的概念對應關系如下表：
| 關系型 | 文檔型 |
|---|---|
| 數據庫 database | 數據庫 database |
| 表 table | 集合 collection |
| 行 row | 記錄 record / doc |
| 列 column | 字段 field |
每條記錄都有一個 _id 字段用以唯一標志一條記錄、一個 _openid 字段用以標志記錄的創建者，即小程序的用戶。需要特別注意的是，在管理端（控制台和雲函數）中創建的不會有 _openid 字段，因為這是屬於管理員創建的記錄。開發者可以自定義 _id，但不可自定義和修改 _openid 。_openid 是在文檔創建時由系統根據小程序用戶默認創建的，開發者可使用其來標識和定位文檔。
數據庫 API 分為小程序端和服務端兩部分，小程序端 API 擁有嚴格的調用權限控制，開發者可在小程序內直接調用 API 進行非敏感數據的操作。對於有更高安全要求的數據，可在雲函數內通過服務端 API 進行操作。雲函數的環境是與客戶端完全隔離的，在雲函數上可以私密且安全的操作數據庫。
數據庫 API 包含增刪改查的能力，使用 API 操作數據庫只需三步：獲取數據庫引用、構造查詢/更新條件、發出請求。 我們主要通過雲函數來規定對雲開發數據庫中數據信息的操作，然后通過前端調用雲函數實現對數據庫的增刪查改。
存儲：
雲開發提供了一塊存儲空間，提供了上傳文件到雲端、帶權限管理的雲端下載能力，開發者可以在小程序端和雲函數端通過 API 使用雲存儲功能。
在小程序端可以分別調用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上傳和下載雲文件操作。
下面的幾行代碼，即可實現在小程序內讓用戶選擇一張圖片，然后上傳到雲端管理的功能：
// 讓用戶選擇一張圖片
wx.chooseImage({
success: chooseResult => {
// 將圖片上傳至雲存儲空間
wx.cloud.uploadFile({
// 指定上傳到的雲路徑
cloudPath: 'my-photo.png',
// 指定要上傳的文件的小程序臨時文件路徑
filePath: chooseResult.tempFilePaths[0],
// 成功回調
success: res => {
console.log('上傳成功', res)
},
})
},
})
上傳完成后可在控制台中看到剛上傳的圖片。
雲函數：
雲函數是一段運行在雲端的代碼，無需管理服務器，在開發工具內編寫、一鍵上傳部署即可運行后端代碼。
小程序內提供了專門用於雲函數調用的 API。開發者可以在雲函數內使用 wx-server-sdk 提供的 getWXContext 方法獲取到每次調用的上下文（appid、openid 等），無需維護復雜的鑒權機制，即可獲取天然可信任的用戶登錄態（openid）。
這里是我們前端與雲開發交互的重要一環，通過前端對雲函數的調用，可以支持對后端雲開發中數據庫，存儲等功能的數據操作，同時也可以通過雲函數得到所需要的數據庫信息以及存儲中的表情實例。
比如我們如下定義一個雲函數，命名為 add ，功能是將傳入的兩個參數 a 和 b 相加：
// index.js 是入口文件，雲函數被調用時會執行該文件導出的 main 方法
// event 包含了調用端（小程序端）調用該函數時傳過來的參數，同時還包含了可以通過 getWXContext 方法獲取的用戶登錄態 `openId` 和小程序 `appId` 信息
const cloud = require('wx-server-sdk')
exports.main = (event, context) => {
let { userInfo, a, b} = event
let { OPENID, APPID } = cloud.getWXContext() // 這里獲取到的 openId 和 appId 是可信的
let sum = a + b
return {
OPENID,
APPID,
sum
}
}
在開發者工具中上傳部署雲函數后，我們在小程序中可以這么調用：
wx.cloud.callFunction({
// 需調用的雲函數名
name: 'add',
// 傳給雲函數的參數
data: {
a: 12,
b: 19,
},
// 成功回調
complete: console.log
})
// 當然 promise 方式也是支持的
wx.cloud.callFunction({
name: 'add',
data: {
a: 12,
b: 19
}
}).then(console.log)
由於我們需要在雲函數中操作數據庫、管理雲文件、調用其他雲函數等操作，需要使用官方提供的 npm 包 wx-server-sdk 進行操作。
雲調用：
雲調用是雲開發提供的基於雲函數使用小程序開放接口的能力，支持在雲函數調用服務端開放接口，如發送模板消息、獲取小程序碼等操作都可以在雲函數中完成，詳情可見開發指引。