先来看一下对比效果图
一：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res./open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2./open/js/jweixin-1.4.0.js （支持https）。
//#ifdef H5import 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./'url: window.location.href},method: 'get',success: res => {console.log('分享', res.data);wx.config({debug: false, // true:是调试模式,调试时候弹窗,会打印出日志appId: res.data.appId, // 微信appidtimestamp: 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}
