公众号开发-移动端h5页面调用微信扫一扫

前言:

大家好,我是前端小陈.今天为大家讲一下微信公众号开发,调用微信的JSSDK的案例.

前不久,接到这么一个需求:在H5网页实现扫一扫功能.  要求:微信端以及浏览器均可以实现扫一扫功能,而且不能用原生相机

第一次做这种需求,那肯定是很乐意的啦.能学到东西嘛.于是开始了我漫长的百度百度百度,导入试用.就这样过了一天~第二天经过多方问人之后,得到的结论是:三个解决方案.

1. 调用微信扫一扫

2. 用百度的sdk(收费)

3. 调用原生相机

经过跟老大以及产品一番讨论后,决定使用微信扫一扫来实现这个扫码的功能,下面我就开始就我在实现这个功能过程中遇到的问题,进行记录讲解

调用微信的东西,那必须的看官方文档必然! 

快捷通道：微信开发文档

按照说明文档的使用方法:

第一步:绑定域名---登录公众号---设置与开发--功能设置--JS接口安全域名

第二步:引入js文件---自行百度

注意:引入的时候.遇到这么个问题.mian.js里面引入打印的方法,与页面引入打印出来的方法,有些有有些没有,百度得到的是有冲突.所以我使用的当前页面引入.

第三步:wx.config权限校验.

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

注意:这一步,里面的参数通过后端写的接口返回给你.切记:后端返回的数据一定要记得去微信提供的校验网站核验!!!    后端返回的签名必须与校验网站生成的签名一致才可以,切记!

附上代码:

_config() {
        var pageUrl = location.href.split('#')[0] // 页面地址
        this.$myRequest({
          url: 'getSignPackage',
          methods: 'get',
          header: {
            token: uni.getStorageSync('token')
          },
          data: {
            url: pageUrl
          }
        }).then(res => {
          let config = res.data.data
          wx.config({
            // debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: config.appId, // 必填，公众号的唯一标识
            timestamp: config.timestamp, // 必填，生成签名的时间戳
            nonceStr: config.nonceStr, // 必填，生成签名的随机串
            signature: config.signature, // 必填，签名
            jsApiList: ['checkJsApi', 'scanQRCode'] // 必填，需要使用的JS接口列表
          });
          wx.error(function(res) {
            alert('出错啦====' + res.errMsg)
          })
          wx.ready(function() {
            wx.checkJsApi({
              jsApiList: ['scanQRCode'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function(res) {}
            })
          })
        })
      }

解释一下: 

pageUrl:当前页面地址,是需要做参数传回给后台的

config :是请求第三方接口(后端写的接口)用config 来接收这个返回的对象

--记得校验签名~~~

wx.config里面的参数拿到之后,调用wx.ready这个方法去校验, wx.checkJsApi 这个是做检验上面所需要调用微信的js接口检测的

第四步：调用微信扫一扫

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

直接通过点击事件去唤起这个扫一扫，附上我的代码

//点击调起微信扫一扫
      openCaream() {
        this.userData = JSON.parse(uni.getStorageSync('userData'))
        const screener_id = this.userData.parent_id
        wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            console.log('返回的参数===',result)
            var arr = result.split('?')
            const data = arr[1].split('&')
            const student_id = data[0].split('=')[1]
            const plan_id = data[1].split('=')[1]
            getApp().globalData.student_id =student_id
            getApp().globalData.plan_id = plan_id
            uni.navigateTo({
              url: '/pages/screening/screeningDetails'
            })
            getApp().globalData.flag = true
          },
          error: function() {
            console.log('123')
          }
        })
      }

附上个视频有视频有真相