先来看一下对比效果图

一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

//#ifdef H5
	import wx from '../../common/wx.js';
	//#endif

三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用

share() { 
			// console.log('url:', window.location.href);
			var that = this;
			that.$apiReq.req({ 
				url: '接口',
				data: { 
					// url: 'http://m.v.zhimantian.com/'
					url: window.location.href
				},
				method: 'get',
				success: res => { 
					console.log('分享', res.data);
					wx.config({ 
						debug: false, // true:是调试模式,调试时候弹窗,会打印出日志
						appId: res.data.appId, // 微信appid
						timestamp: res.data.timestamp, // 时间戳
						nonceStr: res.data.noncestr, // 随机字符串
						signature: res.data.signature, // 签名
						jsApiList: [
							// 所有要调用的 API 都要加到这个列表中
							'onMenuShareAppMessage', // 分享到朋友接口
							'onMenuShareTimeline', // 分享到朋友圈接口
							'updateTimelineShareData',
							'updateAppMessageShareData'
						]
					});
					wx.checkJsApi({ 
						jsApiList: [
							// 所有要调用的 API 都要加到这个列表中
							'onMenuShareTimeline', // 分享到朋友圈接口
							'onMenuShareAppMessage', // 分享到朋友接口
							'updateTimelineShareData',
							'updateAppMessageShareData'
						],
						success: function(res) { 
							// alert('checkJsApi:success');
						}
					});

					setTimeout(() => { 
						wx.ready(function() { 
							//需在用户可能点击分享按钮前就先调用
							//分享给朋友
							wx.updateAppMessageShareData({ 
								title: that.mallDetail.zftitle ? that.mallDetail.zftitle : that.mallDetail.title, // 分享标题
								desc: '', // 分享描述
								link: window.location.href + 'id=' + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: that.mallDetail.pic, // 分享图标
								success: function() { 
									// alert('好友分享成功');
									// 设置成功
								},
								fail: function(res) { 
									// console.log('好友失败', res);
									// alert('好友分享失败');
								},
								cancel: function() { 
									// alert('用户取消分享好友');
									// 用户取消分享后执行的回调函数
								}
							});
							//分享到朋友圈
							wx.updateTimelineShareData({ 
								title: that.mallDetail.zftitle ? that.mallDetail.zftitle : that.mallDetail.title, // 分享标题
								desc: '', // 分享描述
								link: window.location.href + 'id=' + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: that.mallDetail.pic, // 分享图标
								success: function(res) { 
									// console.log('朋友圈', res.data);
									// // 设置成功
								},
								fail: function(res) { 
									// console.log('朋友圈失败', res);
									// alert('朋友圈分享失败');
								},
								cancel: function() { 
									// // 用户取消分享后执行的回调函数
								}
							});
						});
						wx.error(function(res) { 
							console.log('error', res);
						});
					}, 500);
				}
			});
		},

onLoad调用分享

onLoad() { 
var that = this;
	//#ifdef H5
		// 判断是否是微信内
		let en = window.navigator.userAgent.toLowerCase();
		// 匹配en中是否含有MicroMessenger字符串
		if (en.match(/MicroMessenger/i) == 'micromessenger') { 
			that.share();
		}
		//#endif
}