震精:小程序中居然可以使用支付宝支付

前言:

微信小程序正常来说只能使用微信支付,但是因为微信支付目前无法使用,所以产生了此需求。

1、我们需要一个正常使用的微信小程序
2、把小程序的主要功能页面复制一套H5页面,并单独写一个支付页面
3、在支付宝开放平台注册支付宝商家商户并配置信息(配置信息这一步一般由后端来做,因为他要根据官方API来写回调接口)
4、H5系统使用和小程序一样的接口API,确保两边的token是一致的可以通用
5、在小程序后台配置webview域名,确保小程序可以跳转到H5页面
6、小程序产生支付行为,把订单预支付接口返回的订单ID传递到webview页面
ini 复制代码
const orderId = res.data.orderId;
        // wx.setStorageSync('payFromId',orderId)
        /* 订单跳转h5支付 */
        wx.navigateTo({
          url: `/pages/payWebview/index?id=${orderId}`,
        })

orderId为预支付接口返回的订单id,将他拼接到小程序中的webview页面

javascript 复制代码
onLoad(options) {
      // let cartId =encodeURIComponent(wx.getStorageSync('payFrom')) 
      // console.log(decodeURIComponent(cartId));
      if(options.id){
        let token = wx.getStorageSync('token')//获取token
        console.log('orderid',options.id); //打印传递的订单id
        console.log('token',token);
        //将订单id和token一块拼接到H5页面的支付页面
        this.setData({
          payUrl:`https://lgtesth5.qtxxkx.com/#/pages/Payment/Payment?id=${options.id}&token=${token}`
        })
      }
    },

以上代码是小程序内的webview页面逻辑

7、H5页面解析网址携带的参数,并发起支付。

H5网页要做以下操作

首先获取当前页面的url路径,并将路径携带的参数解析出来,存token的操作是因为支付完成后要查看订单,这个接口需要验证token。

之后是发起支付宝H5支付 代码如下

因为支付宝网页支付返回的字段是一个html标签。所以我们需要在下个页面进行操作

javascript 复制代码
	onLoad(options) {
		if (options.url) {
			// console.log(options.url);
			// const Form = JSON.parse(decodeURIComponent(options.url));
			const Form = options.url;
			console.log(Form);
			this.formUrl = Form;
			//将接口返回的Form表单显示到页面
			document.querySelector('body').innerHTML = this.formUrl; // body对应上面的class
			this.$nextTick(() => {
				console.log(document.forms, 'form'); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则,可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
				document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
			});
		} else {
			const Form = uni.getStorageSync('Form'); //获取你本地存储的form表单渲染成页面
			console.log(Form);
			this.formUrl = Form;
			//将接口返回的Form表单显示到页面
			document.querySelector('body').innerHTML = this.formUrl; // body对应上面的class
			this.$nextTick(() => {
				console.log(document.forms, 'form'); //跳转之前,可以先打印看看forms,确保后台数据和forms正确,否则,可能会出现一些奇奇怪怪的问题 ╮(╯▽╰)╭
				document.forms['0'].submit(); //重点--这个才是跳转页面的核心,获取第一个表单并提交
			});
		}
	},

结尾:使用此方法的话有一个弊端,小程序端接收不到H5的回调信息,需要刷新页面重新获取数据才可以看到支付结果,而且返回小程序查看小程序页面还是会停留在订单提交页。

相关推荐
用户034187671383 小时前
用秒哒做了个拍照识餐小程序,上线两周踩的 4 个坑
微信小程序
李纲明6 小时前
微信小程序租赁归还说本来就坏或配件对不上:先核借还点验与随单存证,再查差异计价公示
微信小程序·devdiy·租赁点验·借还拍照·随单存证·差异计价·押金释放
李纲明1 天前
微信小程序次卡跨店对不上账或前台随手改余次:先核流水只增不改与统一日切,再查冲正权限与总部只读
微信小程序·devdiy·核销流水·跨店次卡·日切对账·冲正权限·总部只读
李纲明1 天前
微信小程序维修拆机后口头加价或未确认就开工:先核验机快照与报价确认,再查补充报价与取机核验
微信小程序·devdiy·维修验机·报价确认·报价快照·补充报价·取机核验
wx1qq1com1 天前
一桩带几台车:共享租赁桩位配比、取电与结算闭环设计
物联网·微信小程序·小程序
李纲明1 天前
微信小程序场地长租月底对不上或口头占场撞场:先核合约预约与核销流水出账,再查附加费与转租归属
微信小程序·devdiy·场地长租·月结账单·核销流水·附加费·转租归属
2401_879692511 天前
微信小程序照相与摄像功能实现——chooseImage 与 chooseVideo 详解
微信小程序·小程序·notepad++
律宏阔2 天前
微信小程序 + Taro + TDesign 去掉 [&&&],让普通 Tailwind 类接管局部样式
前端·微信小程序·taro
律宏阔2 天前
微信小程序 + Taro + 多语言实现与国际化检查实录
前端·微信小程序·taro
李纲明3 天前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy