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 。

相关推荐
中微子2 分钟前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina5 分钟前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918411 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js