微信JS-SDK踩过的那些小坑坑

3,357 阅读5分钟

微信公众平台技术文档链接:mp.weixin.qq.com/wiki?t=reso…

第一步:基本配置

1、服务器配置

url : http://外网IP/wx (http端口80 https 443端口)

示例:http://47.107.21.206/publicity/wx

token : weixin(自主设置必须由英文或数字,长度3-32字符)

2、ip白名单设置

添加服务器出口IP

示例:47.107.81.165

第二步:调用接口

1、根据appid和secret获取token

mp.weixin.qq.com/wiki?t=reso…

2、根据token获取jsapi_ticket

(公众号用于调用微信JS接口的临时票据 由于获取jsapi_ticket的api调用次数非常有限,频繁刷新jsapi_ticket会导致api调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket 。)

3、生成并验证签名

官网示例代码:demo.open.weixin.qq.com/jssdk/sampl…

4、JSSDK使用步骤

第一步:绑定域名

将所给文件放置根目录下(放在路径目录下虽然会配置成功但会出现invalid url domain错误)

示例:publicity.mintechai.com

第二步:引入js文件

res.wx.qq.com/open/js/jwe…

第三步:通过config接口注入权限验证配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表(updateAppMessageShareData,updateTimelineShareData安卓最新版目前不支持这两个接口,ios支持)

});
第四步:通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
   所以如果需要在页面加载时就调用相关接口,

// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
第五步:通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
第六步:在wx.ready中添加所需接口
wx.onMenuShareAppMessage({
      title: '看过这个H5,读懂金融科技最新趋势!', // 分享标题
      desc: '不信你试试', // 分享描述
      link: 'http://publicity.mintechai.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://publicity.mintechai.com/public/imgs/minTech.png', // 分享图标地址必须是绝对路径
      type: '', // 分享类型,music、video或link,不填默认为link
      dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
      success: function () {
         // 用户点击了分享后执行的回调函数
     }
})

具体问题:

1、服务器配置token(只需验证一次)

微信向node服务器发出的请求一直接收不到

解决方法:注掉这两句代码

import history from 'koa2-connect-history-api-fallback'

app.use(history())

原因 : 这是Koa2的一个中间件,用于处理vue-router使用history模式返回index.html,开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,由于是get请求,则默认返回index.html

2、获取access-token时请求跨域的问题

解决方法:使用node做中间层向微信发出请求,再返回给前端

原因:跨域问题针对于浏览器访问,服务器直接请求服务器不会产生跨域问题

3、签名算法的使用

解决方法:写一个接口,将需要的参数传给后端,在后端处理完毕后返回给前端

原因:签名算法的使用引用了一些包,不能直接在前端使用

4、安卓手机最新版本6.7.2点击分享没有反应

解决方法:注掉最新的两个接口,使用旧版本接口

原因:安卓不支持最新的1.4.0接口(updateAppMessageShareData , updateTimelineShareData)ios支持

5、二次分享失败

原因:分享之后,微信会在原有地址上拼接,和设置的安全域名不同

解决方法:通过判断当前地址是否和设置的域名相同来改变当前地址

6、invalid url domain

解决方法:绑定的域名和url保持一致

7、invalid signature

解决方法:

1.确定签名算法正确 可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验
2.确定url和当前页面的location.href.split('#')[0])一致
3.确保获取签名的url是动态获取的,用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
4.可用微信开发者工具查看接口的返回信息可能是未将服务器出口IP添加至白名单

8、在iOS和Android都无法分享

(请确认公众号已经认证,只有认证的公众号才具有分享相关接口权限,如果确实已经认证,则要检查监听接口是否在wx.ready回调函数中触发)

JS-SDK说明文档地址:mp.weixin.qq.com/wiki?t=reso…