【 玩轉 LeanCloud 】開發者經驗分享: 做者:黃秀傑html
在商城系統中給商品添加評價是一種很是典型的需求,我下面要來演示一下如何藉助 LeanCloud 的小程序 SDK 來快速完整地實現這個需求,包括如何處理用戶登陸和獲取用戶信息、數據添加和讀取、圖片上傳等功能。前端
先列一下基本需求:git
添加評價演示:json
評價列表顯示:小程序
前端 UI 要完成:api
技能點:數組
新建一張Evaluate評價表,該表保存着多圖url路徑數組,同時還維護商品goods表與user表的關聯,以表示哪一個用戶user針對哪一個商品做出的評價。數據表在LeanCloud用Class表示,而外鍵關聯在LeanCloud中使用Pointer類型表示,建表與建字段以下圖所示。promise
js庫下載地址:https://unpkg.com/leancloud-storage@%5E3.0.0-alpha/dist/av-weapp-min.jsbash
下載將它放在/utils/目錄下,而後在須要的js頁面按以下方式引入網絡
const AV = require('../../../utils/av-weapp.js')
複製代碼
而後按下面方式初始化,初始化過程只用操做一次,所以能夠放到app.js執行。
// 初始化AV
const AV = require('./utils/av-weapp.js');
const appId = "7tm1OFlNlmLFxxxoHsz";
const appKey = "XxNkFIrxxxal0ttvj";
AV.init({
appId: appId,
appKey: appKey
});
複製代碼
/pages/member/evaluate/ 目錄下建立 4 個文件:
取出當前用戶後,與描述內容、圖片數組、商品關聯一併提交到網絡:
AV.User.loginWithWeapp();
var user = AV.User.current();
複製代碼
在 wxml 文件個添加一個 textarea 控件,經過 bindblur 事件獲取它的值:
<textarea value="{{content}}" name="content" placeholder="請輸入評價內容" maxlength="-1" auto-height bindblur="getContent" />
複製代碼
JS中實現取值並保於page的data中,供提交數據到網絡之用:
getContent: function (e) {
that.setData({
content: e.detail.value
});
},
複製代碼
onLoad: function(options) {
// 取出商品 id
var objectId = options.objectId;
// 存在當前頁面 data 中,以保存到評價表
this.setData({
objectId: objectId
});
},
複製代碼
而後經過 LeanCloud SDK 的 AV.Object.createWithoutData 方法來獲得被關聯的商品對象,最終被提交到 Evaluate 表中。
wx.chooseImage 是小程序提供的圖集瀏覽 API,使用方法見 https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject,它會返回一個tempFilePaths 數組,以後用它上傳給 LeanCloud 雲端。
chooseImage: function() {
// 選擇圖片
wx.chooseImage({
sizeType: ['compressed'],
sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機,默認兩者都有
success: function(res) {
// 返回選定照片的本地文件路徑列表,tempFilePath 能夠做爲 img 標籤的 src 屬性顯示圖片
var tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
that.setData({
images: that.data.images.concat(tempFilePaths)
});
}
})
},
複製代碼
上傳經過 LeanCloud SDK 的 AV.FIle#save() 方法完成。因爲上傳是異步操做的,所以這裏用 Promise.all 方法等所有圖片上傳完成後再把返回的 image url 數組提交到網絡。
// 提交圖片,事先遍歷圖集數組
var promises = that.data.images.map(function(tempFilePath) {
return new AV.File('file-name', {
blob: {
uri: tempFilePath,
},
}).save();
});
Promise.all(promises).then(
function(files) {
// Promise 返回待上傳圖片數組
var uploadedImages = files.map(function(file) {
return file.url();
});
console.log(uploadedImages);
}
);
複製代碼
先建立對象 evaluate,而後經過 set 方法設置成員變量值,最後調用 save() 方法提交數據到 LeanCloud:
// 提交數據到網絡
var evaluate = new AV.Object('Evaluate');
// 設置圖組
evaluate.set('images', uploadedImages);
// 設置用戶提交的描述
evaluate.set('content', that.data.content);
// 設置當前用戶
evaluate.set('user', AV.User.current());
// 關聯商品
evaluate.set('goods', AV.Object.createWithoutData('Goods', that.data.objectId));
// 保存到LeanCloud數據表
evaluate.save().then(function() {
// 彈出提示
wx.showToast({
title: '評價成功',
success: function() {
// wx.navigateBack();
}
});
}, function(err) {
console.log(err);
});
複製代碼
若是是 update 操做,那麼須要這個對象要有 ObjectId,一樣是調用 save() 方法。一般是在編輯頁面的時候已經在 data 中保存了讀取到的 object,而後再 save() 這樣就變成 update 操做了。
這時就能看到開篇的多圖上傳 gif 動圖裏的效果了。
登陸 LeanCloud 後臺,找到 Evaluate表,看到數據已經插入成功了。其中 goods 與 user 分別指向商品與用戶對象,點擊連接能夠跳轉查看到關聯的商品與用戶的數據。
查詢操做使用 query#find() 方法,關聯表的字段須要使用 include('xx_table') 設定,查詢條件全匹配使用 equalTo:
getEvaluateByGoods: function (goodsId) {
var query = new AV.Query('Evaluate');
// 查詢關聯表的數據須要調用設置 include 屬性,能夠屢次設定
query.include('user');
// 查詢條件設定爲當前 goods 對象
query.equalTo('goods', AV.Object.createWithoutData('Goods', goodsId));
// 查詢全部記錄
query.find().then(function (evaluateObjects) {
// 將返回結果返回到 data 數據中,以在 wxml 渲染
that.setData({
evaluateObjects: evaluateObjects
})
}, function (err) {
console.log(err);
});
},
複製代碼
經過 wx:for 來遍歷,而且指定 wx:for-item 以區分嵌套內層循環的數據。LeanCloud 小程序 SDK 升級到3.0後,成員變量能夠很方便地使用點語法在 wxml 連接訪問,好比 {{ evaluate.user.avatarUrl }}
<!-- 用戶評價 -->
<view class="evaluate-container">
<view wx:for="{{evaluateObjects}}" class="evaluate" wx:for-item="evaluate">
<view class="avatar">
<image src="{{evaluate.user.avatarUrl}}" />
</view>
<view class="main">
<view class="nickname">{{evaluate.user.nickName}}</view>
<view class="content">{{evaluate.content}}</view>
<view class="gallery">
<view class="image-container" wx:for="{{evaluate.images}}" wx:for-item="url">
<image src="{{url}}" />
</view>
</view>
</view>
</view>
</view>
複製代碼
這時能看到開篇的那張商品詳情的截圖效果。
大功告成,超 easy 是否是!源碼地址 http://git.oschina.net/dotton/lendoo-wx,文中所涉及的代碼保存在 /pages/member/evaluate 文件夾中,歡迎 fork 和討論。