超詳細步驟 | 如何用小程序 SDK 實現電商評價模塊

【 玩轉 LeanCloud 】開發者經驗分享： 做者：黃秀傑

在商城系統中給商品添加評價是一種很是典型的需求，我下面要來演示一下如何藉助 LeanCloud 的小程序 SDK 來快速完整地實現這個需求，包括如何處理用戶登陸和獲取用戶信息、數據添加和讀取、圖片上傳等功能。

先列一下基本需求：

• 寫入一條帶描述和多張圖片的評價記錄
• 保存用戶對象，關聯商品對象
• 評價顯示在商品詳情底部

添加評價演示：

評價列表顯示：

前端 UI 要完成：

• 繪製帶「刪除」按鈕的九宮格
• 一個文本域，供輸入描述文字
• 一個提交按鈕

技能點：

• LeanCloud 小程序 SDK 經常使用的 API
• Promise.all() 併發處理多個網絡請求
• 小程序表單控件 textarea 訪問取值與小程序頁面傳值

LeanCloud存儲部分

新建一張Evaluate評價表，該表保存着多圖url路徑數組，同時還維護商品goods表與user表的關聯，以表示哪一個用戶user針對哪一個商品做出的評價。數據表在LeanCloud用Class表示，而外鍵關聯在LeanCloud中使用Pointer類型表示，建表與建字段以下圖所示。

• 建表

• 建字段

• 建用戶字段

• 圖組字段

引入LeanCloud小程序JS庫——av-weapp.min.js

js庫下載地址：https://unpkg.com/leancloud-storage@%5E3.0.0-alpha/dist/av-weapp-min.js

下載將它放在/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 個文件：

• evaluate.js
• evaluate.json
• evaluate.wxml
• evaluate.wxss

LeanCloud 一鍵登陸與獲取當前用戶

取出當前用戶後，與描述內容、圖片數組、商品關聯一併提交到網絡：

AV.User.loginWithWeapp();
var user = AV.User.current();
複製代碼

小程序端從wxml中取出textarea的值

在 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
    });
    },
複製代碼

在評論頁接收上個頁面傳遞來的商品 id

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)
            });
        }
    })
    },
複製代碼

上傳圖片獲得圖片 url 數組

上傳經過 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);
    }
);
複製代碼

提交數據到 LeanCloud

先建立對象 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);
    });
},
複製代碼

相應的 wxml 佈局

經過 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 和討論。