1. 前言

1. 之前写了篇单独的小程序支付
2. 但是问这前端支付的挺多的,所以再来一遍吧
3. 支付是确实用的挺多的 但也确实不难
4. pc 端支付

2. 前后端的支付那些事

1. 其实前端也就调下接口,其他的都是后端改的,😄😄
2. 支付类的必须有营业执照,管控的严,你懂得
3. 支付类功能前期要准备非常多的工作
4. 微信支付流程
5. 蚂蚁金服支付
6. 支付流程可以自己看看,这个事情也无所谓前后端

3.demo是vue3+ H5应用

4.其他浏览器支付

1. 其他浏览器支付
   其他浏览器-支付.jpg
2. 前端提交申请 判断是微信还是其他浏览器
3. params支付参数 接口文档有
4. payApi封装的支付请求,获取后端返回的支付信息
5. 判断是 哪种支付
6. 支付宝返回的是一个网页的html,直接打开就行
7. 微信支付返回的是一个链接,直接打开链接就行
8. 以上2种都会自动弹出支付相关的界面
9. proxy是挂载的全局组件,因为vue3没有this了嘛
10. useStore.userInfo pinia存储的用户信息

5. 微信内置浏览器支付

1. 微信内置浏览器支付
   微信内置浏览器支付.png
2. 接着上面的支付方式判断,进入这个微信内置浏览器支付
3. 判断WeixinJSBridge 是否识别,也就是判断当前是否是微信内置浏览器
4. wxPayData是发起支付请求,后端返回的支付信息
5. 第三方支付使用WeixinJSBridge.invoke()发起支付
6. 得到返回结果
7. 注意这个支付的参数容易出问题,及时看文档

参考资料

小程序支付

微信支付流程

蚂蚁金服支付

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉