如何用小程序 SDK微信H5牛牛搭建平台实现电商评价模块

 

在微信H5牛牛搭建平台（h5.fanshubbs.com）中给商品添加评价是一种非常典型的需求，我下面要来演示一下如何借助 LeanCloud 的小程序 SDK 来快速完整地实现这个需求，包括如何处理用户登录和获取用户信息、数据添加和读取、图片上传等功能。

 

先列一下基本需求：

· 

写入一条带描述和多张图片的评价记录

· 

· 

保存用户对象，关联商品对象

· 

· 

评价显示在商品详情底部

· 

效果是这样的：

 

 

 

显示已保存的评价：

 

 

前端 UI 要完成：

· 

绘制带「删除」按钮的九宫格

· 

· 

一个文本域，供输入描述文字

· 

· 

一个提交按钮

· 

技能点：

· 

LeanCloud 小程序 SDK 常用的 API

· 

· 

Promise.all() 并发处理多个网络请求

· 

· 

小程序表单控件 textarea 访问取值与小程序页面传值

· 

建表

先登录 LeanCloud 控制台 > 存储 > 数据，新建一张评价表，表名为 Evaluate（数据表在 LeanCloud 中被称为 Class，即「类」），数据条目的 ACL 权限用默认的「限制写入」就好。该表保存着相关联图片的 url 路径数组，同时还维护商品 Goods 表与用户 _User 表的关联，以表示哪个用户针对哪个商品做出了评价。外键关联在 LeanCloud 中使用 Pointer 类型来实现，Evaluate 表结构如下：

 

 

引入 LeanCloud 小程序 SDK

下载 av-weapp.js 把它放在 /utils/ 目录下，然后在需要的 js 页面中引入：

const AV = require('../../../utils/av-weapp.js')

然后进行初始化。初始化过程只用操作一次，因此可以放到 app.js 执行：

 

// 初始化AV

const AV = require('./utils/av-weapp.js');
const appId = "<你的应用的 AppId>";
const appKey = "<你的应用的 AppKey>&