1500字范文 > h5网页使用微信支付JSAPI(申请微信服务号配置域名获取用户code 配置JSAPI授权目录）

h5网页使用微信支付JSAPI(申请微信服务号配置域名获取用户code 配置JSAPI授权目录）

时间：2021-04-14 19:34:19

场景：

要在别人家的微信公众号内放入我们的h5网页，涉及到支付只能使用JSAPI支付。从一无所有到成功上线的记录……真难

官方链接地址

1. 微信服务号配置

前提：必须要有一个`微信服务号`，而且要完成微信认证需要三百大洋，认证过后，登录后台找到`接口权限`中的`网页授权用户基本信息`

没有微信认证的时候，当前网页授权是未获得。认证人家还得审核给你打电话确认啥的……

1.1 配置授权域名

注意要在你配置的域名比如下放入人家让你下载的txt文件，将下载好的文件放入你的域名下，可以通过/MP_verify_gucIIseQvV9CvXmu.txt访问就可以了，你会看到有一段内容。域名填写：不要写http或者https开头，直接www开头……

1.2 获取APPID

点击左侧的基本配置，点击右侧列表中的称为开发者。在这里获取服务号的appid，这个appid后台需要，前端支付也需要……

微信服务号的配置到此结束，记得如果你要改了你的H5域名，一定要记得回来改掉~。

2. 微信授权具体介绍

前提：需要弄好appid、redirect_url

微信授权官方流程介绍

在网页授权回调的地址中可以获取到用户的code，然后让后台去解析可以得到用户的openid。这个code微信官方在你的授权地址中直接把code发给你了，在你的页面中接收即可。

比如我在访问首页的时候就需要授权拿到code，此处使用的是静默授权。

h5可以直接使用window.location.href=‘链接地址’。授权获取code。

redirect_uri授权回调的页面需要urlEncode编码，比如授权回调页是/index.html

根据这个链接，直接可以测试了，填写好服务号的appid和刚刚encode后的url

最后生成的链接这个样子

https://open./connect/oauth2/authorize?appid=你的APPID&redirect_uri=https%3A%2F%%2Findex.html&response_type=code&scope=SCOPE&state=STATE#wechat_redirect如果都配置好了，可以在微信内打开你生成的链接试下，成功会自动跳转到你的授权回调页面。在你授权回调的页面内比如/index.html接收当前code测试下。

/index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="/jquery-3.1.1.min.js"></script></head><body>接收的code是<div class="code"></div><script>getParams(name)function getParams(name){var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);//截取?后面的参数console.log(r,'接收的参数是');if(r!=null){return r[2]}}(function(){var code=getParams('code')// var code=getParams('state')$('.code').html(code)})()</script></body></html>

关于授权回调页面的基本配置到这里了就……

3. 前台支付

前提：拿到code后，在确认支付页面，还需要登录微信商户平台配置下`JSAPI`的授权目录，填写你的确认支付页面的`URL`地址。不配置在确认支付的时候会提示你当前url未注册。

比如添加：/pay.html

拿到code发送给后端，他们去解析获取用户openId，然后这里在用户确认支付的时候只需要拿到你需要的一些基本参数即可，然后根据这些基本参数就可以调用onBridgeReady()直接支付了。

稍微注意下package字段中prepay_id这个一定要加，后面的才是你要填写的预支付ID我们后端直接把整个请求参数发我了，直接将参数填上更方便。

这段代码在微信浏览器内才会生效。（测试会比较麻烦点……要在微信内测）

// 调起微信支付function onBridgeReady(data) {WeixinJSBridge.invoke('getBrandWCPayRequest',{appId: '填写你的公众号appid', //公众号ID，由商户传入timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数nonceStr: data.nonceStr, //随机串package: `prepay_id=${data.prepay_id}`, //微信下单返回的支付ID是从后端获得的signType: 'MD5', //微信签名方式：paySign: data.paySign //微信签名},function (res) {if (res.err_msg == 'get_brand_wcpay_request:ok') {// 支付成功了,跳转到成功页面window.open('成功页面地址')} else {// 支付失败了window.open('失败页面地址')}});}

其它:

判断在微信环境内打开（网上找的……）

/* 在微信内打开只能使用JSAPI支付的方式-只有微信支付 */var ua = navigator.userAgent.toLowerCase();var isWeixin = ua.indexOf('micromessenger') != -1;if(isWeixin){console.log('微信内打开');}

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。