美文网首页
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