微信小程序 实现扫码功能

/ 0评 / 15

    毕设把Client端选为微信小程序,一方面是不用花大量时间和精力去学习安卓app,另一方面也是微信小程序适合本次开发:轻量级,有基础用户无需注册,API完整。在申请好微信小程序之后我拿到了APPID,然后创建了一个快速启动的模板。

    微信小程序在快速启动当中还是给了一个Hello World的程序,而也用到了其官方的api wx.userinfo,而其项目目录如下:


其中 image和weui.wxss是我后期修理界面的时候加的,weui.wxss是微信官方提供的wxml样式表(设计原则里说要风格统一,我就随便给搞统一了),而image里则是底部菜单栏的icon,其余的大图我都挂到了cdn上面。而微信的api当中请求wx.request是只认可https,且之前必须在官网配置后台服务器(别乱搞,一月只有五次机会了解一下)。除了这连个之外pages是微信小程序的页面,里面包括几个页面就是有几个文件夹,而app.js/app.json/app.wxss作为全局的页面配置项,project.config.json是项目的配置文件。utils是工具js(里面自带一个时间处理的方法,不过我没用过)

    第一步我搞了个底部菜单栏:

在app.json配置如下:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/help/help"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  },

 "tabBar": {
    "color": "#a9b7b7",
    "selectedColor": "#11cd6e",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "image/scan.png",
        "iconPath": "image/QRCode.png",
        "pagePath": "pages/index/index",
        "text": "扫一扫"
      },
      {
        "selectedIconPath": "image/help_full.png",
        "iconPath": "image/help.png",
        "pagePath": "pages/help/help",
        "text": "帮助/关于"
      }]
  }

当然,路径填好,图片搞进来--(我的icon用的是阿里国际版),在page中创建相关页面,这样一来底部菜单栏就搞定了,剩下就是简单的H5开发了,我这里只遇到一个问题:Basic Auth(微信是不允许第三方认证的),最终不知道手怎么一抖就整出了一个请求头..然后就好了...就好了....

scanner: function () {
    var that = this;
    wx.scanCode({
      success: (res) => {
        var urls = 'https://stringair.xin/api-taozi/wechat/product_check_code=' + res.result
        wx.request({
          url: urls,
          method: 'GET',
          data: {},
          header: {
            'Accept': 'application/json',
            'Authorization': '不给看的Basic 认证'
          },
          success: function (res) {
            console.log(res.data.data)
            console.log(res.data.status)
            if (res.data.status == 200) {
              wx.showToast({
                title: '成功检测',
                icon: 'success',
                duration: 2000
              })
              res.data.data[0].creatTime = res.data.data[0].creatTime.substring(0, 10)
              res.data.data[0].updateTime = res.data.data[0].updateTime.substring(0, 10)
              that.setData({
                textHead: '这是正品奥,恭喜!',
                output: '点击底部按钮继续扫码',
                pro: res.data.data[0],
                showviewSu: true,
                showmain:false,
                showview404:false,
                showviewfail:false
              })
            } else if (res.data.status == 404) {
              wx.showToast({
                title: '产品未注册',
                icon: 'loading',
                duration: 1000
              })
              that.setData({
                textHead: '抱歉。该商品的未注册或者注册信息已过期',
                output: '点击底部按钮继续扫码',
                showviewSu: false,
                showmain: false,
                showview404: true,
                showviewfail: false
              })
            } else if (res.data.status == 500) {
              wx.showToast({
                title: '未知的二维码',
                icon: 'loading',
                duration: 1000
              })
              that.setData({
                textHead: '我们仅支持在Stringair平台注册的商品,其他未知二维码无法进行验证',
                output: '点击底部按钮继续扫码',
                showviewSu: false,
                showmain: false,
                showview404: false,
                showviewfail: true
              })
            }
          }
        })
      },

完整项目就移步git吧。。不知道审核能不能过。。我的确是做了个demo而已.


发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注