【uniapp】uniapp的App端web-view加载本地html

在uniapp中，如果你想在App端使用web-view组件加载本地的HTML文件，你需要先将HTML文件打包到应用资源中，然后通过本地服务器或者直接通过文件路径来加载。

1. 将HTML文件放置在项目的static目录下。
2. 使用web-view组件并通过file协议指定HTML文件的路径。

示例代码：

<template>
  <view>
    <!-- 假设你的HTML文件名为local-page.html，位于static目录下 -->
    <web-view src="file:///android_asset/static/local-page.html"></web-view>
  </view>
</template>

请注意，由于uniapp的web-view组件在App端使用的是Android的WebView，因此路径应该是以file:///android_asset/开头，这表示你的HTML文件应该打包在应用资源中。

如果你的HTML文件是动态生成的，你可能需要先将其内容写入文件系统，然后再通过web-view加载。

// 假设htmlContent是你动态生成的HTML内容
const fs = uni.getFileSystemManager();
const filePath = `${uni.env.USER_DATA_PATH}/local-page.html`;
 
fs.writeFile({
  filePath: filePath,
  data: htmlContent,
  encoding: 'utf8',
  success: function () {
    // 文件写入成功后，更新web-view的src属性
  }
});

在写入文件成功后，更新web-view组件的src属性为刚才写入的文件路径。

<template>
  <view>
    <web-view :src="webViewSrc"></web-view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      webViewSrc: ''
    }
  },
  methods: {
    writeHtmlToLocal(htmlContent) {
      const fs = uni.getFileSystemManager();
      const filePath = `${uni.env.USER_DATA_PATH}/local-page.html`;
 
      fs.writeFile({
        filePath: filePath,
        data: htmlContent,
        encoding: 'utf8',
        success: () => {
          this.webViewSrc = `file:///android_asset/${filePath}`;
        }
      });
    }
  }
}
</script>

在上面的代码中，writeHtmlToLocal方法负责将HTML内容写入本地文件，并更新webViewSrc变量，其中包含了加载本地HTML文件的路径。这样，web-view组件就可以通过这个路径加载并显示你的HTML内容。