Vue微信公众号流程开发-论HTML如何变成微信公众号

微信公众号开发笔记

1.微信授权流程

需要有一个微信认证过的微信服务号,还要有一个H5的项目,在此开发过程中代码没有引入任何类库或者js文件,都是用http请求完成操作,如果过程中出现问题,请参考微信官方文档

根据微信公众号APPId获取授权码code
```
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
```
注意:我们的H5必须使用域名代理,且微信不支持带端口,redirect_uri需要在微信公众号后台的授权安全域名中配置(不支持显性域名跳转,可以通过nginx反向代理配置),也是当前前端H5页面域名.

scope 参数官方指定有两种

snsapi_base : 不弹出授权页面，直接跳转，只能获取用户openid

snsapi_userinfo : 弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息

授权码code会在重定向的url后面以参数形式附加,需要手动截取获得,且授权码code只能被正确使用一次

通过code获取用户OpenId和Accesstoken

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

返回结果:

{
  "access_token":"ACCESS_TOKEN",
  "expires_in":7200,
  "refresh_token":"REFRESH_TOKEN",
  "openid":"OPENID",
  "scope":"SCOPE" 
}

注意:access_token有效时间为两小时,如果过期了需要使用refresh_token获取accesstoken,refresh_token有效时间为30天

根据refresh_token换取accesstoken

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

检验accesstoken是否有效

https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

以上拿到授权信息就可以调用微信官方文档中的接口了(比如获取用户头像,微信支付等都需要openid或AccessToken)

2.微信支付流程

本次分享是JSAPI微信支付流程,看完文档后,什么信息都没得到,官方下载的Demo很多链接404基本上得到了一些零碎的信息

以下是整理网上资料后记录的流程

登录微信支付后台服务,配置支付目录,具体如何配置可以网上搜索,很多教程
需要一个后台服务,前端发起请求到后台服务(发起请求),后台服务调用微信统一下单接口验证参数信息是否有效拿到预付订单号
```
https://api.mch.weixin.qq.com/pay/unifiedorder
```
官方文档中写有效调用接口会返回二维码地址,但是观察数据发现没有该字段,分析可能是微信支付后台权限配置问题,本次不深入PC端H5支付

具体参数参考微信支付官方文档
拿到 prepay_id ( 预支付交易会话标识 )后需要进行下一步接口参数的准备,返回给第二步的前端
前端拿到支付请求参数后,准备调用微信js,官方文档专门有写微信内H5网页调用方式,我们所做的就是微信端内H5支付

官方文档提供调用代码如下

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
      } 
   }); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

代码中没有引入任何js文件,微信公众号浏览器已经把这些js文件本身引入了

LuTHEr007

发布了1 篇原创文章 · 获赞 1 · 访问量 16

私信关注

Vue微信公众号流程开发-论HTML如何变成微信公众号

微信公众号开发笔记

1.微信授权流程

2.微信支付流程

猜你喜欢