美文网首页
vue项目 微信公众号调用weixin-js-sdk 实现 微信

vue项目 微信公众号调用weixin-js-sdk 实现 微信

作者: 岁末Zzz | 来源:发表于2019-02-23 13:40 被阅读0次

该方法需引入微信js-sdk ,先npm安装

npm install weixin-js-sdk

html

    <div class="login_div">

        <mt-button id="wxsys" type="primary" v-on:click="sys_click()">{{qsa}}</mt-button>

    </div>


js代码

import wx from 'weixin-js-sdk'

export default {

    data(){

        return {

            qsa:'qwe'

        }

    },

methods : {

    sys_click : function()

    {

        this.qsa = 'qqq'

        this.$axios({

        method: 'post',

        url: 'xxxxxx',

        }).then((res)=>{

            // 认证

        wx.config({

            debug: true, // 开启调试模式,

            appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid

            timestamp: res.timestamp, // 必填,生成签名的时间戳

            nonceStr: res.nonceStr, // 必填,生成签名的随机串

            signature: res.signature,// 必填,签名,见附录1

            jsApiList: ['scanQRCode','checkJsApi'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

        });

        })

    // 错误时

    wx.error(function (res) {

        alert("出错了:" + res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。

    });

    // 成功时

    wx.ready(function () {

        wx.checkJsApi({

            jsApiList: ['scanQRCode'],

            success: function (res) {

            }

        });

            wx.scanQRCode({

                needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,

                scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有

                success: function (res) {

                    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果

                    alert("扫描结果:"+result);

                    window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面

                }

            });

    });

    }

},

created(){

},

mounted(){

}

}

相关文章

网友评论

      本文标题:vue项目 微信公众号调用weixin-js-sdk 实现 微信

      本文链接:https://www.haomeiwen.com/subject/gxqpyqtx.html