h5微信自定义分享

jiezi

6 年前

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

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

在 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

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 不要带有敏感词汇，我们带礼包之类的词汇，竟然被也出现这种情况 …

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

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

h5微信自定义分享

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

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

3、配置 config

参数说明:

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

总结