微信公众平台技术文档链接: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
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错误)
第二步:引入js文件
第三步:通过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回调函数中触发)