VUE开发微信网页调用分享功能

微信调用分享方法

• 第一步：引入微信weixin-js-sdk文件
  • npm install weixin-js-sdk

第二步：创建一个wx.jsapi.js文件，全局引入

• wx.jsapi.js中内容大概如下，根据自己需要做出改变：

import wx from "weixin-js-sdk";

export default {

    wxShowMenu: function (jsapi,imgUrl) {

        // let pageurl = encodeURIComponent(window.location.href)

        // // console.log(window.location.href);

        // getWXConfig(pageurl).then(function (res) {
            var getMsg = jsapi;
            wx.config({
                debug: false, //生产环境需要关闭debug模式
                appId: getMsg.appId, //appId通过微信服务号后台查看
                timestamp: getMsg.timestamp, //生成签名的时间戳
                nonceStr: getMsg.nonceStr, //生成签名的随机字符串
                signature: getMsg.signature, //签名
                jsApiList: [
                    //需要调用的JS接口列表
                    "updateAppMessageShareData", //分享给好友
                    "updateTimelineShareData", //分享到朋友圈
                    "onMenuShareTimeline",
                    "onMenuShareAppMessage"
                ]
            });
            wx.ready(function () {
                wx.checkJsApi({
                    jsApiList: [
                        "updateAppMessageShareData",
                        "updateTimelineShareData",
                        "onMenuShareTimeline",
                        "onMenuShareAppMessage"
                    ], //分享到朋友圈,
                    success: function (res) { }
                });
                //分享到朋友圈
                wx.updateTimelineShareData({
                    title: "普天同庆元宵节，我为武汉写花灯", // 分享标题
                    desc: "减少外出的频率，为武汉手写一盏祝福花灯。齐心协力，一定会攻过难关。", //分享描述
                    link: location.href.split("#")[0], // 分享链接
                    imgUrl: imgUrl// 分享图标
                });
                //分享给朋友
                wx.updateAppMessageShareData({
                    title: "普天同庆元宵节，我为武汉写花灯", // 分享标题
                    desc: "减少外出的频率，为武汉手写一盏祝福花灯。齐心协力，一定会攻过难关。", //分享描述
                    link: location.href.split("#")[0], // 分享链接
                    imgUrl: imgUrl// 分享图标
                });
            });
        // });

    }

}

• 然后在main.js中引入

import WXConfig from './router/wx.jsapi' // 微信分享
Vue.prototype.WXConfig = WXConfig;

• 在组件中使用
  • this.WXConfig.wxShowMenu()
  • 可以传递两个参数，第一个是后台发送的APPID和签名等信息，第二个参数为分享所需要的标题，图片等