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

1.功能介绍

对准上面的小程序码，扫一下，‘嘀’~地一声，扫码成功，打开小程序，进入小程序首页。

由于手头上没有可乐，因此我找来了一只很是专业的猫，扮演一瓶330ml的可口可乐演示给你们看。

摁住它，对准它的条码，扫一下，‘喵’~地一声，说明猫跑掉了，扫码失败了，去追

若是‘嘀’~地一声，说明扫码成功了，这时页面就自动跳到商品详情页。

而后你就能够看获得别人在可口可乐下写的留言，固然你也能够点击右下角的蓝色按钮就发表你的留言了；

原理：由于一个商品对应惟一一个条码，因此扫描同一个商品条码就能够进入惟一一个留言列表；
全国各地的可口可乐330ml的条形码都是同样的，扫码后都会进入同一个页面
条形码就像一个暗号，一句口令，一个邮差..
固然，不仅是条形码，二维码也能够留言，好比说别人的微信二维码通常是长时间不会变的，你能够码上说别人坏话。

接下来详细介绍一下每一个页面的功能

2.首页

首页有三个部分：

    1.用户的信息：头像和昵称；
    2.轮播图-能够放一些平时要展现的图片；
    3.扫码按钮-点击便可打开扫描条码；

当用户点击扫码按钮时，咱们就调用小程序的扫码接口去扫描商品条码，当用户扫描好条码后，咱们就获得了商品条码（barcode）；
这时，咱们就能够跳转到商品详情页面了，顺便把条码传过去，这样商品详情页才能知道用户扫的是什么商品：

wx.navigateTo({
          url: "/page/component/proDtl/proDtl?barcode=" + barcode,  //把商品条码传给商品详情页
    })

3.商品详情页

进入详情页后，咱们的第一件事情：在生命周期onLoad中获取首页传过来商品条码，而后根据条码请求当前商品的留言列表，若是这个商品尚未人扫过的话，就可能没有留言，那咱们只要显示“暂无留言”便可

onLoad(options){
       var barcode = options.barcode ? options.barcode:'';
       this.getProductInfo(barcode)  //根据条码请求当前商品的留言列表
  },

在getProductInfo（）方法中，咱们会向后台请求商品留言列表；
接着咱们就把请求到的商品留言列表渲染到页面上:

若是用户以为请求到的商品名称是不对的，还能够点击名称进行编辑：

最后，页面底部还有一个提交留言的小按钮：

若是你要发表留言，你能够用你的食指点击它：

点击按钮后，小程序就会跳到添加留言页面，顺便把商品条码信息传过去：

turnToSubmit(){
    wx.navigateTo({
      url: "/page/component/addNode/addNode?barcode=" + this.data.barcode,
    })
  },

4.添加留言页面

如图，这时候咱们就能够开始写咱们的留言了。

写完留言以后，你能够标注一下你的留言类型：
若是你以为你写的是一首诗，你能够选择类型为‘诗一首’；
若是你以为你写的是一封信，等待别人扫码阅读，你能够选择类型为‘鱼书’；
若是你扫描的是一本书的条码，你能够选择类型为‘书摘’；

类型的右边就是是上传图片功能，
首先，咱们点击'添加图片'小图标，这时就会使用小程序选择图片的接口打开相册或者直接拍照，
获得图片以后，由于如今的手机图片拍照像素都比较高，致使图片比较大，上传会很慢，占服务器空间，请求也会很慢...
因此为了优化用户体验，咱们须要压缩一下图片而后再上传。

wx.chooseImage({
      count: 1, // 默认9  
      sizeType: ['original'], // 能够指定是原图仍是压缩图，默认两者都有
      sourceType: ['album', 'camera'], // 能够指定来源是相册仍是相机，默认两者都有
      success: function (res) {  //图片选择成功以后
        
               var tempFilePaths = res.tempFilePaths;
               self.compressedImg(res)  //调用compressedImg方法，先把图片压缩一下

        }
  })

虽然小程序的选择图片接口能够设置默认压缩，但好像没什么用，仍是须要找其余的方法压缩一下，
网上最广泛的图片压缩是使用了小程序提供的canvas画布，把用户上传的图片搞到画布上（....），而后根据画布上的图片高和宽判断图片是否过大，若是过大，就直接把画布按比例缩小：

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

图片的压缩参考自：微信小程序：利用canvas缩小图片

而后把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，打开项目便可；

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

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

而后，因为通常电脑没有摄像头不能扫码，因此当你须要扫码时，你能够把下面这张条码图片保存在本地电脑上，点击扫码按钮时打开这张图片便可：

固然，你也能够本身找其余的条码；

另外，须要注意的是，当你在本地电脑调试时，因为咱们都是使用同一个后台接口，因此你发的留言都会同步到个人小程序上，因此尽可能不要发送太明显的测试留言，例如：

  

能够发一些强颜欢笑，积极向上，人畜无害的留言，例如：

  

7.扫码体验

你也能够直接扫描这个的小程序码体验一下：

源码下载地址:[ https://github.com/AUSERGEE/p...]