uniapp实现微信小程序支付（前端）

1.本篇主要是介绍uniapp微信小程序支付以及小程序内置网页跳转H5页面两个方向的微信支付流程

2.微信小程序内微信支付

1. uni.request({
2. url:"请求路径",
3. method:"方法",
4. data:{
5. 后端需要的数据
6. }，
7. success(payRes){
8. //payRes这里主要有几个参数后面会调取uni的支付接口需要使用，下面会介绍每个数据
9. //这个请求结束后就是前端最重要的步骤了，需要拉起支付密码框来完成支付
11. uni.requestPayment({
12. "provider": "wxpay",//支付方式
13. "timeStamp":payRes.data.timeStamp,//时间戳
14. "nonceStr":payRes.data.nonceStr,//随机字符串
15. "package":payRes.data.package,//接口返回的prepay_id
16. "signType":payRes.data.signType,//签名算法，需要与后台下单时一致
17. "paySign":payRes.data.paySign,签名
18. success: function (resSuccess) {
19. //触发该success时已经是输入密码支付成功后触发，可做一些页面跳转和成功提示
20. },
22. fail: function (err) {
23. //支付失败时出发，比如取消支付、余额不足等
24. }
25. });
27. }
28. })

3.小程序内部跳转H5页面进行微信支付

1.H5支付因为是非微信内部的支付，所以需要安装使用微信的JS-SDK包来实现，所以实现写法会有一些改变，但是大同小异。

2.现在控制台输入指令（安装了node.js的情况下，我这里是16.6的版本）npm i jweixin-module -S

3. //web-view
4. <template>
5. <web-view :src="url">web-view>
6. template>
7. <script>
9. export default{
10. data(){
11. return {
12. url:""
13. }
14. }
15. onLoad(option){
16. this.url =decodeURIComponen(option.url)
17. }
19. }
20. script>

5.过程中遇到的问题

1.H5写的微信支付，安卓无法使用，ios没问题，找了半天没找到解决方案