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没问题，找了半天没找到解决方案