找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 220|回复: 0

[微赞/微擎/小程序] 商品手账微信小程序,商品留言评论小程序

[复制链接]

该用户从未签到

发表于 2018-9-8 08:30:00 | 显示全部楼层 |阅读模式

您需要 登录 才可以下载或查看,没有账号?立即注册

×
商品手账微信小程序,商品留言评论小程序
商品手账微信小程序,商品留言评论小程序
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缩小图片,[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 //用户上传的图片的地址
    }
复制代码
留言提交成功之后,页面会自动切回商品详情页面,这时,你就可以看到自己刚刚的留言了;

请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

文件名称: 找资源免费下载  
提取码:
本附件售价:50Z币  RMB: 【充值FF币 1元=50FF币】
下载权限: 0( ) 以上或【免币下载】 【点击开通】
下载次数:



建议加入VIP会员,全站所有亲测资源免费任下,最低仅需28元
24小时自助开通地
https://www.zhaozy.vip/vip.php

回复

使用道具 举报

网站地图|页面地图|文字地图|Archiver|手机版|小黑屋|找资源 |网站地图

GMT+8, 2024-11-1 20:31

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表