uni-app支付宝小程序内嵌webview通信uni-app H5项目的解决方案

武飞扬头像

shmilynn_

2024-04-24 帮助1人

需求前提：

我们在uniapp小程序中内嵌了web-view的一个h5的页面，当点击h5中某个按钮的时候，需要传递参数数据在小程序中接收到，下面是实现方法

在项目h5中的配置如下：

因为uni官方文档对于webview通信的应用是在原生h5中进行的

所以我们在h5项目文件中新建一个html页面，并且在manifest.json中的web配置中应用该html 学新通

shops.html页面代码如下（注意需要使用我代码中的html结构，否则可能导致样式丢失的问题

不管是不是uni项目h5中都需要引入uni的SDK。

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS
.supports(
'top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'
(coverSupport ? ', viewport-fit=cover' : '') '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
</body>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' '>' '<' '/' 'script>');
}
</script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境：' JSON.stringify(res));
});
});
</script>
</html>

学新通

我们修改了默认模版需要重新跑一下项目，跑完之后若log出当前环境，则说明uni引入成功，

学新通

然后我们只需要的页面调用api进行参数传递就可以了

（注意官方文档是错误写法，我们需要调用uni.webView方法）

uni.webView.postMessage({
data: {
action: '点击了H5传递的数据'
}
})

比如我在项目中@click点击事件触发payfn方法进行参数传递支付宝小程序

学新通

到此为止h5的前置引入已经完成，下面是支付宝小程序的写法

在这个部分我们可以按照官网的写法，只需要监听message事件就可以了，支付宝代码如图所示

学新通

<template>
<view>
<web-view :src="url" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: 'http://localhost:8080/#/'
}
},
methods: {
//h5传惨监听事件
message(e) {
console.log(e.detail.data);
},
},
}
</script>

学新通

学新通

此时我们就可以拿到h5传递回的数据进行逻辑的编写了。

在测试的时候我们可以关闭支付宝对于webview和域名的校验，这样只需要跑一下内置的服务就可以了。生产的时候需要配置好域名对应。

学新通

学新通

至于支付宝小程序webview向h5传参比较简单

只需要在路径中拼接参数，在h5中onload生命周期钩子中就可以拿到了。

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhgfahbb

系列文章

同类精品