公众号中H5页面分享给好友或朋友圈自定义图片或文字

未做处理的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)实现，可以自行验证。