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

<script>
//这里两种引入方式 一种是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){
                        //失败
                    }
                })
             }
        
            }
        })
        
       
    }
}

</scrpit>

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

1.小程序内没法直接跳转至某个网页（我没找到），但是可以通过<web-view>来嵌套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对传入参数进行解析

//跳转页面
<script>

export default{
    methods:{
        goPage(){
            uni.navihateTo({
                url:`/page/webView/webView?url=${encodeURIComponent（"访问地址"）)}`
        
            })
        }
    }        
}
</script>

//web-view
<template>
    <web-view :src="url"></web-view>
</template>
<script>

export default{
    data(){
        return {
            url:""
        }
    }
    onLoad(option){
        this.url =decodeURIComponen(option.url)
    }

}
</script>

5.过程中遇到的问题

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