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

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

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

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

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

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

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

//这里两种引入方式 一种是node的require，还有一种就是常用的import的方式引入 效果都一样const jweixin = require("jweixin ")export default {    data(){        return {        }            },    methods:{        uni.request({            url:"请求路径",            method:"方法",            data:{                后端需要的数据            }，            success(payRes)=>{                 payMent(){                //首先要对jweixin进行初始化配置                jweixin.config({                    debug:false,//是否开启调度模式，开启测试支付时会有弹窗                    appId: payRes.data.appId, // 公众号的唯一标识timestamp: payRes.data.timeStamp, // 生成签名的时间戳nonceStr: payRes.data.nonceStr, // 生成签名的随机串signature: payRes.data.signType, //签名jsApiList: ['chooseWXPay'] // 必填                })                jweixin.chooseWXPay({                timestamp: payRes.data.timeStamp, // 支付签名时间戳nonceStr: payRes.data.nonceStr, // 支付签名随机串，不长于 32 位package: payRes.data.package, // 统一支付接口返回的prepay_id参数值signType: payRes.data.signType, // 签名方式paySign: payRes.data.paySign, // 支付签名                    success(res){                        //成功                    },                    fail(res){                        //失败                    }                })             }                    }        })                   }}

4.小程序如何用内置浏览器跳转其他H5页面

1.小程序内没法直接跳转至某个网页（我没找到），但是可以通过来嵌套H5网页，默认全屏，跳转网址写在src中。

2.我这里的H5页面是有uni生成的，自动生成的H5项目是hash模式，如果我们需要向H5页面传参，在src中写网址的时候就必须带#/，例如：http://192.168.0.1/#/?id=sadas。也可以在manifest.json中将路由模式改为history

3.我把web-view单独写了一个页面，将H5的网址利用路由传参的方式传递个web-view页面（因为需要传入用户信息），受到路由长度的限制，需要先利用encodeURIComponent对格式进行转换，在web-view页面再用decodeURIComponent对传入参数进行解析

//跳转页面export default{    methods:{        goPage(){            uni.navihateTo({                url:`/page/webView/webView?url=${encodeURIComponent（"访问地址"）)}`                    })        }    }        }//web-view    export default{    data(){        return {            url:""        }    }    onLoad(option){        this.url =decodeURIComponen(option.url)    }}

5.过程中遇到的问题

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