公众号的微信JS接口是什么意思?

JavaScript024

公众号的微信JS接口是什么意思?,第1张

公众号的微信JS接口是为了识别用户,每个用户针对每个公众号会产生一个安全的OpenID,如果需要在多公众号、移动应用之间做用户共通,则需前往微信开放平台,将这些公众号和应用绑定到一个开放平台账号下,绑定后,一个用户虽然对多个公众号和应用有多个不同的OpenID,但他对所有这些同一开放平台账号下的公众号和应用,只有一个UnionID,可以在用户管理-获取用户基本信息(UnionID机制)文档了解详情。微信公众号是开发者或商家在微信公众平台上申请的应用账号,该帐号与QQ账号互通,通过公众号,商家可在微信平台上实现和特定群体的文字、图片、语音、视频的全方位沟通、互动 。形成了一种主流的线上线下微信互动营销方式。

本篇为 JS交互微信系列篇 的第四篇 微信JSAPI支付 ,记录在微信内置浏览器内用调用微信支付过程。

JSAPI支付是用户在微信中打开商户的H5页面,商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。

要拥有两个账号:

要开通产品中心的JSAPI支付。然后 产品中心=>开发配置=>支付配置=>公众号支付配置 绑定支付授权目录,写已通过ICP备案的域名。

另外,要在ip白名单中,配置测试地址ip和线上生产地址ip,不然各种回调都会失败!

由于在微信内支付需要获取用户的 openid ,要获取它则必须通过网页授权配置。在公微信公众平台中, 公众号设置=>功能设置=>网页授权域名 中按要求填写。

在支付流程方面,重点依然都在后端处理,前端方面步骤比较简单。本文只叙述前端内容。

在将要进入支付的前一页面,直接接入微信授权,然后跳转进要支付的那个页面。举个例子:有a、b两个页面,在b页面用到支付,b页面由a页面跳转而来。那么在a页面跳b页面的时候,别直接跳转b的url,而是跳转到:

https://open.weixin.qq.com/connect/oauth2/authorize?appid={appId}&redirect_uri={b.html}&response_type=code&scope=snsapi_base#wechat_redirect

我们注意到,这里有这两个需要自己写的参数: appid 和 redirect_uri ,意义是:

另外,还有一个注意的点是, b.html这个url我们要进行encode转码,不然地址解析可能会出现问题!

上一步执行完后,在微信浏览器中,我们会得到一个链接,类似:

b.html?&code={code}&state=#/

在此处,我们得到了一个code值,这就是我们获取 openid 的凭证了。

获取方法当然是把值传给后台,后台去处理啦~

在上一步中,我们拿到code值后,就可以提交一些信息给后端了,比如商品相关属性、总价等,另外加上code值,传给后端。后端一顿操作后,返回给前端。我们需要的参数如下(后端返回下面这些参数):

上个步骤拿到需要交互微信的参数后,就开始调用微信的支付接口了,如下:

至此,调用微信JSAPI来完成在微信内的支付就完成了。