调用微信扫一扫

最新推荐文章于 2024-09-30 15:31:18 发布

北凉徐凤年₯㎕

最新推荐文章于 2024-09-30 15:31:18 发布

阅读量392

点赞数 6

文章标签：微信 vue.js javascript

本文链接：https://blog.csdn.net/weixin_44094034/article/details/140316546

版权

前言

提示：vue2项目下在公众号实现扫一扫功能

提示：以下是本篇文章正文内容，下面案例可供参考

一、前往微信公众平台-配置

微信公众平台

二、页面引入脚本

1.引入库

代码如下（示例）：

  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

若一直报错可尝试更换版本、下载至本地引用、调整引入顺序，还不能解决用下面方法

vue2项目（示例）：

npm install weixin-js-sdk --save 安装weixin-js-sdk

import wx from "weixin-js-sdk"

三、代码展示

    // start
    codeClick() { //调用 扫一扫 
      this.scanQRCode();
    },
    
    wxConfig(callback) {
      axios
        .get( "https://gtck.jxlssh.com/api/index/getWxJssdk?token=b17e961e3250c4d5e555a18c922d552a",{params:{}}).then(res => {
          let configData = res.data;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: configData.appid, // 必填，公众号的唯一标识
            timestamp: configData.timestamp, // 必填，生成签名的时间戳
            nonceStr: configData.nonceStr, // 必填，生成签名的随机串
            signature: configData.sign, // 必填，签名
            jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表（扫一扫接口）
          });
          wx.ready(function() {
            wx.checkJsApi({
              jsApiList: ["scanQRCode"], 
              success: function(res) {
                callback(res.checkResult);// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              }
            });
          });
          wx.error(function(res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.info(res);
          });
        }).catch(err => {
          Toast(err);
        });
    },

    wxScanQRCode(callback) {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success(res) {
          if (callback) {
            let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
            callback(result);
          }
        },
        error(err) {
          console.info(err);
        }
      });
    },
    scanQRCode() {
      if (!this.scanQRCodeIsSupport) {
        Toast("该功能仅在微信应用内打开的页面受支持");
        return;
      }
      this.wxScanQRCode(result => {
        if (result) {
          window.location.href = result;
        }
      });
    }

    // end