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

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 相关的问题。