uniapp解决app端不能用＜web-view＞将外部页面嵌入当前页面的问题

原创 已于 2024-08-26 15:31:55 修改 · 2.3k 阅读 · 21 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #前端

于 2024-08-26 15:31:47 首次发布

uniapp解决app端不能用将外部页面嵌入当前页面的问题

参考资料

android项目嵌套uniapp页面及交互 uniapp嵌套h5页面

代码（兼容h5与app）

父页面

<template>
	<view class="contract view-container">
		<view class="contract-box f-s-s">
			// #ifdef H5
			<scroll-view :scroll-y="true" class="scroll">
				<web-view src="XXX">
				</web-view>
			</scroll-view>
			// #endif
			// #ifdef APP-PLUS
			<Content :url="XXX"
				:paddingTop="57.65" :paddingBottom="16.75" :paddingLeft="16.75" :paddingRight="16.75"></Content>
			// #endif
		</view>
	</view>
</template>

<script setup lang="ts">
	import Content from './content.vue'
</script>

<style lang="scss" scoped>
	.contract {
     
     
		position: relative;
		height: 100vh;
		padding: 57.65rpx 16.75rpx 16.75rpx;

		&:before {
     
     
			position: absolute;
			left: 0;
			top: 0;
			content: '';
			width: 100%;
			height:
最低0.47元/天 解锁文章

新学期VIP享超值加赠
【uniapp】网页嵌入手机App，并打包安装到电视上
coderYYY的博客
07-01 178
最近做了一个Vue大屏可视化项目，原本计划是在电视上用网页打开，但是由于各种原因，最后只能用app原先已经用Vue开发好，如果改技术栈肯定很麻烦，时间也来不及，所以最好的方式肯定就是直接把原先做好的网页嵌入app里面。
uniapp 用web-view 嵌套uniapp
qq_36158551的博客
03-27 1605
uniapp开发的APP要嵌套uniapp开发的h5,并且APP后面还要打包H5,这就涉及app和h5之间的通信,h5和h5之间的通信。
uni-app web-view内嵌网页
zhcinit0的博客
06-06 9340
内嵌网页 应用与网页间的通信 在使用uni-app开发的app应用里内嵌非应用内的静态文件的网页，相互通信分两种情况 首先附上uni-app web-view官网链接web-view介绍 1、网页向应用传值 应用中监听 web-view 的 message 事件 <template> <view> <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage
uniwebview内嵌网页
10-24
uniwebview2.2.1内嵌网页，手机端，
uniapp实现内嵌其他网页的功能
weixin_46521165的博客
06-15 1643
【代码】uniapp实现内嵌其他网页的功能。
uniapp开发嵌入外部链接地址
Xiaowanzi1998的博客
11-15 1538
使用UniAp使用UniApp 开发嵌入外部链接地址。使用web-view 组件安卓手机头部被顶上刘海屏了问题解决
uni-app中web-view
qq_35191010的博客
04-20 1900
uni-app中的web-view
【uniapp】uniapp的App端web-view加载本地html
bs521521的博客
01-16 8280
H5内嵌H5,App内嵌H5通讯问题
uniapp 用web-view嵌套网页地址并传参
Jasmin博客
01-24 1403
小程序登陆后把token和openId 传到网页地址
微信小程序：利用web-view方式嵌入h5页面，产生的微信双导航兼容及分享问题
weixin_34306676的博客
07-22 2752
公司要求微信小程序快速开发，时间就给了3天， 实在是来不及了。所以用了微信小程序的壳子嵌入H5的方式开发。利用了最新的方式web-view的方式将内容src嵌入。目前遇到双头的问题，我想把微信小程序头部隐藏，然后在app.json的window定义"navigationStyle": "custom"，将头部隐藏了。但是遇到的问题是头部与微信的胶囊不匹配。 遇到问题：微信导航自定义问题：自定义导航...
在uniapp开发的微信小程序中使用web-view嵌入h5页面
qq_57477371的博客
05-19 609
比如你在小程序端 a 页面想跳转到 h5端的 c 页面，那你需要先从小程序a页面跳到 小程序的这个web-view页面(b页面)，然后在这个b页面设置跳转h5页面的url路径。（2）想要从小程序端跳转h5页面，必须在小程序开发平台将h5页面的域名，添加到。web-view 业务域名白名单。（1）这个页面相当于是起中间桥梁作用。在小程序端准备一个页面，跳转到h5页面。
uniapp webview全屏
weixin_43315721的博客
08-12 2847
// #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function() { let wv = curr
【工作实践-06】uniapp使用webView
weixin_49491274的博客
03-01 7434
利用节点信息减去其他内容的高度，得到webview的高度，this.scope.scope.scope.getAppWebview()获取webview实例（只能app使用），再修改实例setStyle设置。其次网页向应用 postMessage 需要通过 wv.evalJS(``)方法，在此方法中利用uniapp的postMessage()方法向应用发送消息。在初始化webview时，需要引入webview.js文件和添加的搭桥 js (post.js)文件。这样写在安卓端没有问题，运行很顺利，但是在。
uni-app实现web-view和App之间的相互通信
徐同保的专栏
09-11 1744
uni-app实现web-view和App之间的相互通信
uniapp页面嵌套其他页面的实现
2401_82752568的博客
03-24 1530
类似于一个drawer，当主页面加载的时候会一并加载url对应的组件，当点击后以drawer形式显示组件里面的内容，可动画。gap15px;
uniapp 携带网址跳转webview页面报错解决
weixin_59685936的博客
09-11 970
uniapp 携带网址跳转webview页面报错解决
uniapp项目嵌入其他web页面
qq_68155756的博客
04-21 2239
-- 这个h5页面不可以是本地的页面。自己写的h5页面放到服务器上也好，跳到其他官网也好，总之不能是本地地址-- 一、新建一个页面，可以给web-view设置宽高； 二、并在pages.json中配置好路径； 三、跳转此页面
uniapp 如何嵌套H5 页面？
Missbelover的博客
02-22 2859
首先需要安装uni-app的依赖包，然后创建一个新的页面（比如名为"WebPage.vue"）作为容器页面，并将其放置于pages目录下。各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url。是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。当点击进入到WebPage页面时，会自动加载指定的H5页面内容。最后，在manifest.json文件中注册这个页面，确保能正常打开。
uni中的web-view
10-23 653
1、uni-app中web-view打不开页面 （1）要求是放在指定的目录下的 （2）弹窗的弹出层是有时候会遮住的，iframe又不能很好的查看到，所以你直接在你写的页面上展示，别在弹出层上展示看看
uniapp web-view 通信
最新发布
05-15
### UniApp 中实现与 `web-view` 组件的通信 在 UniApp 开发中，`web-view` 是用于加载外部网页的一个重要组件。为了实现在原生应用与嵌入的网页之间进行数据交互，可以利用 `postMessage` 和 `message` 事件来完成双向通信。 #### 1. 应用向网页发送消息 通过调用 `uni.postMessage(OBJECT)` 方法，可以从宿主环境（即 UniApp 的页面）向嵌套的 `web-view` 页面传递数据[^2]。以下是具体实现方式： ```javascript // 宿主页面 JavaScript 部分 onLoad() { setTimeout(() => { uni.postMessage({ data: { message: '来自UniApp的消息' } }); }, 3000); // 延迟三秒发送消息以便观察效果 } ``` 此代码会在页面加载完成后延迟三秒钟向 `web-view` 加载的内容发送一条消息。 #### 2. 网页接收来自应用的消息 在被加载到 `web-view` 中的目标 HTML 文件里，可以通过监听 `window.addEventListener('message', callback)` 来捕获由 `uni.postMessage()` 发送的数据[^2]。下面是一个简单的例子展示如何处理接收到的信息： ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webview Page</title> <script type="text/javascript"> window.addEventListener('message', function(event) { console.log('Received from app:', event.data); alert(`从APP获取到信息：${JSON.stringify(event.data)}`); }); </script> </head> <body> <h1>Hello, Webview!</h1> </body> </html> ``` 当目标网页成功解析并运行这段脚本之后，它就能够响应任何来自于关联的应用程序所发出的通知了。 #### 3. 网页向应用发送消息 如果需要让网页主动通知其所在的容器，则可以在该网页内部执行如下操作[^2]: ```javascript parent.window.webkit.messageHandlers.uniPostMessage.postMessage({ key: value }); ``` 或者对于某些平台可能适用更通用的形式: ```javascript if (window.uni && typeof(window.uni.postMsg)==='function') { window.uni.postMsg({key:value}); } else if(typeof(parent!==undefined)){ parent.postMessage({key:value},'*'); } ``` 注意这里的逻辑是为了兼容不同浏览器的行为差异而设计出来的多重判断机制。 #### 4. 应用接收来自网页的消息 最后一步是在承载 `web-view` 的 Vue 组件定义处绑定好相应的处理器函数以捕捉这些反馈回来的结果[^1][^2]: ```vue <template> <view class="content"> <!-- 使用 @message 属性绑定自定义方法 receiveData --> <web-view :src="'/hybrid/html/index.html'" @message="receiveData"></web-view> </view> </template> <script> export default { methods:{ /** * 接收 webview 内部传来的参数 */ receiveData(e){ const received = e.detail.data; console.log('From WebView:',received); this.$toast(JSON.stringify(received)); } } }; </script> ``` 以上就是完整的基于 UniApp 平台下 `web-view` 双向通讯解决方案及其实际编码示范说明。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值