使用LeanCloud快速開發一款小程式

Bug開發者發表於2018-12-24
Cloud

前言

開發小程式離不開後臺資料，對於獨立開發者來說，既要寫前端，又要寫後端，工作量就會驟然增大。微信提供的雲開發無疑是給獨立開發者提供了很大的便利，但是由於其資料庫不支援聯表查詢，對於某些場景就不是那麼的友好了。當然，市面上有很多的BaaS服務提供商，大都類似，今天我們就用其中的一個LeanCloud來講解一下，如何快速使用LeanCloud來開發一個小程式。 由於本次重點在LeanCloud，所以小程式的開發內容就不是重點。

現在開始

  1. 賬號註冊

先去leancloud.cn官網註冊一個賬號，然後登入去控制檯建立一個新應用。

  1. 域名配置

在微信小程式後臺中配置域名白名單，具體需要按照這裡說明的來配置，你也可以先跳過這一步，等完全開發完畢後再來配置。可在開發者工具的 詳情 > 專案設定 中勾選不校驗安全域名、TLS 版本以及 HTTPS 證照。

  1. SDK整合

下載你熟悉的SDK，目前支援JS，WePY，mpvue，下載連結在這裡，後面以JS來說明，其他方式的SDK匯入以及使用方法參考文件中的說明。

  1. 初始化SDK

在app.js中加入以下程式碼即可。appId和appKey可以在控制檯中的應用找到。

const AV = require('./utils/av-live-query-weapp-min');

AV.init({
  appId: '換成你自己的appId',
  appKey: '換成你自己的appKey',
});
複製程式碼
  1. 查詢資料

先需要在控制檯中的應用下新建一個表，在網頁中叫做Class。每一張表會預設建立objectId、createdAt、updatedAt、ACL四個欄位，分別表示資料索引，建立時間，更新時間、許可權。你可以新增你想要的欄位，目前支援以下幾種型別。

支援型別

其中Object是map物件，GeoPoint是經緯度資訊，Pointer是另外一張表的表名，做多表聯合查詢使用的。 假設我們的表名是T_TODO，我們可以用以下程式碼來查詢該表下面的資料。

new AV.Query('T_TODO')
      .descending('createdAt') // 排序
      .limit(10) // 分頁數量
      .skip(10) // 跳過數量
      .find()
      .then(function(results) {
      		that.setData({todo: results})
      })
      .catch(console.error);
  }
複製程式碼

在你的WXML中可以這樣寫來做資料繫結：

<!-- pages/todos/todos.wxml -->
<block wx:for="{{todos}}" wx:for-item="todo" wx:key="objectId">
<text data-id="{{todo.objectId}}">
  {{todo.content}}
</text>
</block>
複製程式碼

是不是很方便。

  1. 多表查詢

如果需要多多表查詢，先要在一張表中新建一個Pointer欄位，新建時會讓你選擇指向的表名，如下圖所示：

演示
然後在查詢是使用include，就會返回關聯表中的所有資訊了，如下所示：

new AV.Query('T_TODO')
      .descending('createdAt') // 排序
      .limit(10) // 分頁數量
      .skip(10) // 跳過數量
      .include('T_POINT_CLASS')
      .find()
      .then(function(results) {
      		that.setData({todo: results})
      })
      .catch(console.error);
  }
複製程式碼
  1. 更新物件

小程式中對錶中欄位做操作後，需要同步更新到服務端，可以使用以下程式碼來儲存物件。

  // 第一個引數是 className，第二個引數是 objectId
  var todo = AV.Object.createWithoutData('Todo', '5745557f71cfe40068c6abe0');
  // 修改屬性
  todo.set('content', '每週工程師會議，本週改為週三下午3點半。');
  // 儲存到雲端
  todo.save();
複製程式碼
  1. 其他更多的操作請檢視文件，不過你找不到小程式對應的詳細開發文件，只能找到資料儲存開發指南 · JavaScript

廣告時間

三國圖鑑是我業餘時間開發的查詢三國殺武將技能以及官方活動的小程式，後臺服務就是由LeanCloud提供的，請大家多多關照。如果有其他問題，你可以關注我的公眾號來聯絡我。

  • 掃碼體驗小程式
    三國圖鑑
  • 掃碼關注公眾號
    公眾號二維碼

相關文章