uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

这篇具有很好参考价值的文章主要介绍了uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

web-view是什么

web-view 是一个 web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。
点击这里直达官网文档
点击这里下载我的代码demo
本文最下面还有一些常见或者奇怪问题解决方案哦~

为什么使用这种方式搞页面？有什么好处呢？

之前开发好的H5页面，不想重新开发，想要直接放进项目用
页面热更新，不需要重新打包
复杂需求使用H5比较方便，比如复杂的echarts等不想要使用uniapp搞
其他好处等你 O(∩_∩)O 发掘哦~

如何使用web-view，并互相传递数据？

【uniapp 向 webview 发消息】

在uni-app vue页面使用web-view发送消息给H5(注意观察下面postMessage函数)

<template>
  <web-view
    :src="url"
    ref="webview"
    @onPostMessage="handleWebviewMessage"
    @message="handleWebviewMessage"
  ></web-view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onBackPress } from "@dcloudio/uni-app";
import { systemInfo } from "../../utils/system";
const { uniPlatform, platform } = systemInfo();
const url = ref("https://www.baidu.com/");

// 先接受到h5页面发来的data,再给H5发送数据的逻辑
const pages = getCurrentPages();
const vw = ref(null);
const postMessage = () => { 
  vw.value = pages[pages.length - 1].$getAppWebview().children()[0];
  const userData = { TOKEN: "AAAAAA" };
  // uniapp 向 webview 发消息
  vw.value.evalJS(`receiveData(${JSON.stringify(userData)})`);
};
let postNumber = 0;
const handleWebviewMessage = (data) => {
  console.log("接收到消息：" + JSON.stringify(data));
  if (postNumber === 0) {
    postMessage();
    postNumber++;
  }
};
// 下面的代码选择性使用
// 作为组件传参使用
// onLoad((options) => {
//   console.log("web-view::", options);
//   url.value = decodeURIComponent(options.url);
// });
// 解决返回按钮功能不兼容问题
// onBackPress(() => {
//   if (uniPlatform === "app" && platform === "android") return false;
//   uni.redirectTo({
//     url: "/pages/home/index",
//   });
//   return true;
// });
</script>

utils/system.ts

const systemInfo = function () {
  let systemInfomations = uni.getSystemInfoSync(); // 设备系统信息
  let scaleFactor = 750 / systemInfomations.windowWidth; // 机型适配比例系数
  let windowHeight = systemInfomations.windowHeight * scaleFactor; // 当前机型-屏幕高度
  let windowWidth = systemInfomations.windowWidth * scaleFactor; // 当前机型-屏幕宽度
  let statusBarHeight = systemInfomations.statusBarHeight * scaleFactor; // 状态栏高度
  let platform = systemInfomations.platform; // 运行平台
  const uniPlatform = systemInfomations.uniPlatform; // 运行环境
  return {
    scaleFactor,
    windowHeight,
    windowWidth,
    statusBarHeight,
    platform,
    uniPlatform
  };
};


export { systemInfo };

nvue获取webview窗口的方式是与普通vue获取webview的方式不一样，下面自己选择性写哦

uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性,移动端开发,前端,uni-app,vue.js

【webview 给 uniapp发消息】 H5端怎么发送数据给uniapp呢？

方案1：通过evalJS（这个有个注意事项，比如要如何保证一定能传递过去，避免出现没有成功的情况，可以参考下面问题6的答案）
方案2：通过 url 传参

【webview 给 uniapp发消息】 H5页面代码：index.html

先去下载这个uni.webview.js文件放入你H5项目里面：
最新版地址：https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <h2 onclick="jumpTo()">我是\(^o^)/~模拟的登录页，现在没有登陆成功哦</h2>
    <h2>如果我收到信息，下面会出现粉色的字哦~</h2>
    <h2 id="receiveData" style="color: pink;"></h2>
</body>
<script type="text/javascript" src="./uni.webview.1.5.4.js"></script>
<script type="text/javascript">
    function receiveData(msg) {
        document.getElementById('receiveData').innerText='下面是我收到的信息内容：'+JSON.stringify(msg)
        // localStorage.setItem() // 在这里可以拿到传递过来的数据，写入localStorage，然后其他逻辑
    }
    document.addEventListener("UniAppJSBridgeReady", function () {
        // webview 给 uniapp发消息
        uni.postMessage({
            data: {
                action: "autoLogin",
            },
        });
        uni.getEnv(function (res) { console.log("当前环境：" + JSON.stringify(res)); });})
</script>

</html>

常见问题点

web-view 加载 uni-app H5，内部跳转冲突如何解决？
使用 uni.webView.navigateTo
web-view 的页面怎么和应用内的页面交互？
调用 uni 相关的 API，就可以实现页面切换及发送消息。参考：在 web-view 加载的 HTML 中调用 uni 的 API
web-view 加载的 HTML 中，是否可以调用原生？
加载的 HTML 中是有 5+ 环境的，在 plusready 后调用即可。参考：一个简单实用的 plusready 方法添加链接描述
uniapp嵌套webview页面，返回按钮跳转问题，以及解决uniapp 使用安卓手机在webview点击返回按钮后可以正常返回,但是ios手机需要点击按钮2次，返回两次的问题（假如你跳转到H5的webview后因某些原因需要定制化左上角的返回按钮，可以参考下面的做法）

// webview页面代码
import { onBackPress } from '@dcloudio/uni-app';
import { systemInfo } from '@/utils/system'; // 下面放这个代码
const { uniPlatform, platform } = systemInfo();
onBackPress(() => {
  if (uniPlatform === 'app' && platform === 'android') return false; // 如果你没有遇到返回的兼容问题，就可以去掉这一行代码
  uni.redirectTo({
    url: '/pages/home/index'
  });
  return true;
});

uniapp嵌套webview页面，接收数据onPostMessage写了不管用怎么办？或者@message写了不管用怎么办？原因：nvue获取webview窗口的方式是与普通vue获取webview的方式不一样，你可以这两个选择性写
uniapp通过webview的evalJS传递数据给H5,有的时候传递不成功的情况如何解决？
可以先让H5加载完毕后，告诉uniapp,然后我们再调用函数传递给H5，可以参考我上面的代码，也可以直接下载本文最上面的我仓库的代码进行测试，如果路过的小伙伴有其他更好的办法，欢迎留言哦~~
待补充其他问题，欢迎小伙伴提出其他问题，我会不断更新本文档哦

注意事项

小程序仅支持加载网络网页，不支持本地html
补充说明：app-vue下web-view组件不支持自定义样式，而v-show的本质是改变组件的样式。即组件支持v-if而不是支持v-show。
小程序端 web-view 组件一定有原生导航栏，下面一定是全屏的 web-view 组件，navigationStyle: custom 对 web-view 组件无效。
App 端使用 uni.web-view.js 的最低版为 uni.webview.1.5.4.js
App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下，如下为一个加载本地网页的uni-app项目文件目录示例：
nvue web-view 必须指定样式宽高
App 网页向应用 postMessage 为实时消息
app-nvue web-view 默认没有大小，可以通过样式设置大小，如果想充满整个窗口，设置 flex: 1 即可，标题栏不会自动显示 web-view 页面中的 title。如果想充满整个窗口且想要显示标题推荐使用 vue 页面的 web-view(默认充满屏幕不可控制大小), 想自定义 web-view 大小使用 nvue web-view