1.功能介绍对准上面的小程序码，扫一扫，有提示音，扫码成功，打开小程序，进入小程序首页。因为手边没有可乐，就找了一只很专业的猫来充当330ml瓶装的可口可乐给大家看。按住它，对准它的条码，扫一扫，“喵”的一声，猫跑了，扫码失败，追吧。会自动跳转到商品详情页。然后就可以看到别人在可口可乐下写的评论了。当然，您也可以点击右下角的蓝色按钮发表您的评论；原理：因为一个商品对应一个唯一的条码，可以扫描同款商品的条码进入唯一的留言列表；全国可口可乐330ml的条码都是一样的，扫描后进入同一个页面。条形码就像密码，密码，邮递员。当然不仅是条码，二维码也可以留言，比如别人的微信二维码久久不会变，可以写别人的坏话。下面详细介绍一下各个页面的功能。2、首页分为三部分：1、用户信息：头像、昵称；2.轮播图片——可以放一些平时展示的图片；可以打开扫描条码；当用户点击扫码按钮时，我们调用小程序的扫码接口扫描商品条码。用户扫描条码后，我们得到商品条码（barcode）；这个时候，我们可以跳转到商品详情页，顺便传一下条码，让商品详情页知道用户扫描的是什么商品：wx.navigateTo({url:"/page/component/proDtl/proDtl?barcode="+barcode,//将商品条码发送到商品详情页})3.商品详情页进入详情页后，我们首先要获取首页传过来的商品条码在生命周期onLoad，然后根据条码List请求当前商品的一条消息，如果这个商品没有被任何人扫描过，可能没有评论，那么我们只需要显示“还没有评论”onLoad(options){varbarcode=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,//默认9sizeType:['original'],//可以指定是原图还是压缩后的图片，默认都有sourceType:['album','camera'],//可以指定来源是相册还是相机，默认都成功:function(res){//图片选择成功后vartempFilePaths=res.tempFilePaths;self.compressedImg(res)//先调用compressedImg方法压缩图片看看}})虽然小程序的图片选择界面可以设置默认压缩，但是好像没什么用。您仍然需要找到其他方法来压缩。网上最常见的图片压缩是使用小程序提供的canvas来上传用户上传的图片。获取canvas上的图片(....)，然后根据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,//压缩图片名称:'file',header:{'content-type':'multipart/form-data'},success:function(res){......图片上传成功后，后台会返回上传图片的地址给我们，我们将在页面上渲染图片，用户就会知道图片上传成功；最后点击“提交”按钮，会将以下内容发送到后台，后台会自动将消息保存到数据库中；vardata={authorName:userName,//用户昵称token:userId,//用户ID内容:this.data.textContent,//消息正文内容imgUrl:userImg,//用户头像码:this.data.barcode,//commoditybarcodetypeIndex:this.data.typeIndex,//消息类型nodeImgUrl:this.data.nodeImgUrl//用户上传图片的地址}消息提交成功后，页面会自动切换回商品详情页。这时候就可以看到刚才留下的消息；5、排行榜页面有评论的商品将出现在排行榜页面，并根据评论数进行排序。点击单品可查看该商品下的评论；六、其他实现的功能1、商品详情页的分页，可能会出现这种情况。例如，假设A商品有120条评论，如果一进入A商品的详情页就需要加载120条评论，可能加载半天页面还出不来；在这种情况下，用户体验会非常糟糕。所以比较理想的方式应该是，假设12条评论为一页，那么产品A总共有10页的评论。当我们进入商品A的详情页时，首先加载第一页（前12条评论），当我们将页面向上滑动到底部时，会自动加载下一页的内容，每一页都加载到要求;我们使用小程序提供的OnReachBottom底部事件实现分页加载，当用户将消息列表滑动到底部时，触发下一页加载。page:onReachBottom:function(){//滑动到底部时触发this.setData({bottomLoading:true//显示加载提示})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})returnfalse;}res.tempFilePath=res.path;_this.uploadImg(res)//上传图片returnfalse;}这种方式在窗口安卓和苹果手机下可以上传gif图片吗？？咳咳。。iPhone一打开相册选择GIF，GIF就会自动变成jpeg动图。。。所以GIF暂时无法上传到iPhone，貌似也没有解决办法。.7.在本地电脑上下载并运行。从本文底部github地址下载源码，使用微信开发者工具，填写你的小程序appId，打开项目；记得在开发者工具中点击“详情”设置不验证域名：如果要提交小程序审核分发，需要在“设置>开发设置”中设置小程序的服务器域名公众号平台上的页面如下：当你需要扫码时，可以将下面的条码图片保存到本地电脑，点击扫码按钮打开这张图片：当然你也可以找到其他条码自行处理；另外需要注意的是，大家在本机调试的时候，由于我们都使用相同的后台界面，所以你发送的消息会同步到我的小程序，所以尽量不要发送太明显的测试消息，例如：可以发一些苦笑，积极向上，人畜无害，比如：7.扫码体验也可以直接扫这个小程序代码体验一下：源码下载地址：[https://github.com/奥瑟吉/p...]
