微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
作者:编程小石头 发布时间:2023-07-02 05:30:09
前言
小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。
老规矩先看效果。
因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来。
https://v.qq.com/x/page/t0913iprnay.html
原理
先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。
一,定义webview显示h5页面
关于webview的使用,我就不做讲解了,官方文档里写的很清楚,用起来也很简单。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
webview很简单,就是用一个webview组件,显示我们的网页。
二,定义h5页面
我这里启动一个本地服务器,用来展示一个简单的h5页面。
上图是我在浏览器里显示的效果。
接下来我们在小程序的webview里显示这个页面,也很简单,只需要把我们的src定义为我们的本地网页链接就可以了。
这里有一点需要注意
因为我们是本地链接,我们需要到开发者工具里把这一项给勾选。
三,来看下h5页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小程序内嵌webview</title>
<style>
.btn {
font-size: 70px;
color: red;
}
</style>
</head>
<body>
<h1>我是webview里的h5页面</h1>
<a id="desc" class="btn" onclick="jumpPay()">点击支付</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
console.log(location.href);
let payOk = getQueryVariable("payOk");
console.log("payOk", payOk)
if(payOk){//支付成功
document.getElementById('desc').innerText="支持成功"
document.getElementById('desc').style.color="green"
}else{
document.getElementById('desc').innerText="点击支付"
}
//获取url里携带的参数
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
function jumpPay() {
let orderId = Date.now();//这里用当前时间戳做订单号(后面使用你自己真实的订单号)
let money = 1;//订单总金额(单位分)
let payData = {orderId: orderId, money: money};
let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序,所以这里需要转为字符串
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});
// console.log("点击了去支付", url)
console.log("点击了去支付")
}
</script>
</body>
</html>
h5代码这里不做具体讲解,只简单说下。我们就是在点击支付按钮时,用当前时间戳做为订单号(因为订单号要保证唯一),然后传一个订单金额(单位分),这里节约起见,就传1分钱吧,花的是自己的钱,心疼。。。。
关键点说一下
1, 必须引入jweixin,才可以实现h5跳转小程序。
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
2,跳转到小程序页面的方法
const url = `../wePay/wePay?payDataStr=${payDataStr}`;
wx.miniProgram.navigateTo({
url: url
});
这里要和你小程序的页面保持一致。payDataStr是我们携带的参数
四,小程序支付页
来看下我们的小程序支付页
小程序支付页功能很简单,就是来接收我们h5传过订单号和订单金额。然后去调起微信支付,实现支付。支付成功和支付失败都有对应的回调。
支付我们这里实用的小程序云开发来实现的支付,核心代码只有10行。由于支付不是本节的重点,所以这里不做具体讲解。感
兴趣的同学可以去看我写的文章和我录的视频
小程序支付文章:https://www.jianshu.com/p/2b391df055a9
小程序支付视频:https://edu.csdn.net/course/play/25701/310742
下面把小程序接收参数和支付的完整代码贴出来给大家
Page({
//h5传过来的参数
onLoad: function(options) {
console.log("webview传过来的参数", options)
//字符串转对象
let payData = JSON.parse(options.payDataStr)
console.log("orderId", payData.orderId)
let that = this;
wx.cloud.callFunction({
name: "pay",
data: {
orderId: payData.orderId,
money: payData.money
},
success(res) {
console.log("获取成功", res)
that.goPay(res.result);
},
fail(err) {
console.log("获取失败", err)
}
})
},
//微信支付
goPay(payData) {
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: 'MD5',
paySign: payData.paySign,
success(res) {
console.log("支付成功", res)
//你可以在这里支付成功以后,再跳会webview页,并把支付成功状态传回去
wx.navigateTo({
url: '../webview/webview?payOk=true',
})
},
fail(res) {
console.log("支付失败", res)
}
})
}
})
代码里注释很清楚,这里有一点,就是我们支付成功后,需要告诉h5我们支付成功了,通知h5去刷新订单或者支付状态。
到这里我们就完整的实现了小程序webview展示h5页面,并且做到了h5和小程序的交互,实现了小程序webview的支付功能。
是不是很简单呢。
源码地址
https://github.com/qiushi123/xiaochengxu_demos
来源:https://www.jianshu.com/p/d9bdceb2f648
猜你喜欢
- 数据库相关错误的解决办法错误一:数据库连接池超过限制SqlAlchemy QueuePool limit overflow造成连接数超过数据
- 大部分面向对象的编程语言(除了C++)都只支持单继承,而不支持多继承,为什么呢?因为多继承不仅增加编程复杂度,而且容易导致莫名其妙的错误。P
- 一、router-link路由导航方式传参父组件:<router-link to="/跳转到的路径/传入的参数"&
- 在处理numpy数组,有这个需求,故写下此文:使用np.argwhere和np.all来查找索引。要使用np.delete删除它们。示例1i
- 假如有一个数据表A:id name title
- 对于跟我一样,自学javascript且没有其他语言学习经验的人来说,一开始的时候,javascript的调试也是一个比较大的难点,很多基础
- 1. 函数式编程概述1.1. 什么是函数式编程?函数式编程使用一系列的函数解决问题。函数仅接受输入并产生输出,不包含任何能影响产生输出的内部
- 如下所示:alist=[1,2]] >>>[1,2] alist.append([3,4]) >>>[1
- 一.运行效果先说两句,之前我在网上找的相关文章标题上写的是处理多连接,尼玛,全是假的。网上那些,根本不能异步处理多连接,不能主动给客户端发消
- 我就废话不多说了,直接上代码吧!# -*- coding: utf-8 -*-import pandas as pdimport matpl
- 1. 写在前面今天整理OpenCV入门的第三个实战小项目,前面的两篇文章整理了信用卡数字识别以及文档OCR扫描, 大部分用到的是OpenCV
- 背景在本地开发vue项目的时候,当你习惯了proxyTable解决本地跨域的问题,切换到nuxt的时候,你会发现,添加了proxyTable
- 题目:轮盘分为三部分: 一等奖, 二等奖和三等奖;轮盘转的时候是随机的,如果范围在[0,0.08)之间,代表一等奖,如果范围在[0.08,0
- python提供了大量的库,可以非常方便的进行各种操作,现在把python中实现读写csv文件的方法使用程序的方式呈现出来。在编写pytho
- 1. 引言在Python相关代码中,我们经常会遇到如下代码段:# stuffif __name__ == "__main__&qu
- 一、 前期准备1. 设置GPU如果设备上支持GPU就使用GPU,否则使用CPUimport torchimport torch.nn as
- win10,直接使用 pip install tesserocr 的命令如果输出如下错误提示:tesserocr.cpp(596): fat
- 这篇文章主要介绍了python多进程并发demo实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的
- 在caffe中,如果使用的是c++接口,均值文件默认为.binaryproto格式,而如果使用的是python接口,均值文件默认的是nump
- python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径。下面将具体介绍几种常用情况:(1)主程序