uniapp 如何嵌套H5 页面？

今天星期八2024-02-25 19:44

在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 。