未做处理的H5页面分享
处理后的H5页面分享
实现流程:
1.微信公众号--->公众号设置--->JS接口安全域名
2.在components中新建js文件,导入JSSDK文件和撰写分享代码,如下
(1)导入js-sdk
npm 安装 (npm install weixin-js-sdk --save)
引入用var wx = require('weixin-js-sdk');
也可以自己下载最新sdk文件本地直接引入,但需要注意路径
(2)分享代码
//引入js-sdk var wx = require('weixin-js-sdk'); export default { getConfig(infoTitle, infoDesc, infoLink, infoImg) { //自定义分享所需要的参数 getSignature({//从后台获取签名等内容,其中getSignature为本人自己封装请求,可以按需自己修改。 success: (res) => { wx.config({ debug: false, //测试时候用true 能看见wx.config的状态是否是config:ok appId: res.data.data.appId, // 必填,公众号的唯一标识(公众号的APPid) timestamp: res.data.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.data.signature, // 必填,签名 jsApiList: [ 'onMenuShareTimeline', // 分享给好友 'onMenuShareAppMessage', // 分享到朋友圈 'updateAppMessageShareData', // 分享给好友1.4 'updateTimelineShareData' // 分享到朋友圈1.4 ], // 必填,需要使用的JS接口列表 openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] }); wx.ready(function() { var shareData = { title: infoTitle, // 分享标题 desc: infoDesc, // 分享描述 link: infoLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: infoImg, // 分享图标 success: function(res) { } }; //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0) wx.updateAppMessageShareData(shareData); //自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0) wx.updateTimelineShareData(shareData); }) } }); } }
3.在main.js中全局挂载
import wechat from './components/wechat.js' Vue.prototype.wxH5Share = wechat
4.在需要分享页面添加分享内容
let title = '主标题' let infoDesc='副标题' let infoLink = '您的分享链接' let infoImg='你的分享图片' this.wxH5Share.getConfig(title, infoDesc, infoLink, infoImg);
分享到朋友圈功能在里面已经通过wx.updateTimelineShareData(shareData)实现,可以自行验证。