vue2.0接入微信扫一扫sdk

1、安装微信weixin-js-sdk

npm install weixin-js-sdk

ps：微信sdk扫一扫功能只能在微信环境使用

2、在扫一扫页面引入sdk

<template>
  <div class="wxsm">
  </div>
</template>

<script>
import wx from "weixin-js-sdk";
</script>

3、从后端获取需要的数据后调用wx的sdk

ps:必须传入当前页面的url，有【#】的传【#】后的内容

      axios({
        url: "https://xxxxx/jssdk",
        type: "get",
        dataType: "JSON",
        params: {
          url: location.href.split("#")[0],//传入当前页面的url
        },
      }).then((res) => {
        that.resMsg = res.data.data;
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: that.resMsg.appId,
          // 必填，生成签名的时间戳
          timestamp: that.resMsg.timestamp,
          // 必填，生成签名的随机串
          nonceStr: that.resMsg.nonceStr,
          // 必填，签名，见附录1
          signature: that.resMsg.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: ["scanQRCode"],
        });

        wx.error((res) => {
           console.log("获取失败");
        });
        wx.ready(() => {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: (res) => {
               console.log("扫码成功"); // 当needResult 为 1 时，扫码返回的结果
            },
            cancel: () => {
                //扫码失败
            },
          });
        });
      });

vue2.0接入微信扫一扫sdk

猜你喜欢