h5微信自定义分享

 为了 h5 页面在微信分享效果更好，我们接入了 h5 微信 sdk，下面对接入流程总结。

1、在项目中引用微信的 js-sdk

js-sdk 地址（支持 https）：http://res.wx.qq.com/open/js/… 或者 http://res2.wx.qq.com/open/js…

2、在微信公众平台绑定安全域名

3、配置 config

在 1,2 步操作成功后，进入我们写代码正题，我们需要在入口 js 中配置 config

wx.config({
    debug: true, // 开启调试模式, 调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: '', 
    timestamp: , 
    nonceStr: '', 
    signature: '',
    jsApiList: []});

参数说明:

• appId：公众号的唯一标识，在公众号中可以取到；
• timestamp：生成签名的时间戳
• nonceStr: 生成签名的随机串
• signature: 最后生成的签名
• jsApiList: 需要使用的 JS 接口列表，我们这里是用分享接口，将分享几个 api 接口填进去，例如：[‘updateAppMessageShareData’, ‘updateTimelineShareData’, ‘onMenuShareQQ’]

(备注：出于安全考虑，微信要求开发者必须在服务器端实现签名的逻辑，故 timestamp, nonceStr，signature 可以通过请求自己服务器返回。如果有兴趣了解是如何生成的，如下图 1 所示。)

图 1

4、wx.ready 中配置自定义分享信息

config 配置玩成功后，可以在 wx.ready 回调填写自定义的信息，如下：

 wx.ready(function () {
      wx.onMenuShareQQ({ // 分享 QQ
        title: data.wxTitle, // 分享标题
        link: data.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致且分享的地址不要带端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享图标
        success: function () {
          // 用户确认分享后执行的回调函数
          // alert(e);
        },
        cancel: function () {// 用户取消分享后执行的回调函数}
      });

      wx.updateAppMessageShareData({ // 分享好友
        title: data.wxTitle, // 分享标题
        link: data.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致且分享的地址不要带端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享图标
        type: "", // 分享类型,music、video 或 link，不填默认为 link
        dataUrl: "", // 如果 type 是 music 或 video，则要提供数据链接，默认为空
        success: function (e) {
          // 用户点击了分享后执行的回调函数
          // alert(e);
        }
      });

      wx.onMenuShareTimeline({ // 分享朋友圈
        title: data.wxTitle, // 分享标题
        link: data.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致且分享的地址不要带端口
        desc: data.wxDesc,
        imgUrl: data.wxImg || defaultIcon, // 分享图标
        success: function (e) {
          // 用户点击了分享后执行的回调函数
          // alert(e)
        }
      });
    });

总结

到这一步分享的操作基本就完成了，建议在测试时将 debug 打开，看看分享提示，从而判定是否分享成功。如果不成功，可以参考一下在开发时候遇到的坑。

• 出现 nvalid url domain 提示
  1）检查当前页面所在域名与使用的 appid 没有绑定，请确认正确填写绑定的域名，仅支持 80（http）和 443（https）两个端口，因此不需要填写端口号。
  2）检查生成 signature 是否正确，可以通过签名校验工具来判定后端传过来的 nonceStr、timestamp 与请求后端接口传的地址，与最后签名是否一致。
  3) config 时，nonceStr 记得驼峰写法哦。
• 提示是成功的，但是分享出来图标不见或者 desc 不显示的情况
  1) 分享的地址不要带端口号哦，我们之前带了 3000 端口，造成出现了这种情况。
  2）分享 desc 不要带有敏感词汇，我们带礼包之类的词汇，竟然被也出现这种情况 …

以上是对本次微信分享的总结，如果需要更详细的了解内容，可以从微信官网文档更深入的了解。

参考资料：微信官网文档点击查看