标签：sdk 自定义 res H5 js 朋友圈 分享 data wx

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

标签：sdk,自定义,res,H5,js,朋友圈,分享,data,wx
来源： https://www.cnblogs.com/yangc6925/p/15556923.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。