关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案
最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中,结果没实现......(很多的 js 代码在小程序中不识别)。
最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题
官方中有一篇文章详细介绍了 在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯的方法、但是似乎是 H5 向 uni-app 进行发送数据、并没有介绍 uni-app 如何发送数据到 H5,
那么 uni-app 如何发送数据到 H5? 其实很简单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中:
<template>
<view>
<web-view :webview-styles="webviewStyles" :src="url" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
},
url: 'https://domain?data=' + '我是向H5发送的数据'
}
},
onLoad(options) {
if (options && options.url) {
this.url = options.url;
}
},
methods: {
}
}
</script>
那么在 H5 中是如何接收值得呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>uni-app-web-view</title>
</head>
<body>
<div class="btn-list">
<button class="btn" type="button" data-action="navigateTo">navigateTo</button>
<button class="btn" type="button" data-action="redirectTo">redirectTo</button>
<button class="btn" type="button" data-action="navigateBack">navigateBack</button>
<button class="btn" type="button" data-action="reLaunch">reLaunch</button>
<button class="btn btn-red" type="button" data-action="switchTab">switchTab</button>
<button class="btn btn-yellow" type="button" data-action="postMessage">postMessage</button>
<button class="btn btn-yellow" type="button" data-action="getEnv">getEnv</button>
</div>
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
document.querySelector('.btn-list').addEventListener('click', function(evt) {
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
switch (action) {
case 'switchTab':
uni.switchTab({
url: '/pages/index/index'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
case 'postMessage':
uni.postMessage({
data: {
action: getQuery('data'),
}
});
break;
case 'getEnv':
uni.getEnv(function(res) {
alert('当前环境:' + JSON.stringify(res));
});
break;
default:
uni[action]({
url: '/pages/editImg/editImg'
});
break;
}
}
});
});
console.log(getQuery('data')); //获取 uni-app 传来的值
function getQuery(name) {
// 正则:[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if(r != null) {
// 对参数值进行解码
return unescape(r[2]);
}
return null;
}
</script>
</body>
</html>
以上 Html 文件 包含 页面跳转、接收 uni-app 的传值、以及发送数据到 uni-app 等
关于 web-view 如何使用就不过多介绍了、官网文章很详细
关于极客返利
极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。
版权许可
本作品采用 知识共享署名 4.0 国际许可协议 进行许可。转载无需与我联系,但须注明出处,注明文章来源 关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案