uniapp vue2中引入外部网页的h5,通过 web-view进行展示，并且当h5页面中进行点击、输入操作时，能够双向交互 postMessage、Message
test.html页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
margin: 20px auto;
padding: 5px;
background-color: #007aff;
border: 0;
color: #ffffff;
height: 40px;
width: 200px;
}
.btn-red {
background-color: #dd524d;
}
.btn-yellow {
background-color: #f0ad4e;
}
.desc {
padding: 10px;
color: #999999;
}
.post-message-section {
visibility: hidden;
}
</style>
</head>
<body>
<p class="desc">web-view 组件加载网络 html 示例。点击下列按钮，跳转至其它页面。</p>
<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" type="button" data-action="switchTab">switchTab</button>
</div>
<div class="post-message-section">
<p class="desc">网页向应用发送消息，注意：小程序端应用会在此页面后退时接收到消息。</p>
<div class="btn-list">
<label>账户:</label>
<input type="text" name="user" required>
<br>
<label>密码：</label>
<input type="text" name="pwd" required>
<br>
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
// console.log('userAgentuserAgent',userAgent)
if(userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if(/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write(
'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
);
} else if(/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if(/toutiaomicroapp/i.test(userAgent)) {
// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if(/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write(
'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
);
} else if(/quickapp/i.test(userAgent)) {
// quickapp
document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
}
if(!/toutiaomicroapp/i.test(userAgent)) {
document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="uni.webview.1.5.5.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function () {
// uni.postMessage({
// data: {
// // action: 'message11111123',
// user:'zhangchang1111',
// pwd:'1234561111'
// }
// });
// uni.getEnv(function (res) {
// console.log('当前环境111：' + JSON.stringify(res));
// });
// 解析URL参数的函数
function getQuery(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
}
return null;
}
var storage = window.plus.storage;
// 获取本地存储
var yourData = storage.getItem("userInfo");
var parsedData = JSON.parse(yourData);
if(parsedData === null) {
console.log('本地存储为空');
}else {
console.log('Data from storage:', yourData);
var parsedData = JSON.parse(yourData);
document.getElementsByName('user')[0].value = parsedData.data.name;
document.getElementsByName('pwd')[0].value = parsedData.data.pass;
}
// 访问并打印出 name 和 pass
// console.log('Name1111:', parsedData.data.name);
// console.log('Pass22222:', parsedData.data.pass);
// document.getElementsByName('user')[0].value = yourData.data.name || '';
// document.getElementsByName('pwd')[0].value = yourData.data.pass || '';
// document.getElementsByName('user')[0].value = '22222'
// 获取URL中的参数值
let user = getQuery('user');
let pwd = getQuery('pwd');
console.log('URL中的参数值 - 用户名:', user);
console.log('URL中的参数值 - 密码:', pwd);
// document.getElementsByName('user')[0].value = parsedData.data.name;
// document.getElementsByName('pwd')[0].value = parsedData.data.pass;
// document.getElementsByName('user')[0].value = '111'
// document.getElementsByName('pwd')[0].value = '2222';
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/tabBar/API/API'
});
break;
case 'reLaunch':
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/component/button/button'
});
break;
}
}
});
document.getElementById('postMessage').addEventListener('click', function () {
var userValue = document.getElementsByName('user')[0].value;
var pwdValue = document.getElementsByName('pwd')[0].value;
var dataToSend = {
// action: 'message2222',
user: userValue,
pwd: pwdValue
};
uni.postMessage({
// data: {
// action: 'message2222'
// }
data: dataToSend
});
});
// HTML页面中
// window.addEventListener('message', function(event) {
// var data = event.data;
// console.log('接收到的消息：', data);
// // 可以在这里处理接收到的数据，例如将其显示在页面上
// document.getElementsByName('user')[0].value = data.user;
// document.getElementsByName('pwd')[0].value = data.pwd;
// });
});
// document.getElementsByName('user')[0].value = getQuery('data');
</script>
<!-- <script>
function getQuery(name) {
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
if (r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
// 调用函数并输出结果
let paramName = 'name'; // 假设要获取名为'name'的参数值
let paramValue = getQuery(paramName);
console.log(paramName + ": " + paramValue);
</script> -->
</body>
</html>
在uniapp页面中:
<template>
<view class="content">
<navigator url="" open-type="switchTab">
<web-view ref="webview":src="network" @message="message" @onPostMessage="onPostMessage"></web-view>
</navigator>
</view>
</template>
message(event) {
// console.log('event::',event);
console.log('name::', event.detail.data[0].user);
console.log('pass::', event.detail.data[0].pwd);
// 将数据保存到storgae
uni.setStorage({
key:'userInfo',
data: {
'name': event.detail.data[0].user,
'pass': event.detail.data[0].pwd
}
})
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
