使用vue开发实现微信扫一扫功能，亲测可以使用，及微信扫一扫实现过程中报错处理

微信公众号中，要开发扫一扫功能，说复杂也不算复杂，主要就是坑比较多，在使用微信的扫一扫之前，我已经试过第三方的扫一扫，但是没有成功，所以还是转回来用微信的的扫一扫，具体的代码并不多，过程大致就是这样

image

在微信公众平台该配置的应该都配置了，我这边是后台配置，所以直接跳过，不多说，直接上代码：

首先npm安装微信js-sdk：

npm install weixin-js-sdk

在需要的页面引入：

import wx from 'weixin-js-sdk'

配置config：

    wxconfigInit() {

      const url = (window.location.href).split('#')[0] // 动态获取当前页的#之前的url地址，这个是有https:// 或者http://的

       // 调用后端接口返回，配置需要的结果

      return room.getJSSDKConfig({ apis: 'scanQRCode', url: url, debug: 1 })

        .then(res => {

          const data = JSON.parse(res.data[0])

          wx.config({

            debug: false, // 开启调试模式,

            appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid

            timestamp: data.timestamp, // 必填，生成签名的时间戳

            nonceStr: data.nonceStr, // 必填，生成签名的随机串

            signature: data.signature, // 必填，签名，见附录1

            jsApiList: [ 'checkJsApi',  'scanQRCode' ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

          })

        })

        .catch(err => {

          console.log(err.msg)

        })

    },

我的是在页面创建的时候调用上面那个方法

created() {

    this.wxconfigInit()

}

最后点击事件去处理调用微信扫一扫

    isSearchClick() {

      wx.ready(() => {

        wx.checkJsApi({ // 这里是判断当前客户端版本是否支持指定JS接口

          jsApiList: ['scanQRCode'],

          success: function(res) { // 返回的结果大致如这样{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}

            if (res.checkResult.scanQRCode === true) {

              wx.scanQRCode({ // 微信扫一扫接口

                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

                scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有

                success: function(res) {

                  const result = res.resultStr // 当needResult 为 1 时，扫码返回的结果

                  window.location.href = result // 此处扫码结果直接跳转链接

                }

              })

            } else {

              alert('抱歉,当前客户端版本不支持扫一扫')

            }

          },

          fail: function(res) { // 检测getNetworkType该功能失败时处理

            alert('fail' + res)

          }

        })

      })

      wx.error(res => {

        alert('出错了：' + res.errMsg)

      })

    },

以上就是亲测能调用扫一扫，我的项目是最后完成跳转页面

上面的代码是最终版，但是之前在写的时候页遇到过问题，花费了我大半天时间去找错

第一个错误，如

image

这个错误也就是config参数全是undefined，但是后端接口又返回参数了的，怎么回事嘞，仔细检查，结果是后端返回的参数是json字符串，结果转化一哈就好了

image

上一个问题解决了，又来新问题了，也就是控制台正常打印wx.config begin 但是wx.config end 无论如何都要报错

image

报错报的是签名无效，然后我也去网上各种找了为啥抱这个错误，但是网上回答的那些，比如

image

上面的这些问题都确定了n边，但还是没解决问题，最后，我发现后端返回的参数 jsApiList的数组里面只有一个，

image

下面使用了两个接口，一个是检查当前客户端支持不支持指定JS接口，另一个就是扫码的JS接口，之前我就是取的后端返回的那一个值，后

来改为写死的两个接口，后面那个在微信的调试工具就不报错了，对了，测试工具的地址栏不能是本地的地址，必须是线上的地址，否则还是要报错

image

但和之前报错不一样了，之前错误码是63002，现在的是40048，线上的地址就不会报错，显示如下

image

最后还有一个小问题，就是在手机上测试的时候，自己看了代码确定不是自己写的alert弹框，但是每一步操作都会弹框，原因是因为，在配置的时候debug的值为true，改为false就好了

image

以上代码亲测可用，有不懂的欢迎下方留言，我们一起研究学习。