【uniapp】webview的适用及用法

最新推荐文章于 2025-03-22 16:49:55 发布

Wyliss

最新推荐文章于 2025-03-22 16:49:55 发布

阅读量2.8k

点赞数 1

文章标签： uni-app javascript 开发语言

本文链接：https://blog.youkuaiyun.com/YhWyl527/article/details/131243288

版权

这里因为项目只接触到三种如果不适用请移走
官方文档地址
webview
这里没用原生写法只是使用自己的业务介意直接点走啦

uniapp 项目内嵌 uniapp h5页面

uniapp 项目 内嵌 uniapp h5页面
监听回传知识地址 https://blog.youkuaiyun.com/weixin_45890564/article/details/129421921
uniappH5 引入webviewjs 报错 解决方法参考地址 https://blog.youkuaiyun.com/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()的方法回传参数