使用LeanCloud小程序SDK实现商品评价模块

2017-11-15  本文已影响0人  黄秀杰

前言

商品评价是商城系统中非常典型的应用，这个例子演示了LeanCloud用户登录与获取，数据添加与读取，图片上传等常见技能点。

需求分析

添加评价演示

evaluate.gif

评价列表显示

评价列表

技能点

前端UI部分

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提供的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提供的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()方法，相当于saveOrUpdate为一个方法。往往是编辑页面时在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，以区分嵌套内层循环的数据。av.min.js升级到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>

这时能看到开篇的那张商品详情截图效果。

结尾

到此，完成了图片上传与评论添加的过程，对小程序开发有兴趣的朋友 可以关注我的个人订阅号【黄秀杰】。

源码下载

http://git.oschina.net/dotton/lendoo-wx，文中涉及代码保存于/pages/member/evaluate文件夹中。

上一篇下一篇

猜你喜欢

热点阅读