实现一个扫描商品条码进行评价或留言的小程序(附源码)
对准上面的小程序码,扫一下,‘嘀’~地一声,扫码成功,打开小程序,进入小程序首页。 因为手头上没有可乐,所以我找来了一只非常专业的猫,扮演一瓶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缩小图片][ blog.csdn.net/akony/artic… ] 然后把canvas上这张压缩了的图片上传到后台服务器:
图片上传成功之后,后台会返回上传图片的地址给我们,我们把图片渲染到页面上,用户就会知道图片上传成功了;
(此图片来源于网络,如有侵权,请联系删除! ) 最后点击’提交’按钮,就会把以下内容发送给后台,后台就会自动将留言保存到数据库;
留言提交成功之后,页面会自动切回商品详情页面,这时,你就可以看到自己刚刚的留言了;
(此图片来源于网络,如有侵权,请联系删除! ) 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格式的话,就不压缩图片,直接上传:
这样在window和安卓下就可以上传gif图片了。 苹果手机呢?? 咳咳..苹果手机一打开相册选动图,动图就自动变成了jpeg的不动图… 所以苹果手机暂时上传不了动图,似乎没有解决办法。。 7.下载与本地电脑运行在本文底部的github地址下载源码,用微信开发者工具,填上你的小程序appId,打开项目即可; 记得在开发者工具点击‘’详情‘’设置不校验域名:
(此图片来源于网络,如有侵权,请联系删除! ) 如果你要提交审核并分布小程序的话,你需要在公众号平台上的”设置>开发设置”页面上设置小程序的服务器域名如下:
(此图片来源于网络,如有侵权,请联系删除! ) 然后,由于一般电脑没有摄像头不能扫码,所以当你需要扫码时,你可以把下面这张条码图片保存在本地电脑上,点击扫码按钮时打开这张图片即可:
(此图片来源于网络,如有侵权,请联系删除! ) 当然,你也可以自己找其他的条码; 另外,需要注意的是,当你在本地电脑调试时,由于我们都是使用同一个后台接口,所以你发的留言都会同步到我的小程序上,所以尽量不要发送太明显的测试留言,例如:
(此图片来源于网络,如有侵权,请联系删除! ) 可以发一些强颜欢笑,积极向上,人畜无害的留言,例如:
(此图片来源于网络,如有侵权,请联系删除! ) |
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » 实现一个扫描商品条码进行评价或留言的小程序(附源码)