H5：微信分享接入及避坑记录

前言

项目中经常有这样的需求，某个页面需要分享到微信好友或朋友圈。在app中，可以通过接入sdk，调用sdk的方法实现分享。在H5中实现微信分享也是需要借助sdk。

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力。

不过在接入微信js-sdk之前，类似app注册应用账号一样，需要做些前置的准备工作。

 

此处贴一个微信官方文档链接

微信官方说明文档

 

准备工作

1、绑定安全域名

首先，要现有个认证的公众号，并确保已获得分享的接口权限。

然后登录微信公众平台 ，进行公众号设置 ，功能设置填写js接口安全域名

2、引入JS文件

两种方式：

(1)页面引入JS文件，支持https：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）

(2)npm安装

npm install weixin-js-sdk --save

 

config初始化验证

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

而配置需要的一些参数，例如appId，signature这种比较敏感的数据安全起见都是存于后端的。

所以我们需要在请求后端接口拿到这些配置参数后才开始config验证

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

 

ready接口处理成功验证

wx.ready(function () {
  //分享到朋友圈
  wx.onMenuShareTimeline({
    title: '',
    link: '',
    imgUrl: '',
    success: function () {
      console.log("分享成功");
    },
    cancel: function () {
      console.log("取消分享");
    }
  });
})
wx.ready(function () {
  //分享给朋友
  wx.onMenuShareAppMessage({
    title:'',
    desc: '',
    link: '',
    imgUrl: '',
    type: '',
    dataUrl: '',
    success: function () {
      console.log("分享成功");
    },
    cancel: function () {
      console.log("取消分享");
    }
  });
})

 

error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

 

避坑记录

1、以上的config接口，ready接口，error接口写在一个方法内，并且应在页面渲染完成时就调用。

因为这些接口是异步执行的，在微信中，现在已不支持用户主动触发分享动作。微信内置浏览器中的H5分享，是在config验证通过后，用户点击右上角省略号后，在微信弹窗再进行分享的。

2、如果稍有操作和设置不当，可能在调用config接口时就会报 invalid signature 错误了。

排查步骤如下：

• 公众号已正确配置了安全域名

• 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

• 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。

• 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认)，包括'http(s)://'部分，以及'？'后面的GET参数部分,但不包括'#'hash后面的部分。

• 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

• 确保一定缓存access_token和jsapi_ticket。

• 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。