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

日期:2019-11-15编辑作者:Web前端

1.分页

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

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

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

同理,排行榜页面也使用了分页加载;

用例描述###

简要说明:用户进入书籍详情页后,可看到页面左下角有一个显示“加入预定栏”的按钮,用户点击按钮,若书籍可备副本为0,则用户点击预订按钮后会弹出一个框框,询问用户是否接收在有书后系统推送提醒,用户可选择接收或者拒绝,若书籍可备副本不为0,则点击预订按钮后会跳转到选择取书时间页面(如下)

图片 1

选择取书时间

当用户选择小于等于当天日期的时间,系统会弹出提示框,提醒用户选择时间错误,当用户选择正确时间后,点击立即支付,页面会跳转到预定栏

图片 2

预订栏

基本操作流程
用户点击预订按钮,若书籍可借,则会跳转到选择取书时间页面,若不可借,则会询问用户是否接收有书后系统自动提醒

2.首页

图片 3

首页有三个部分:

    1.用户的信息:头像和昵称;
    2.轮播图-可以放一些平时要展示的图片;
    3.扫码按钮-点击即可打开扫描条码;

当用户点击扫码按钮时,我们就调用小程序的扫码接口去扫描商品条码,当用户扫描好条码后,我们就得到了商品条码(barcode);
这时,我们就可以跳转到商品详情页面了,顺便把条码传过去,这样商品详情页才能知道用户扫的是什么商品:

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

一、概述

1.1编写目的
  编写这份需求说明书的目的是为了详细呈现出借阅伴侣需求及功能设计、非功能性设计、系统用例、运行环境要求等,阐述实用背景及范围。并进一步制定软件开发的细节问题,为用户、软件开发者对该软件的初始规定有一个共同的理解,希望能使本软件开发更具体,更明确。
2.2项目背景

3.商品详情页

图片 4

进入详情页后,我们的第一件事情:在生命周期onLoad中获取首页传过来商品条码,然后根据条码请求当前商品的留言列表,如果这个商品还没有人扫过的话,就可能没有留言,那我们只要显示“暂无留言”即可

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

在getProductInfo()方法中,我们会向后台请求商品留言列表;
接着我们就把请求到的商品留言列表渲染到页面上:

图片 5

如果用户觉得请求到的商品名称是不对的,还可以点击名称进行编辑:

图片 6

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

图片 7

如果你要发表留言,你可以用你的食指点击它:

图片 8

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

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

个人主页###

进入个人主页,用户可以查看所剩余额,页面下方有9个功能小图标:我的订单,个人信息,借阅栏,我的收藏,推荐书籍,推荐频率,意见反馈,图书首页,预定栏

图片 9

个人主页

  1. 我的订单
    进入我的订单页,用户可以查看过去的订单详情,也可以选择归还书籍,页面中一个小卡片就是一个订单,用户可根据卡片中最下方的标签状态来查看书籍借阅详情,四种借阅状态如下:
    • 若卡片中最下方有一个黄色标签上面为**待还书
      **,则表示用户已经进行了付款,但并未给管理员扫描二维码确认借阅
    • 若卡片中最下方有一个** 蓝色标签上面为待确认**,则表示用户已经借阅了图书,但还未归还
    • 若卡片中最下方有一个** 绿色标签上面为已完成**,则表示用户已经完成了借书与还书
    • 若卡片中最下方有一个** 红色标签上面为已超期**,则表示用户在规定时间内未归还图书
  2. 个人信息
    显示用户的姓名,身份证号,手机号,生日(自行填写后可进行保存),可进行修改,然后点击按钮保存
![](https://upload-images.jianshu.io/upload_images/6623405-99d6f75f84b123ac.jpg)

用户信息
  1. 借阅栏
    显示用户的订单信息
  2. 我的收藏
    显示用户曾经收藏过的书籍列表
  3. 推荐书籍
    系统根据用户的搜索记录分析用户喜爱的类型并推荐相关书籍

图片 10

推荐书籍

6.推荐频率
用户可根据自身喜好设置推荐频率,系统会自动给用户推送书籍

图片 11

推荐频率

7.意见反馈
用户根据平常使用该公众号的感受进行反馈,有利于开发者对公众号进行更好的修改及完善

图片 12

意见反馈

8.图书首页
9.预定栏
在书籍详情页,可以点击书籍详情页的加号图标将书加入预订书籍栏

图片 13

预订栏

</br>


二、非功能性设计

7.扫码体验

你也可以直接扫描这个的小程序码体验一下:

图片 14

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

2.归还图书###

6.其他实现的功能

用例描述####

简要说明:用户在规定时间内去图书馆让管理员进行扫码归还
基本操作流程
1.用户在规定时间内,带上书去图书馆,点开借阅栏待归还书籍右侧的还书二维码给管理员进行扫描
2.待管理员扫码成功后,用户会收到公众号还书成功的提醒

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的不动图...
所以苹果手机暂时上传不了动图,似乎没有解决办法。。

3.查询图书###

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

图片 15

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

1.性能设计###

  • 适合性
    产品的每项功能与页面都一一对应,面向任务系统中由子功能构成的功能都正常运行。
  • 准确性
    当用户点击页面中的按钮或者跳转链接,会准确无误的跳转到对应页面
  • 互操作性
    产品涉及到三端,微信端,APP端,电脑端,用户借书时,需把自己的二维码给管理员进行扫码,管理员在进行图书录入时,可通过电脑端手动输入书籍信息或者通过APP扫描书籍二维码进行录入
  • 安全性
    为防止恶意入侵等情况,每个页面都设置了用户权限、对生成的二维码包含了动态口令、实时更新二维码、数据库字段加密、所有接口调用时,通过与APP端约定好的加密算法,进行双向加密对比,进行CheckValue检查等方法,以保证产品安全

1.功能介绍

图片 16

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

因为手头上没有可乐,所以我找来了一只非常专业的猫,扮演一瓶330ml的可口可乐演示给大家看。

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

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

然后你就可以看得到别人在可口可乐下写的留言,当然你也可以点击右下角的蓝色按钮就发表你的留言了;

图片 17

原理:因为一个商品对应唯一一个条码,所以扫描同一个商品条码就可以进入唯一一个留言列表;
全国各地的可口可乐330ml的条形码都是一样的,扫码后都会进入同一个页面
条形码就像一个暗号,一句口令,一个邮差..
当然,不只是条形码,二维码也可以留言,比如说别人的微信二维码一般是长时间不会变的,你可以码上说别人坏话。

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

5.可移植性###

  • 易安装性
    产品涉及到三个端,微信端,APP端,电脑端,微信端关注公众号即可进行借阅,APP端可在商店进行下载,电脑端登录网页便可进行操作,易安装,易操作
    </br>

三、系统用例

5.排行榜页面

图片 18

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

一、功能设计

4.添加留言页面

图片 19

如图,这时候我们就可以开始写我们的留言了。

写完留言之后,你可以标注一下你的留言类型:
如果你觉得你写的是一首诗,你可以选择类型为‘诗一首’;
如果你觉得你写的是一封信,等待别人扫码阅读,你可以选择类型为‘鱼书’;
如果你扫描的是一本书的条码,你可以选择类型为‘书摘’;

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

  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) {
    .......          

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

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

   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 //用户上传的图片的地址
    }

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

图片 21

需求规格说明书

7.下载与本地电脑运行

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

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

图片 22

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

图片 23

然后,由于一般电脑没有摄像头不能扫码,所以当你需要扫码时,你可以把下面这张条码图片保存在本地电脑上,点击扫码按钮时打开这张图片即可:

图片 24

当然,你也可以自己找其他的条码;

另外,需要注意的是,当你在本地电脑调试时,由于我们都是使用同一个后台接口,所以你发的留言都会同步到我的小程序上,所以尽量不要发送太明显的测试留言,例如:

  图片 25

可以发一些强颜欢笑,积极向上,人畜无害的留言,例如:

  图片 26

扫码借书###

用户找到书籍后,可直接进行扫码借书生成二维码后给管理员扫描确认

图片 27

扫码加载

</br>

图书馆菜单栏##

本文由www.129028.com金沙发布于Web前端,转载请注明出处:实现一个扫描商品条码进行评价或留言的小程序(附源码)

关键词:

关于 react 那些小知识点儿

刚开始写react可能只是写出来完成业务就完了,后期审查代码发现可能很多地方其实都可以优化,之前可能有些地方似...

详细>>

Webpack4干货分享:第一部分,入口、输入和ES6模块

转载请注明出处: 葡萄城官网 ,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 Webpack4干货分...

详细>>

第十章www.129028.com金沙 集合

html代码: BitArraySample !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title火星黑洞/title /head b...

详细>>

从setTimeout【www.129028.com金沙】/setInterval看JS线程

引用: 从setTimeout/setInterval看JS线程 2018/04/19 · JavaScript · setInterval , settimeout 原文出处: PalmerYe     最近项目中遇到了...

详细>>