众所周知微信分享前我们要做一些准备工作;
第一步要先配置安全域名
注意:域名前面不用加协议名称,还有域名服务器根目录下要上传公众号提供的文件(配置的每个域名服务器都要上传哦):MP_verify_qoTb3e9VQBlFWzcn.txt
第二步配置IP白名单
微信公众平台出于安全考虑,根据appId和appSecret去获取access_token的时候,只允许白名单的ip去请求获取access_token的接口。配置的地方在
第三步提交公众号认证:
要确认公众号是认证过的,没认证的话,没法拿到分享按钮的点击状态以及自定义分享内容
第四步在页面里引入微信提供的js文件
如下js文件:http://res.wx.qq.com/open/js/jweixin-1.2.0.js
开发阶段:
一:先在后台通过appId和secret去获取access_token(有效期是2小时,记得缓存起来)。
二:拿到access_token之后,去获取JsApiTicket(有效期是2小时,以下简称ticket)。
三:拿到ticket之后根据ticket、分享的url、随机字符串noncestr、时间戳timestamp去生成签名signature、并将signature及noncestr、timestamp、appid返回给前端去初始化wx.config作权限验证。
生成签名的算法文档:
签名生成规则如下:参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分) 。对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。
签名校验工具:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
四:接下来就可以 通过ready接口处理成功验证自定义分享内容及拿到分享的回调(成功或者取消分享)
微信分享出现的常见bug
分享失败的时候,首先开启debug模式
常见的错误是invalid signatrue
1.确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2.确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
3.确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)://’部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分。
4.确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
5.确保一定缓存access_token和jsapi_ticket。
6.确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#’hash部分的链接(可用location.href.split(‘#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
通俗讲三种:
1.传给后台的url问题:var url = encodeURIComponent(location.href.split(‘#’)[0]);
2.config中nonceStr字段的写法
3.appid的错误,必须跟你的js授权地址对应的公众号appid