今天公司有一个用vue写的微信公众号的项目,里面有个1扫一扫,刚开始我看了都蒙蔽了。没接触过,一头雾水,然后在网上查了下,官网需要引入一个js文件`链接如下微信公众号官方文档
但是vue项目所以就在网上找了一个插件,具体步骤如下
1.npm install weixin-js-sdk --save
在main.js文件中引入

import wx from 'weixin-js-sdk'
Vue.prototype.wx = wx`在这里插入代码片`

2.通过config接口注入权限验证配置
这个我放在了created()函数里

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

前往低代码交流专区

更多推荐