uniapp 如何嵌套H5 页面?

如何在 uniapp项目中 嵌套h5页面

在UniApp中可以通过使用 web-view 组件来嵌入H5页面。

首先需要安装uni-app的依赖包,然后创建一个新的页面(比如名为"WebPage.vue")作为容器页面,并将其放置于pages目录下。

接下来,在该页面的template部分添加web-view组件,设置src属性为所需嵌入的H5页面地址,示例如下:

html 复制代码
<template>
  <view class="container">
    <!-- web-view组件 -->
    <web-view :src="url"></web-view>
  </view>
</template>

在script部分定义data数据对象,并初始化url变量为所需嵌入的H5页面地址,示例如下:

html 复制代码
<script>
export default {
  data() {
    return {
      url: 'https://www.example.com' // H5页面地址
    }
  },
}
</script>

最后,在manifest.json文件中注册这个页面,确保能正常打开。

完成上述操作后,就可以运行项目查看效果了。当点击进入到WebPage页面时,会自动加载指定的H5页面内容。

web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。

各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。

相关推荐
懒大王95272 分钟前
uni-app + Vue3 + EZUIKit.js 播放视频流
开发语言·javascript·uni-app
懒大王95276 分钟前
uni-app + Vue3 开发展示 echarts 图表
前端·uni-app·echarts
yinuo12 分钟前
Uni-App跨端实战:微信小程序WebView与H5通信全流程解析(01)
前端
xkroy30 分钟前
ajax
前端·javascript·ajax
Yvonne爱编码34 分钟前
AJAX入门-URL、参数查询、案例查询
前端·javascript·ajax
闲人编程43 分钟前
前端形态与样式风格:从古典到现代的视觉语言演进
前端·css·状态模式·组件·js·风格·响应式
JudithHuang44 分钟前
Mac版微信开发者工具登录二维码不显示问题解决方案
前端
Swift社区1 小时前
如何解决 Vue2 前端项目为何无法访问本地资源(chunk.js 加载一直 pending/转圈)
开发语言·前端·javascript
清风细雨_林木木1 小时前
Vue加载资源‘如图片’的“直接引入“方式和“request()“的区别
前端·javascript·vue.js