在微信小程序中使用 · leancloud

[TOC] 微信小程序是一個全新的跨平臺移動應用平臺，LeanCloud 為小程序提供一站式后端云服務，為你免去服務器維護、證書配置等繁瑣的工作，大幅降低你的開發和運維成本。本文說明了如何在微信小程序中使用 LeanCloud 提供的各項服務。 ## [準備工作](#準備工作) ### [創建應用](#創建應用) * 如果你還沒有創建過 LeanCloud 應用，請登錄 LeanCloud 控制臺?[創建一個新應用](https://leancloud.cn/applist.html#/newapp)。 * 如果你還沒有小程序帳號，請訪問?[微信公眾平臺](https://mp.weixin.qq.com/)?注冊一個小程序帳號。如果你不需要進行真機調試可以跳過這一步。 * 下載?[小程序開發工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，按照?[小程序開發教程](https://mp.weixin.qq.com/debug/wxadoc/dev/)?創建一個項目。 ### [配置域名白名單](#配置域名白名單) 請按照?[小程序域名白名單配置](https://leancloud.cn/docs/weapp-domains.html)?的步驟配置。如果你不需要進行真機調試可以跳過這一步。 ## [存儲 SDK](#存儲_SDK) 要使用 LeanCloud 的數據存儲、用戶系統、調用云引擎等功能，需要使用 LeanCloud 存儲 SDK。 ### [Demo](#Demo) 為了更直觀地展示小程序中存儲 SDK 的用法，我們在小程序上實現了 LeanTodo 應用。在這個 Demo 中你可以看到： * 如何對云端數據進行查詢、增加、修改與刪除 * 查詢結果為一個列表時，如何將其綁定到視圖層進行展示以及如何在點擊事件中得到對應的數組項 * 如何自動登錄 LeanCloud 用戶系統 * 如何在登錄后設置帳號與密碼以供用戶在其他平臺的 LeanTodo 應用上登錄 * 如何實現下拉刷新目前小程序公測階段暫時無法直接在微信上體驗到 Demo，但你仍然可以獲取源碼通過微信開發者工具本地進行調試與真機預覽。 Demo 的源碼與運行說明請參考?[https://github.com/leancloud/leantodo-weapp](https://github.com/leancloud/leantodo-weapp)。 ### [安裝與初始化](#安裝與初始化) 1. 下載?[`av-weapp-min.js`](https://unpkg.com/leancloud-storage@%5E2.0.0-rc/dist/av-weapp-min.js)（[鏡像](https://raw.githubusercontent.com/leancloud/javascript-sdk/dist/dist/av-weapp-min.js)），移動到?`libs`?目錄。 2. 在?`app.js`?中使用?`const AV = require('./libs/av-weapp-min.js');`?獲得?`AV`?的引用。在其他文件中使用時請將路徑替換成對應的相對路徑。 3. 在?`app.js`?中初始化應用： ~~~ AV.init({ appId: 'csXFgnEzBkodigdDUARBrEse-gzGzoHsz', appKey: 'K2CE4ChmGnUwI8mMBgTRHw7y', }); ~~~ ### [對象存儲](#對象存儲) 所有的對象存儲 API 都能正常使用，詳細的用法請參考?[JavaScript 數據存儲開發指南](https://leancloud.cn/docs/leanstorage_guide-js.html)。 #### [數據綁定](#數據綁定) 直接使用?`this.setData()`?將?`AV.Object`?對象設置為當前頁面的 data，即可在 WXML 中使用 Mustache 語法訪問綁定的數據了。下面這個例子展示了如何將一個 Query 的查詢結果顯示在頁面上： ~~~ // pages/todos/todos.js Page({ data: { todos: [], }, onReady: function() { new AV.Query('Todo') .descending('createdAt') .find() .then(todos => this.setData({ todos })) .catch(console.error); }, }); ~~~ [JavaScript](#) [HTML](#) ### [文件存儲](#文件存儲) 在小程序中，可以將用戶相冊或拍照得到的圖片上傳到 LeanCloud 服務器進行保存。首先通過?`wx.chooseImage`?方法選擇或拍攝照片，得到本地臨時文件的路徑，然后按照下面的方法構造一個?`AV.File`?將其上傳到 LeanCloud： ~~~ wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res) { var tempFilePath = res.tempFilePaths[0]; new AV.File('file-name', { blob: { uri: tempFilePath, }, }).save().then( file => console.log(file.url()) ).catch(console.error); } }); ~~~ 上傳成功后可以通過?`file.url()`?方法得到服務端的圖片 url。 ### [用戶系統](#用戶系統) 小程序中提供了登錄 API 來獲取微信的用戶登錄狀態，應用可以訪問到用戶的昵稱、性別等基本信息，但是如果想要保存額外的用戶信息，如用戶的手機號碼、收貨地址等，則需要使用 LeanCloud 的用戶系統。 #### [一鍵登錄](#一鍵登錄) LeanCloud 的用戶系統現已支持一鍵使用微信用戶身份登錄。要使用一鍵登錄功能，需要先設置小程序的 AppID 與 AppSecret： 1. 登錄?[微信公眾平臺](https://mp.weixin.qq.com/)，在?設置?>?開發設置?中獲得 AppID 與 AppSecret。 2. 前往 LeanCloud 控制臺 >?組件?>?社交，保存「微信小程序」的 AppID 與 AppSecret。現在，你可以在應用中使用?`AV.User.loginWithWeapp()`?方法來使用當前用戶身份登錄了。 ~~~ AV.User.loginWithWeapp().then(user => { this.globalData.user = user.toJSON(); }).catch(console.error); ~~~ 如果該用戶是第一次使用此應用，調用登錄 API 會創建一個新的用戶，你可以在控制臺 >?存儲?中的?`_User`?表中看到該用戶的信息，如果該用戶曾經使用該方式登錄過此應用，再次調用登錄 API 會返回同一個用戶。用戶的登錄狀態會保存在客戶端中，可以使用?`AV.User.current()`?方法來獲取當前登錄的用戶，下面的例子展示了如何同步登錄用戶的信息： ~~~ // 獲得當前登錄用戶 const user = AV.User.current(); // 調用小程序 API，得到用戶信息 wx.getUserInfo({ success: ({userInfo}) => { // 更新當前用戶的信息 user.set(userInfo).save().then(user => { // 成功，此時可在控制臺中看到更新后的用戶信息 this.globalData.user = user.toJSON(); }).catch(console.error); } }); ~~~ #### [啟用其他登錄方式](#啟用其他登錄方式) 由于?`AV.User.loginWithWeapp()`?只能在小程序中使用，所以使用該 API 創建的用戶無法直接在小程序之外的平臺上登錄。如果需要使用 LeanCloud 用戶系統提供的其他登錄方式，如用手機號驗證碼登錄、郵箱密碼登錄等，在小程序一鍵登錄后設置對應的用戶屬性即可： ~~~ // 小程序登錄 AV.User.loginWithWeapp().then(user => { // 設置并保存手機號 user.setMobilePhoneNumber('13000000000'); return user.save(); }).then(user => { // 發送驗證短信 AV.User.requestMobilePhoneVerify(user.getMobilePhoneNumber()); }).then({ // 用戶填寫收到短信驗證碼后再調用 AV.User.verifyMobilePhone(code) 完成手機號的綁定 // 成功后用戶將可以在其他平臺上使用手機號動態驗證碼登錄了 }).catch(console.error); ~~~ #### [綁定現有用戶](#綁定現有用戶) 如果你的應用已經在使用 LeanCloud 的用戶系統，或者用戶已經通過其他方式注冊了你的應用（比如在 Web 端通過用戶名密碼注冊），可以通過在小程序中調用?`AV.User#linkWithWeapp()`?來關聯已有的賬戶： ~~~ // 首先，使用用戶名與密碼登錄一個已經存在的用戶 AV.User.logIn('username', 'password').then(user => { // 將當前的微信用戶與當前登錄用戶關聯 return user.linkWithWeapp(); }).catch(console.error); ~~~ ### [云引擎](#云引擎) 使用云引擎可以方便地實現一些在服務器執行的邏輯，比如處理敏感信息、數據聚合、采集數據等，并且不需要準備額外的服務器。 SDK 所有的云引擎相關的 API 都能正常使用，詳細的用法請參考?[云函數開發指南](https://leancloud.cn/docs/leanengine_cloudfunction_guide-node.html)。 ## [實時通訊 SDK](#實時通訊_SDK) 要使用 LeanCloud 的聊天、實時消息功能，需要使用 LeanCloud 實時通訊 SDK。 ### [安裝與初始化](#安裝與初始化-1) 1. 下載?[`realtime.weapp.min.js`](https://unpkg.com/leancloud-realtime@%5E3.3.0/dist/realtime.weapp.min.js)（[鏡像](https://raw.githubusercontent.com/leancloud/js-realtime-sdk/dist/dist/realtime.weapp.min.js)），移動到?`libs`?目錄。 2. 在?`app.js`?中使用?`const Realtime = require('./libs/realtime.weapp.min.js').Realtime;`?獲得?`Realtime`?的引用。在其他文件中使用時請將路徑替換成對應的相對路徑。 3. 在?`app.js`?中初始化應用： ~~~ const realtime = new Realtime({ appId: 'csXFgnEzBkodigdDUARBrEse-gzGzoHsz', noBinary: true, }); ~~~ 實時通訊 SDK 的詳細用法請參考?[實時通信開發指南](https://leancloud.cn/docs/realtime_guide-js.html)。 ### [富媒體消息](#富媒體消息) 要在小程序中使用實時通訊 SDK 的富媒體消息插件，有一些額外的約束： 1. 安裝存儲 SDK 至?`libs`?目錄，并將文件重命名為?`leancloud-storage.js`。 2. 安裝實時通訊 SDK 至?`libs`?目錄，并將文件重命名為?`leancloud-realtime.js`。 3. 下載?[`leancloud-realtime-plugin-typed-messages.js`](https://unpkg.com/leancloud-realtime-plugin-typed-messages@%5E1.0.0)，移動到?`libs`?目錄。必須保證三個文件在同一目錄中。 4. 在?`app.js`?中依次加載?`leancloud-storage.js`、`leancloud-realtime.js`?和?`leancloud-realtime-plugin-typed-messages.js`。 ~~~ const AV = require('./libs/leancloud-storage.js'); const Realtime = require('./libs/leancloud-realtime.js').Realtime; const TypedMessagesPlugin = require('./libs/leancloud-realtime-plugin-typed-messages.js').TypedMessagesPlugin; const ImageMessage = require('./libs/leancloud-realtime-plugin-typed-messages.js').ImageMessage; ~~~ 5. 在?`app.js`?中初始化應用： ~~~ // 初始化存儲 SDK AV.init({ appId: 'csXFgnEzBkodigdDUARBrEse-gzGzoHsz', appKey: 'K2CE4ChmGnUwI8mMBgTRHw7y', }); // 初始化實時通訊 SDK const realtime = new Realtime({ appId: 'csXFgnEzBkodigdDUARBrEse-gzGzoHsz', noBinary: true, plugins: [TypedMessagesPlugin], // 注冊富媒體消息插件 }); ~~~ 富媒體消息的用法請參考?[實時通信開發指南 - 富媒體消息](https://leancloud.cn/docs/realtime_guide-js.html#富媒體消息)。