vue项目做微信分享功能

安装sdk

npm install weixin-js-sdk --save

方法 1.新建js文件wxapi.js

2.在wxapi.js中引入sdk以及配置一些基本信息(相关的配置内容是后台返的)

3.然后在需要分享的页面引入wxapi.js，调用里面的方法

大概代码如下：

/*** 微信js-sdk* 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115*/
import wx from 'weixin-js-sdk'/**微信分享* @param {Object} option* {title:'',link:location.href.split('#')[0],imgUrl:'',desc:''}*/
export function wxShare(option){let _this = this;this.axios({method:'GET',// url: //获取分享信息的接口}).then((res) => {let data = res;wx.config({debug: false, // 开启调试模式appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名，见附录1jsApiList: ['checkJsApi','updateTimelineShareData','updateAppMessageShareData','onMenuShareQQ','onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2})wx.ready(function(){wx.updateTimelineShareData({title: option.title, // 分享标题link: option.link, // 分享链接imgUrl: option.imgUrl, // 分享图标desc: option.desc, // 分享描述success() {// 用户成功分享后执行的回调函数},cancel() {// 用户取消分享后执行的回调函数}});wx.updateAppMessageShareData({title: option.title, // 分享标题desc: option.desc, // 分享描述link: option.link, // 分享链接imgUrl: option.imgUrl, // 分享图标success() {// 用户成功分享后执行的回调函数},cancel() {// 用户取消分享后执行的回调函数}})})}).catch(() => {});
}

4.在需要分享的页面，如：index.vue

import wxapi from '@/assets/js/wxapi.js';//@/assets/js/wxapi.js为实际路径，根据实际情况修改

5.页面请求完接口之后，调用wxapi.js中的方法(可以写在created中，也可以写在初始化调用的方法据实际项目而定)