h5微信f分享链接给对方获取对方手机号_微信支付前后端流程整理(Vue+Node)

今天是2020.5.22 周五 湖北 晴 30°C

最近有不少同学希望我能够把微信支付的前后端流程整理一下，"虽然买了课程，依然看的比较晕"。

实际上，我再2019年下半年出了一门微信支付的专项课程，包含微信授权登录、手机号授权、微信分享、微信支付等众多功能，前端分别基于微信公众号H5、微信小程序和微信小程序云开发，后端基于Node，整体来讲体量还是比较大。

课程链接：慕课支付专项课程

实际上支付的所有流程再微信开发文档上面都有，我们依然是基于公司的支付需求结合开发文档，把自身的经验传授给大家。看不懂、看不明白，再我看来主要还是工作经验偏少，自学能力缺乏的表现。

今天借这个机会，把微信支付流程做汇总。

支付分享整体流程

对于微信授权分享、支付来说，大部分的功能都还是再后端，前端比较简单。

JSSDK

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通俗的讲，但凡你用到微信分享、扫一扫、卡券、支付、录音、拍照、位置等等所有功能，都要基于JS-SDK进行开发。

准备工作

• 微信支付需要注册服务号
• 微信支付需要开通对公账户(注册公司)
• 公众平台需要配置域名
  • 业务域名：调用的接口对应的域名
  • 安全域名：前端访问的H5域名
  • 授权域名：用户授权回调的域名，通常跟H5是同一个域名
• 辅助文档
• 绑定微信开发者
• 开通微信认证(每年认证费300)

授权方式解说

当我们第一次访问线上的H5页面时，由于要调用微信分享、支付等功能，就必须先获取到用户的openId，而openId就必须先做微信授权。

• 静默授权 用户访问H5自动跳转到微信那边获取到openId后，自动跳转回来，这个过程用户无感知。
• 非静默授权 用户访问H5自动跳转到微信授权页面，手动点击同意(允许微信把个人信息提供给当前H5网站)，微信会拼接一个code到回调地址上，进而根据code获取到openID等信息。

官方网页授权流程

• 跳转微信授权，获取code

  引导用户打开https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect进行网页授权，点击同意后，微信会拼接code到redirect_uri里面去。

• 通过code换取网页授权access_token

• 刷新access_token(如果需要)

• 拉取用户信息(需scope为 snsapi_userinfo)<