vue 微信公众号开发使用weixin-js-sdk实现分享

vue yekong

vue开发微信公众号页面,需要自定义分享连接。

安装依赖

npm i js-sha1 --save
npm i weixin-js-sdk --save

获取jsapi_ticket并签名

// 获取微信配置
export function getWxconfig(url) {
    getJsapiTicket({}).then(function (res) {
        if (res.code == '200') {
            var jsapi_ticket = JSON.parse(res.data).jsapiTicket;
            var timestamp = Date.parse(new Date()) / 1000
            let sha1 = require('js-sha1');
            var str2 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + api.appid + "&timestamp=" + timestamp + "&url=" + url;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: api.appid, // 必填,公众号的唯一标识
                timestamp: timestamp, // 必填,生成签名的时间戳
                nonceStr: api.appid, // 必填,生成签名的随机串
                signature: sha1(str2.toString()),// 必填,签名
                jsApiList: ['chooseImage', 'uploadImage', 'previewImage', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'chooseWXPay', 'getLocation'], // 必填,需要使用的JS接口列表
            });
            wx.error(function (res) {
                // location.reload();
                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
            });
        }
    })
};

分享

share() {
                var that = this;
                wx.ready(function () {
                    wx.updateAppMessageShareData({
                        title: '分享', // 分享标题
                        desc: '分享', // 分享描述
                        link: api.url + 'reg/reg?forwarderId=' + that.userId + '&targetId=' + that.busId + '&openMode=0', // 分享链接
                        imgUrl: 'https://www.wanjunshijie.com', // 分享图标
                        success: function () {
                            // 设置成功
                        }
                    })
                });
            },
喜欢