【uniapp】webview的适用及用法
webview传值问题
·
这里因为项目只接触到三种 如果不适用 请移走
官方文档地址
webview
这里没用原生写法 只是使用自己的业务 介意直接点走啦
uniapp 项目 内嵌 uniapp h5页面
uniapp 项目 内嵌 uniapp h5页面
监听回传知识地址 https://blog.csdn.net/weixin_45890564/article/details/129421921
uniappH5 引入webviewjs 报错 解决方法参考地址 https://blog.csdn.net/weixin_45890564/article/details/129421921
在h5项目中 下载webviewjs代码保存至本地 webview1.4.3（用版本号命名方便后续升级） 然后在main.js中引入
//main.js
import uniwebview from './js_sdk/webview1.4.3.js'
然后就可以在全局进行适用 uni.webview.postMessage进行发送消息
我这里是在api.js里 当接口报token失效时触发
const passValueToApp = () => {
console.log('触发了')
uni.webView.postMessage({
data: '12345678',
});
window.onTGAppCallBack = function(res) {
callback && callback(res.data);
};
}
在app项目中
<web-view :src="srcUrl" @message="getMessage"></web-view>
使用 @message 接收
getMessage(e) {
console.log(e, 166)
uni.showToast({
title: e.detail.data,
duration: 1000,
icon: 'none'
});
}
请注意 这个貌似只在真机运行时触发，在pc H5调试是不触发的。
uniapp 项目 内嵌 uniapp html页面
uniapp 项目 内嵌 uniapp html页面
可以直接在html页面引入js在线资源 详见官方文档
官方示例
<html lang="zh-CN">
<head>
...
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uni.webView.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
// uni.webView.navigateTo(...)
});
</script>
</html>
然后就可以在全局进行适用 uni.webview.postMessage进行发送消息
在app项目中
<web-view :src="srcUrl" @message="getMessage"></web-view>
使用 @message 接收
getMessage(e) {
console.log(e, 166)
uni.showToast({
title: e.detail.data,
duration: 1000,
icon: 'none'
});
}
请注意 这个貌似只在真机运行时触发，在pc H5调试是不触发的。
h5与h5的传值
h5与h5的传值
可以直接使用window的方法进行传递 这边在踩坑过程中是可以使用的
window.postMessage() h5 发送 内嵌的页面
window.parent.postMessage(param, "*"); 依照自己的业务使用相应的api
window.addEventListener("message", res=>{
},); h5接收
其他：
使用plus.webview.create(url, id, style, {data:{}})的方法携带参数，并使用uni.postMessage()的方法回传参数
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
1- 0
已为社区贡献5条内容
所有评论(0)