微信小程序开发初试实例结算小助手

本着自己参加过学校组织的微信小程序云开发培训，就抱着尝试的心理去参加今年的高校微信小程序开发大赛，基本上应该算是去当炮灰ㄟ( ▔, ▔ )ㄏ。自己一个人组队，做了个结算小助手，就是使用手机实现类似超市中扫码枪的功能，扫描商品条形码或者二维码进行结算。

小程序码

大家可以扫一扫试一试，好像有个缺陷是那个没有让用户要先授权再进入，但是功能基本上都实现成功，一些细节处理不是很好，见谅。

界面展示：

创作背景

手机已经融入我们的生活，生活中越来越多的问题都能通过手机来解决。由于自己家里是开百货店的，商品结算只能通过计算器或者口算进行结算，如果购买扫码枪又需要显示屏等配置，会消耗一定的费用。自己想到了设计一个小程序实现类似超市中扫码枪的功能，即通过连续扫描商品的条形码或者二维码进行结算，这样既能省下购买扫码枪等配置的费用，又能实现结算的功能。

小程序功能

结算小助手主要有五个功能，分别为扫描商品结算、导入商品信息、查询商品信息、修改商品信息、收入历史记录。其中扫描商品结算、导入商品信息、收入历史记录为主要功能，查询商品信息、修改商品信息为辅助功能。

小程序实现

结算小助手实现主要步骤：

1. 通过导入商品信息的功能，将所拥有的商品条形码/二维码、商品名称和商品价格存入到云数据库；
2. 通过扫描商品结算的功能，连续扫描客户购买的商品的条形码，然后点击查看详细账单，检测扫描商品是否有遗漏或者重复等问题，如果出现问题，可以通过数量旁边的“+”、“-”进行修改。如果无误，即可点击结算。（个人想法是点击结算后能够弹出自己（即店长）的收款码，让客户进行扫码付款，付款成功后将账单详细信息存入云数据库。但是还未实现前半部分内容，只是实现点击结算按钮将账单的内容存入云数据库。）
3. 通过收入历史记录的功能，可以查看某时间收入总额，点击相应的部分，可以查看完整的账单信息。
4. 通过查询商品信息和修改商品信息的功能，实现对商品信息的查找和修改，即这两个功能为辅助功能。

小程序开发方案(想看源代码，直接看这一项)

只把一些关键代码给贴上来了，需要代码交流的可以联系或者评论区评论。
开发模式：小程序
后端服务：小程序·云开发（主要用到了云数据库来存储货物信息。）
主要功能实现：
1.扫描条形码区
a. 扫描动画效果：
通过onShow页面显示调用，通过js定义move函数实现一根线的上下移动，从而达到扫描的效果。

  onShow(){
   
    this.move()
  },

  move(){
   
    var that = this;
    // 控制向上还是向下移动
      let m = true
      setInterval(function () {
   
        if (m) {
   
          animation.translateY(235).step({
    duration: 3000 })
          m = !m;
        } else {
   
          animation.translateY(0).step({
    duration: 3000 })
          m = !m;
        }
        that.setData({
   
          animation: animation.export()
        })
      }.bind(this), 3000)
  },

b. 连续扫描获取条形码的数据：
通过定义camera组件自定义扫码功能（bindscancode=‘takecode’），js定义takecode函数，通过setTimeout实现连续扫描。

  takeCode(e) {
   
    if (this.data.scanFunctionIsUseAble){
   
      this.setData({
   
        scanFunctionIsUseAble: false,
        code:e.detail.result,
      })
      var fileCode = e.</