在Vue4.0开发微信公众号的时候，需要做微信分享功能。这个功能其实还算简单，具体的思路如下：

1.安装微信JSSDK和Axios(axios是http请求插件)

2.向后台请求微信配置参数

3.初始化微信分享配置API

4.需要分享的地方引用配置

那么现在来实现：

安装插件：

yarn add weixin-js-sdk

yarn add axios

安装好插件之后，创建一个weixinApi.js文件，添加如下代码：

import wx from 'weixin-js-sdk';

import Axios from "axios";

const ShareImpl = function (option) {

//option是分享的配置内容*/

const url = window.location.href.split("#")[0];

window.console.log(url, JSON.stringify(option));

Axios.get('获取参数配置路径', {

params: {url}

}).then((response) => {

wx.config({

debug: false,

appId: response.data.AppId,

timestamp: response.data.Timestamp,

nonceStr: response.data.NonceStr,

signature: response.data.Signature,

jsApiList: [

'updateAppMessageShareData',

'updateTimelineShareData',

]

});

}).catch(error => {

window.console.log(error);

});

wx.ready(function () {

wx.updateAppMessageShareData({

title: option.shareTitle,

desc: option.shareDesc,

link: option.shareUrl,

imgUrl: option.shareImg

});

wx.updateTimelineShareData({

title: option.shareTitle,

desc: option.shareDesc,

link: option.shareUrl,

imgUrl: option.shareImg,

});

})

/*}*/

}

export {ShareImpl}

然后在main.js中引用该配置：

let url = window.location.href.split("#")[0];

if(url.indexOf('from') != -1){

url = window.location.href.split("?")[0];

}

window.console.log(url + 'favicon.png');

ShareImpl({

shareTitle: '深圳XXX',

shareDesc: '让AIXXXXXXX',

shareUrl: url,

shareImg: url + 'favicon.png',

});

分享的路径是整个域下的路径，比如 ：http://xxx.xxxx.com/xxxx/,没有根据路由参数来配置。

完成上述操作之后，就可以在全局都用到分享功能了。

标签：Vue,option,url,微信,window,分享,wx

来源： https://www.cnblogs.com/liao123/p/12175084.html