微信端H5配合SDK实现右上角分享

微信分享给好友

微信端想要实现一个邀请绑卡的活动分享页面，需求是微信浏览器右上角分享给好友，可自定义分享链接，分享的描述，分享的图片

引入微信sdk：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

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

步骤二：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载。

// #ifdef H5
var wx = require('jweixin-module')
// #endif

步骤三：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
//其中4个必填项全部需要后端返回

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','hideMenuItems','chooseWXPay'] // 必填，需要使用的JS接口列表
});

步骤四：通过ready接口处理成功验证

wx.ready(function() {
 //updateAppMessageShareData方法苹果不兼容，后来改成即将废弃的onMenuShareAppMessage
 //分享给朋友
 wx.onMenuShareAppMessage({
   title: `邀请绑卡得好礼`, // 分享标题
   desc: that.activityInfo.shareDesc, // 分享描述
   link: encodeURI(
   `${pageLink}#/packageA/pages/bind-card/share-page?shopNick=${shopNick}&PlatformId=${PlatformId}&id=${that.activityId}&inviteClientId=${that.activityInfo.inviteClientId}`
   ), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   imgUrl: that.activityInfo.shareUrl ? that.activityInfo.shareUrl : that.imgConfigUrl + 'record_banner.jpg', // 分享图标
   success: function() {
   console.log('分享成功啦')
   // 设置成功
   }
 })
 //分享朋友圈
 wx.onMenuShareTimeline({
   title: '邀请绑卡得好礼', // 分享标题
   link: encodeURI(
   	`${pageLink}#/packageA/pages/bind-card/share-page?shopNick=${shopNick}&PlatformId=${PlatformId}&id=${that.activityId}&inviteClientId=${that.activityInfo.inviteClientId}`
   ), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
   imgUrl: that.activityInfo.shareUrl ? that.activityInfo.shareUrl : that.imgConfigUrl + 'record_banner.jpg', // 分享图标
   success: function() {
   	// 用户点击了分享后执行的回调函数
   }
 })
})

其中遇到的问题如下：

问题1：当遇到config:invalid url domain 有2种可能：
1.没有配置url。
2.url配置错误。配置url如http://write.blog.csdn.NET/，就要这样配置write.blog.csdn.net。

解决1：让后端去配置：
进入公众账号后，在 “设置 -》公众号设置 -》功能设置 -》js接口安全域名” ，点击右侧的 “设置”，增加上你测试或正式使用的域名就可以了

问题2：苹果ios系统分享不生效有兼容问题，后来发现链接中存在拼接中文店铺名

解决2：用encodeURI()方法将分享的页面链接进行转义可解决