小程序支持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跳转小程序。

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

小程序webview内网页实现微信支付相关推荐

微信里嵌入html5页面,微信小程序web-view嵌套H5实现微信支付功能解决方案
一. 产品现状首先,在接入微信支付功能以前,我们的产品情况是这样的: 1 有公众号和app的h5站点及相关配套功能 2 小程序已经有一些基础功能,这些功能没有使用web-view 3 小程序之前的服 ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序云开发如何实现微信支付，业务逻辑又怎样才算可靠
今天打了几把永劫无间后,咱们来聊一聊用云开发来开发微信小程序时,如何实现微信支付,并且保证业务逻辑可靠. 目录注册微信支付商户号小程序关联商户号业务逻辑代码实现注册微信支付商户号点击&qu ...
微信小程序使用云开发实现微信支付功能报错Error: 签名错误，史上最全解决办法，不服留言骂我
报错背景微信小程序使用云开发实现微信支付功能,但是报错了报错信息报错原因小程序想要使用微信支付,必须满足下面几个条件的 1,必须是非个人小程序(个人小程序用不了支付) 企业小程序需要认证! 2 ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
h5是可以一键打包小程序的_H5手机网站封装打包微信小程序并实现分享及微信支付...
手机网站打包小程序教程,生成小程序,网页版小程序打包微信小程序,H5封装成微信小程序. 微信小程序开发一般分为2种方式,一种就是原生开发小程序,一种是将手机网站打包成小程序. 原生开发小程序成本较 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...

小程序webview内网页实现微信支付