首页 APP开发 正文内容

uni-app 开发 APP 时,使用 webview 加载本地资源,页面路径怎么获取?

2023年09月18日 , , 178

uni-app 在本地加载网页文件的方法,这种方式会帮我们解决一些问题,但也要注意一些细节,以免出错。

webview 是在 APP 开发中,一个用来加载网页的组件,一般用来加载一个 url 网址,不过有的时候我们也希望加载一个本地的网页文件,那么我们自己的网页文件应该放在哪?怎么用 webview 加载呢?

在 APP 中加载本地网页

uni-app 的 App 平台,在使用 webview 加载本地网页时,本地网页及相关资源(js、css等文件)必须放在 uni-app 项目根目录下的 hybrid 下的 html 文件夹下或者 static 目录下,否则不会被当作静态网页资源来处理。

目录结构

┌─components
├─hybrid
│  └─html
│     ├─css
│     │  └─style.css
│     ├─img
│     │  └─icon.png
│     ├─js
│     │  └─some.js
│     └─index.html
├─pages
│  └─index
│     └─index.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

注意如果没有 hybrid 目录,就自己创建。

代码示例

下面展示的代码会加载上面目录中的 index.html 本地网页:

<template>
  <view>
    <web-view src="/hybrid/html/index.html"></web-view>
  </view>
</template>

这样就可以在 Vue 页面中,使用 webview 组件来加载本地的网页了。

注意事项

需要注意的是,用这种的方式加载的页面,是 file:// 协议的,和在电脑上直接双击打开 html 文件表现一样的,并不是 http:// 网络协议,所以我们可能会遇到最大的问题,是某些本地请求可能会因为跨域而无法完成操作。

这里是更多和 webview 相关的问题