微信公众号调起扫一扫扫码

开发文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

引入js文件

• 方法1：引入 <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
• 方法2：

npm install weixin-js-sd:
/* 使用CommonJs规范引入 */
const wx = require('weixin-js-sdk');

/* 使用ES6模块引入 */
import wx from 'weixin-js-sdk';

点击扫码按钮

bug：url错误需要上传到测试环境，在后台配置接口和页面路径域名为安全域名
bug：扫码默认支持二维码和条形码，但是条形码返回结果会有一些莫名其妙的前缀，需要对结果做处理
bug：IOS 获取签名传递的url必须是项目一打开的首页url，否则会签名无效，安卓可以传递当前页面

scan() {
      // 掉接口，获取所需要的配置参数
      let url = '';
      if (navigator.userAgent.indexOf('iPhone') !== -1) {
        // bug；IOS 获取签名传递的url必须是项目一打开的首页url，否则会签名无效，安卓可以传递当前页面
        url = location.origin + '/';
      } else {
        url = location.href
      }
      // 掉接口，获取所需要的配置参数
      this.$axios
        .get("/stage-api/system/wechat/getWxSign", {
          params: {
            url: encodeURIComponent(url)
          }
        }).then(res => {
          let data = res.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名，见附录1
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });

          wx.ready(() => {
            // 9.1.2 扫描二维码并返回结果
            wx.scanQRCode({
              needResult: 1, // 0 是跳转  1 是返回扫描结果  
              desc: "scanQRCode desc",
              success: (res) => {
              	//条形码返回结果会有一些莫名其妙的前缀，需要对结果做处理
                let code = ''
                if (res.resultStr.includes(',')) {
                  code = res.resultStr.split(',')[1]
                } else {
                  code = res.resultStr
                }
                this.getScan(code) // 拿到结果做进一步处理
              }
            });
          });
          //初始化jsapi接口 状态
          wx.error(function (res) {
            alert("调用微信jsapi返回的状态:" + res.errMsg);
          });
        });
    },