场景:
要在别人家的微信公众号内放入我们的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><!-- 接收code的页面 --><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('微信内打开');}