实现一个扫描商品条码进行评价或留言的小程序（附源码） (2)

虽然小程序的选择图片接口可以设置默认压缩，但好像没什么用，还是需要找其他的方法压缩一下，
网上最普遍的图片压缩是使用了小程序提供的canvas画布，把用户上传的图片搞到画布上（....），然后根据画布上的图片高和宽判断图片是否过大，如果过大，就直接把画布按比例缩小：

while (canvasWidth > 220 || canvasHeight > 220) { //如果宽度或者高度大于220，我就认为图片要进一步压缩，你可以根据需求改成其他的数字 //比例取整 canvasWidth = Math.trunc(res.width / ratio) canvasHeight = Math.trunc(res.height / ratio) ratio++; }

图片的压缩参考自：[微信小程序：利用canvas缩小图片][https://blog.csdn.net/akony/article/details/78815544]

然后把canvas上这张压缩了的图片上传到后台服务器：

...... wx.uploadFile({ //上传图片 url: 'https://mp.orancat.com/proImgUpload', filePath: photo.tempFilePath, //压缩后的图片 name: 'file', header: { 'content-type': 'multipart/form-data' }, success: function (res) { .......

图片上传成功之后，后台会返回上传图片的地址给我们，我们把图片渲染到页面上，用户就会知道图片上传成功了；

最后点击'提交'按钮，就会把以下内容发送给后台，后台就会自动将留言保存到数据库；

var data={ authorName: userName, //用户昵称 token: userId, //用户ID content: this.data.textContent, //留言文本内容 imgUrl: userImg, //用户的头像 code: this.data.barcode, //商品的条码 typeIndex: this.data.typeIndex, //留言的类型 nodeImgUrl: this.data.nodeImgUrl //用户上传的图片的地址 }

留言提交成功之后，页面会自动切回商品详情页面，这时，你就可以看到自己刚刚的留言了；

5.排行榜页面

有过留言的商品都会出现在排行榜页面，并且按照留言的数量多少进行排列，点击单个商品就查看该商品下的留言；

6.其他实现的功能 1.分页

在商品详情页，有可能出现这种情况，比如说假设A商品有120条留言，如果一进A商品详情页就要加载120条留言的话，可能页面加载半天都没有出来；这样的话用户体验就会非常不好。所以相对理想的方式应该是，假设12条留言为一页，那么A商品的留言总共有10页，当我们进入A商品的详情页面时，先加载第一页（前12条留言），当我们往上滑动页面到底部时就自动加载下一页的内容，一页一页按需加载；

我们使用小程序提供的OnReachBottom触底事件实现分页加载，当用户滑动留言列表到底部时触发加载下一页：

onReachBottom: function () { //滑动到底部时触发 this.setData({ bottomLoading: true // 显示loading提示 }) this.getRankList() //请求下一页数据 }

同理，排行榜页面也使用了分页加载；

2.通过wx.login获取用户唯一凭证openId

由于用户的昵称，头像什么的都可能随时会改变，当openID不会变，所以使用openId作为用户唯一凭证；
虽然我获取了用户的Id，但暂时还没有使用到；
如果以后要弄个用户个人主页或者留言回复等等可能就要用到openId；

3.gif图片上传

如上所述，在图片上传前，我们把图片压缩了一下
如果图片是jpeg，png时没问题的
但如果图片时gif动图的话，那可能会导致动图不会动了（可能直接变成jpeg图片？）
所以我另外加了一个判断：如果图片时gif格式的话，就不压缩图片,直接上传：

if(res.type=='gif'){ if(res.width>666||res.height>666){ //如果图片太大了，拒绝上传 wx.hideLoading() wx.showModal({ title: '提示', content: '动图太大了，请上传小一点的', showCancel: false }) return false; } res.tempFilePath=res.path; _this.uploadImg(res) //上传图片 return false; }

这样在window和安卓下就可以上传gif图片了。
苹果手机呢？？
咳咳..苹果手机一打开相册选动图，动图就自动变成了jpeg的不动图...
所以苹果手机暂时上传不了动图，似乎没有解决办法。。

7.下载与本地电脑运行

在本文底部的github地址下载源码，用微信开发者工具，填上你的小程序appId，打开项目即可；

记得在开发者工具点击‘’详情‘’设置不校验域名：

如果你要提交审核并分布小程序的话，你需要在公众号平台上的"设置>开发设置"页面上设置小程序的服务器域名如下：