美文网首页让前端飞
vue开发微信卡包

vue开发微信卡包

作者: 暖年的咆哮 | 来源:发表于2018-12-20 18:52 被阅读5次

    微信卡包依赖于微信js-sdk;
    在项目中引入weixin-js-sdk,具体版本已经连接可自信查找,
    两种方法引入

    <scripe src='http://res.wx.qq.com/open/js/jweixin-1.4.0.js' type='text/javascript' /script>
    
    npm wx install wexin-js-sdk --save
    

    微信js-sdk的使用

    config配置(此配置可以写在主入口main.js里面,也可以同其他api方法一起封装起来,调用api的时候直接引入就可以)

    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: '', // 必填,公众号的唯一标识
        timestamp: , // 必填,生成签名的时间戳
        nonceStr: '', // 必填,生成签名的随机串
        signature: '',// 必填,签名
        jsApiList: [''] // 必填,需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口,其中关闭浏览器的接口closeWindow(),也需要写在这个列表里面
    });
    wx.ready(function () {//当页面加载完成时就需要调用的一些api需要写在ready里面,例如addCard,分享等。
    
    });
    wx.error(function(res){   //微信api调用失败的回调函数
        console.log(res);
    });
    
    

    这里需要注意的地方debug在上线后要改为false。

                        wx.ready(function(){
                            wx.addCard({
                                cardList: [{
                                    cardId: cardId,
                                    cardExt:JSON.stringify(cardExtJson),//有wx.config返回的一些签名字段构成的json字符串
                                }], // 需要添加的卡券列表
                                success: function (res) {
                                    var cardList = res.cardList; // 添加的卡券列表信息
                                },
                            })
                        });
    

    相关文章

      网友评论

        本文标题:vue开发微信卡包

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