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

news2025/3/1 11:50:03

web-view是什么

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

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

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

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

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

在这里插入图片描述

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

<!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 () {
        uni.postMessage({
            data: {
                action: "autoLogin",
            },
        });
        uni.getEnv(function (res) { console.log("当前环境：" + JSON.stringify(res)); });})
</script>

</html>

常见问题点

  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;
});

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

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

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

注意事项

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

今天就写到这里啦~

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

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

在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/434531.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

GMRES算法及Matlab程序

GMRES算法及Matlab程序

关于GMRES的总结 一些理论以及代码 首先是我们要解决的问题&#xff0c;也就是最常见的问题&#xff0c;即求解 A x b Axb Axb Galerkin条件 krylov子空间 我们所做的GMRES实际上就是在Galerkin条件的扩张下&#xff0c;n o r m ( r ) normnorm不断减小的一个过程。这也是…
阅读更多...
家用洗地机哪种好？性价比高的洗地机推荐

家用洗地机哪种好？性价比高的洗地机推荐

选择清洁家电时&#xff0c;首先需要考虑你需要清洁的区域和清洁的方式。如果你需要清洁的是地面&#xff0c;那么洗地机可能是一个不错的选择。洗地机的优势在于它可以自动清洁地面&#xff0c;并且可以在较短的时间内完成清洁工作。相比于其他的清洁家电&#xff0c;洗地机的…
阅读更多...
设计链表(链表篇)

设计链表(链表篇)

你可以选择使用单链表或者双链表&#xff0c;设计并实现自己的链表。 单链表中的节点应该具备两个属性&#xff1a;val 和 next 。val 是当前节点的值&#xff0c;next 是指向下一个节点的指针/引用。 如果是双向链表&#xff0c;则还需要属性 prev 以指示链表中的上一个节点…
阅读更多...
Linux_红帽8学习笔记分享_5

Linux_红帽8学习笔记分享_5

Linux_红帽8学习笔记分享_5 文章目录 Linux_红帽8学习笔记分享_51. UMASK反掩码1.1如何查看反掩码umask1.2 UMASK反掩码的作用1.2.1对于目录来说1.2.2对于文件来说 1.3如何修改UMASK反掩码1.4普通用户反掩码的测试 2.whereis的使用3. SUID权限弥补(主要针对文件,所有者执行位变…
阅读更多...
第14章_数据结构与集合源码

第14章_数据结构与集合源码

第14章_数据结构与集合源码 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 本章专题与脉络 1. 数据结构剖析 我们举一个形象的例子来理解数据结构的作用&#xff1a; 战场&#xff1a;程序运行…
阅读更多...
认识Object类和深浅拷贝

认识Object类和深浅拷贝

本文介绍了Object类以及Object类部分方法,toString方法,equals和hashCode方法(重写前和重写后的对比),getClass方法,clone方法,以及拷贝新对象时会出现的深浅拷贝, 内容较长,耗时一天,建议收藏后观看~ Object类和深浅拷贝 一.初识Object类1.Object类接收所有子类实例2.Object类…
阅读更多...
【C 字符串】02 常用字符串函数（命令行参数）

【C 字符串】02 常用字符串函数（命令行参数）

Navigator 一、strlen()函数—统计长度二、strcat()函数—拼接三、strncat()函数—strcat()的升级四、strcmp()和strncmp()—比较五、strcpy()和strncpy()—拷贝六、sprintf()函数—合并多个字符串七、其他可能用到的字符串函数八、ctype.h中的字符函数九、把字符串转换为数字十…
阅读更多...
(03)基础强化:静态类静态成员,静态构造函数,抽象类抽象成员,值类型和引用类型,Ref

(03)基础强化:静态类静态成员,静态构造函数,抽象类抽象成员,值类型和引用类型,Ref

一、静态成员 1、方法重写注意事项 1&#xff09;子类重写父类方法时&#xff0c;必须与父类保持一致的方法签名与返回值类型。即: 方 法名、返回值类型、参数列表都必须保持一致。[访问修饰符也得一致] 2&#xff09;“方法签名”:一般是指…
阅读更多...
VScode---visual stdio code快速安装教程（Windows系统）

VScode---visual stdio code快速安装教程（Windows系统）

1.下载VSCode安装包&#xff0c;官网传送门https://code.visualstudio.com/ 选择Windows下的User Installer 64 bit 直接下载速度如果很慢&#xff0c;在浏览器或者下载软件中就可以看到这么一个下载地址了&#xff0c;复制链接地址&#xff08;如下图箭头所指&#xff09;。 …
阅读更多...
本节作业之5秒后自动关闭广告、倒计时、发送短信、5秒之后自动跳转页面、获取URL参数数据

本节作业之5秒后自动关闭广告、倒计时、发送短信、5秒之后自动跳转页面、获取URL参数数据

本节作业之5秒后自动关闭广告、倒计时、发送短信、5秒之后自动跳转页面、获取URL参数数据 1 5秒后自动关闭广告2 倒计时3 发送短信4 5秒之后自动跳转页面5 获取URL参数数据 1 5秒后自动关闭广告 <!DOCTYPE html> <html lang"en"> <head><meta …
阅读更多...
管理系统的前端模板（vue2+Element UI）

管理系统的前端模板（vue2+Element UI）

目录 前言 一、模板展示图 二、获取的方式及操作运行步骤 &#xff08;一&#xff09;获取方式 &#xff08;二&#xff09;操作步骤 1.下载安装node.js 2.下载完成解压缩后在idea的里面打开终端。 3.输入下载相关依赖的命令 4.运行项目的命令 5.然后把给到的地址…
阅读更多...
腾讯云渲染实战

腾讯云渲染实战

UE使用流渲染技术的主要原因是为了提高渲染效率和降低成本。流渲染技术可以将渲染任务分配到多个计算节点上进行并行处理&#xff0c;从而加快渲染速度。同时&#xff0c;流渲染技术还可以将渲染任务分配到云端进行处理&#xff0c;减少本地计算机的负担&#xff0c;降低成本。…
阅读更多...
又一科研利器诞生！能对话的论文阅读器，hammerScholar

又一科研利器诞生！能对话的论文阅读器，hammerScholar

文&#xff5c;智商掉了一地 hammerScholar 新升级&#xff0c;用对话式读论文工具提升科研生产力~ 不得不说&#xff0c;自从 AIGC 这个概念出现以来&#xff0c;它极强的内容理解与生成能力也推动着各种生产力工具层出不穷&#xff0c;除了一些浏览器和代码插件以外&#xff…
阅读更多...
SpringBoot的Interceptor拦截器的简介和实际使用

SpringBoot的Interceptor拦截器的简介和实际使用

拦截器&#xff08;Interceptor&#xff09; 概念&#xff1a;是一种动态拦截方法调用的机制&#xff0c;类似于过滤器。Spring框架中提供的&#xff0c;用来动态拦截控制器方法的执行。 作用&#xff1a;拦截请求&#xff0c;在指定的方法调用前后&#xff0c;根据业务需要执行…
阅读更多...
干货 | 关于等效电路图

干货 | 关于等效电路图

等效电路图是电路原理中非常重要的一个概念&#xff0c;在电子工程、通信工程和电力工程等领域中经常被使用。等效电路图是指将一个复杂的电路简化成一个简单的电路&#xff0c;同时保持电路的等效性质&#xff0c;以便于分析和设计电路。在本文中&#xff0c;我们将详细介绍等…
阅读更多...
回溯法 思想

回溯法 思想

回溯法&#xff08;back tracking&#xff09;&#xff08;探索与回溯法&#xff09;是一种选优搜索法&#xff0c;又称为试探法&#xff0c;按选优条件向前搜索&#xff0c;以达到目标。但当探索到某一步时&#xff0c;发现原先选择并不优或达不到目标&#xff0c;就退回到上一…
阅读更多...
ChatGPT安全性受质疑 国家网信办发布《生成式人工智能服务管理办法（征求意见稿）》

ChatGPT安全性受质疑 国家网信办发布《生成式人工智能服务管理办法（征求意见稿）》

你是否曾经和一款人工智能对话&#xff1f;它们似乎能够理解你的问题&#xff0c;并给出令人满意的答案。ChatGPT是目前最流行的人工智能。它是由OpenAI开发的一款基于GPT技术的自然语言处理模型。 通过训练大量的文本数据&#xff0c;ChatGPT可以理解并回答用户的问题&#xf…
阅读更多...
Excel vba直接调用斑马打印机进行打印代码

Excel vba直接调用斑马打印机进行打印代码

1.难点 1.1 vba 对zebra打印机调用方法open 1.2 zebra打印机默认支持UTF8 编码方式&#xff0c;对应编码命令为CI28; 支持GB2312 GB18030 ASCII码编码方式&#xff0c;对应编码命令为CI26 1.3 VBA对中文只支持GB2312, 而excel 是默认支持UTF8的&#xff0c; excel　与VBA编…
阅读更多...
钛碳化铝(Ti3AlC2)在实验检测领域中的应用

钛碳化铝(Ti3AlC2)在实验检测领域中的应用

钛碳化铝Ti3AlC2是一种属于MAX相&#xff08;M代表金属元素&#xff0c;A代表主族元素&#xff0c;X代表碳或氮&#xff09;的陶瓷材料。它是由钛、铝和碳组成的复合材料&#xff0c;拥有优异的力学、热学和电学性能。由于这些性质&#xff0c;Ti3AlC2已成为近年来研究和应用的…
阅读更多...
[Netty源码] ByteBuf相关问题 (十)

[Netty源码] ByteBuf相关问题 (十)

文章目录 1.ByteBuf介绍2.ByteBuf分类2.1 AbstractByteBuf2.2 AbstractReferenceCountedByteBuf2.3 UnpooledHeapByteBuf2.4 UnpooledDirectByteBuf2.5 PooledDirectByteBuf 1.ByteBuf介绍 字节缓冲区, jdk NIO的ByteBuffer比较复杂, netty重新设计了ByteBuf用以代替ByteBuffe…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023