vue调用微信扫一扫(扫码)

关于vue调用微信扫描二维码的功能采坑总结。引入js-sdk的一个大坑。
什么都不说，先上一个坑点图。

超级大坑

大家都知道，调用微信的功能需要配置js-sdk，我昨天看了一天的文档，还是没能在vue项目里调起微信扫一扫的功能。查了半天才发现，针对vue项目，官方推出了一个名为"weixin-jsapi"的插件。而在官网上只说了让我们引入一个“weixin-js-sdk”的插件，然鹅···这个插件在vue项目里是各种报错。一般会报"wx of undefinde"~~~然后就是"config of undefined"~~~

记住！！！记住！！！记住！！！

如果你的项目是vue项目，请安装："weixin-jsapi"

// 下载安装命令
npm install weixin-jsapi --save
// 在man.js中引入 weixin-jsapi
import wx from "weixin-jsapi"; 
// 在man.js中注册 weixin-jsapi
Vue.prototype.wx = wx

具体业务代码：

<script>
// vue 专用版本JS-SDK
import wx from "weixin-jsapi";
export default {
  data() {
    return {};
  },
  mounted() {
    // 页面加载完成唤醒微信扫一扫
    this.wxScanCode();
  },
  methods: {
    wxScanCode() {
      $.ajax({
        type: "POST",
        url: "后端提供的接口",
        data: {
          url: window.location.href.split("#")[0] // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
        },
        dataType: "json",
        success: function(result) {
          console.log("result", result);
          // 后端返回的参数
          var timestamp = result.timestamp;
          var noncestr = result.nonceStr;
          var signature = result.signature;
          var appId = result.appId;
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: noncestr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: [
              "checkJsApi",
              "onMenuShareTimeline",
              "onMenuShareAppMessage",
              "onMenuShareQQ",
              "onMenuShareWeibo",
              "hideMenuItems",
              "showMenuItems",
              "hideAllNonBaseMenuItem",
              "showAllNonBaseMenuItem",
              "translateVoice",
              "startRecord",
              "stopRecord",
              "onRecordEnd",
              "playVoice",
              "pauseVoice",
              "stopVoice",
              "uploadVoice",
              "downloadVoice",
              "chooseImage",
              "previewImage",
              "uploadImage",
              "downloadImage",
              "getNetworkType",
              "openLocation",
              "getLocation",
              "hideOptionMenu",
              "showOptionMenu",
              "closeWindow",
              "scanQRCode",
              "chooseWXPay",
              "openProductSpecificView",
              "addCard",
              "chooseCard",
              "openCard"
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function() {
            wx.scanQRCode({
              needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
              success: function(res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                // alert(result);
                // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
                // sessionStorage.setItem('saomiao_result',result);
                //其它网页调用二维码扫描结果：
                // var result = sessionStorage.getItem("saomiao_result");
                console.log(result);
              },
              error: function(res) {
                console.log(res);
              }
            });
          });
        }
      });
    }
  }
};
</script>

我的扫码界面比较简单，当用户进入到这个界面就立即打开扫码，扫码完成立即跳转到商品详情页面。
最后，真心再怼一次微信公众平台的文档····文档真心不详细，坑很多！！！！