美文网首页派大星爱吃小鱼干Vue移动端前端那些事儿
vue项目中调用微信SDK实现扫一扫功能

vue项目中调用微信SDK实现扫一扫功能

作者: 程序猿阿峰 | 来源:发表于2019-02-16 22:30 被阅读573次

    最近开发的vue移动端项目刚好涉及到扫一扫的功能。第一次遇到,也是费了九牛二虎之力其实就是被一个小坑给坑死才把它搞定。


    1.绑定域名
    在微信公众号平台中配置安全域名: 公众号设置 - 功能设置 - JS接口安全域名

    image.png
    详细操作可以参考 :微信JS-SDK说明文档
    2.引用js文件
    npm install weixin-js-sdk --save
    <script>
      import wx from 'weixin-js-sdk'
      export default {
    
      }
    </script>
    

    3.通过config接口注入权限验证配置
    签名算法见文末的附录1,所有JS接口列表见文末的附录2

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

    在页面上的具体操作如下 ↓ -- 放到你需要处理的地方

    // 获取微信签名
    $.ajax({
       url: '后端给的接口',
       data: { // 具体参数看后台给你的文档,我的只需要一个url
         url: location.href.splic('#')[0],
         // 这里是当前页面的url,一定要 location.href 获取,不然签名会无效。
       },
       success: function (res) {
          // res 返回的签名等数据
       }
    })
    wx.config({
       debug: false,
       appId: res.appId, // 必填,公众号的唯一标识
       timestamp: res.timeStamp, // 必填,生成签名的时间戳
       nonceStr: res.nonceStr, // 必填,生成签名的随机串
       signature: res.signature, // 必填,签名
       jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
    })
    wx.ready(function () {
      // config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
      // config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
      wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
        jsApiList: [
          'scanQRCode'
        ],
        success: function (res) { // 以键值对的形式返回,可用true,不可用false。如:{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
          if (res.checkResult.scanQRCode === true) {
             wx.scanQRCode({ // 微信扫一扫接口
               desc: 'scanQRCode desc',
               needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
               scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
               success: function (res) {
                 const getCode = res.resultStr // 当needResult 为 1 时,扫码返回的结果
             }
          })
        } else {
           alert('抱歉,当前客户端版本不支持扫一扫')
          }
        },
        fail: function (res) { // 检测getNetworkType该功能失败时处理
          alert('fail' + res)
        }
      })
    })
    
     /* 处理失败验证 */
    wx.error(function (res) {
    // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
       alert('配置验证失败: ' + res.errMsg)
    })
    

    具体的签名等数据都是后台大佬处理好了,小前端调用接口拿数据就好啦。

    相关文章

      网友评论

        本文标题:vue项目中调用微信SDK实现扫一扫功能

        本文链接:https://www.haomeiwen.com/subject/kdaieqtx.html