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

web-view是什么

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

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

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

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

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

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的方式不一样，下面自己选择性写哦

H5端怎么发送数据给uniapp呢？

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

H5页面代码：index.html

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

    
    
    
    



    
我是\(^o^)/~模拟的登录页，现在没有登陆成功哦
    
如果我收到信息，下面会出现粉色的字哦~
    

常见问题点

1. web-view 加载 uni-app H5，内部跳转冲突如何解决？
   使用 uni.webView.navigateTo
2. web-view 的页面怎么和应用内的页面交互？
   调用 uni 相关的 API，就可以实现页面切换及发送消息。参考：在 web-view 加载的 HTML 中调用 uni 的 API
3. web-view 加载的 HTML 中，是否可以调用原生？
   加载的 HTML 中是有 5+ 环境的，在 plusready 后调用即可。参考：一个简单实用的 plusready 方法添加链接描述
4. 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;
});

5. uniapp嵌套webview页面，接收数据onPostMessage写了不管用怎么办？或者@message写了不管用怎么办？原因：nvue获取webview窗口的方式是与普通vue获取webview的方式不一样，你可以这两个选择性写
   

6. uniapp通过webview的evalJS传递数据给H5,有的时候传递不成功的情况如何解决？
   可以先让H5加载完毕后，告诉uniapp,然后我们再调用函数传递给H5，可以参考我上面的代码，也可以直接下载本文最上面的我仓库的代码进行测试，如果路过的小伙伴有其他更好的办法，欢迎留言哦~~

7. 待补充其他问题，欢迎小伙伴提出其他问题，我会不断更新本文档哦

注意事项

• 小程序仅支持加载网络网页，不支持本地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

今天就写到这里啦~

• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~