微信公众号支付

1、根据调用后台接口获取支付商户信息需传的参数逐一获取,确保其余所有参数无误,接下来就是获取用户的openId,那么首先需要用户授权,获取code后调用后台接口从而获取openId,其获取方式有两种,可查看微信公众平台开发文档,此处以静默授权为例:

微信公众号支付_第1张图片

授权之后会跳转到回调地址,即上述方法参数(redirect_url),所以此授权方法所在页面不可以是支付业务的页面,需另行在处理支付业务页面之前加一个load页面或是放在支付业务之前的页面,授权后跳转到支付业务的页面获取openId

因业务需求,需要获取用户位置坐标,所以有此方法,有用到的小伙伴可参考高德地图相关的开发文档;在使用时需在页面引入,使用vue的即在index页面引入;若无此需求可忽略此方法,只需在此页面调用引导授权的方法即可

微信公众号支付_第2张图片

2、用户授权后跳转到了回调的页面(也就是支付业务的页面),此时可传入code后调用你们业务后台的接口拿到openId,(toolOpenId)


微信公众号支付_第3张图片
微信公众号支付_第4张图片

3、至此所需传的参数齐备,接下来就是请求支付的商户信息,之后调用微信接口获取签名,在此之前需 import wx from 'weixin-js-sdk ,


微信公众号支付_第5张图片


微信公众号支付_第6张图片
微信公众号支付_第7张图片

至此只要细心就可以正常的出现微信支付窗口,至于图中出现的mui和tool等不明对象大家可以忽略,从图中获取对自己有用的信息,弄明白大致的流程就可以了,有不当的地方也希望大家指正!

你可能感兴趣的:(微信公众号支付)