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>

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容