uniapp与webview进行数据通信

news/2024/9/18 20:14:44/ 标签: uni-app

uniapp与webview进行数据通信:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>网络网页</title><style type="text/css">.btn {display: block;margin: 20px auto;padding: 5px;background-color: #007aff;border: 0;color: #ffffff;height: 40px;width: 200px;}.btn-red {background-color: #dd524d;}.desc {padding: 10px;color: #999999;}.post-message-section {visibility: hidden;}</style>
</head><body><div class="post-message-section"><p class="desc">网页向应用发送消息,注意:小程序端应用会在此页面后退时接收到消息。</p><div class="btn-list"><label>账户:</label><input type="text" name="user" required><br><label>密码:</label><input type="text" name="pwd" required><br><div class="post-message-section"><!-- HTML 内容 --><p id="receivedMessage">Received Message Will Appear Here</p></div><br><button class="btn btn-red" type="button" id="postMessage1">跳转1</button><button class="btn btn-red" type="button" id="postMessage2">跳转2</button><button class="btn btn-red" type="button" id="postMessage">postMessage</button><button class="btn btn-red" type="button" id="getMessage">点击获取GetMessage</button><button class="btn btn-red" type="button" id="getMessage">获取相机权限</button></div><p id="receivedMessage"></p></div><script type="text/javascript">var userAgent = navigator.userAgent;if(!/toutiaomicroapp/i.test(userAgent)) {document.querySelector('.post-message-section').style.visibility = 'visible';}</script><!-- uni 的 SDK --><!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script type="text/javascript" src="uni.webview.1.5.5.js"></script><script type="text/javascript">// 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。document.addEventListener('UniAppJSBridgeReady', function () {uni.getEnv(function (res) {console.log('当前环境111:' + JSON.stringify(res));});});
var customKey = 'key'; // 自定义的键值,可以根据需要修改// postMessage参数document.getElementById('postMessage').addEventListener('click', function () {var userValue = document.getElementsByName('user')[0].value;var pwdValue = document.getElementsByName('pwd')[0].value;var deviceInfo = navigator.userAgent; // 获取设备信息// var customValue = 'nnn'; // 自定义的第二个键值var customValue = 'nnn'; // 自定义的第二个键值// 添加自定义的键值对     uniPostMessage(customKey,customValue);  });// 监听postMessage事件// 监听来自 UniApp 的消息document.addEventListener('message', function(event) {console.log('Message received in test.html:', event.data);var receivedMessageElement = document.getElementById('receivedMessage');receivedMessageElement.textContent = 'Received message: ' + event.data;alert('Received message: ' + event.data);});// getMessage参数document.getElementById('getMessage').addEventListener('click', function () {var storage = window.plus.storage;// 获取本地存储 var customKey = 'key'; // 自定义的键值,可以根据需要修改var yourData = storage.getItem(customKey);alert(yourData);return;var parsedData = JSON.parse(yourData);if(parsedData === null) {console.log('本地存储为空');} else {console.log('Data from storage:', yourData);var parsedData = JSON.parse(yourData);document.getElementsByName('user')[0].value = parsedData.data.user || '';document.getElementsByName('pwd')[0].value = parsedData.data.pwd || '';}// 获取所有存储staoragevar keys = plus.storage.getAllKeys();var data = {};// 遍历所有的键,并将键值对添加到对象中keys.forEach(function (key) {var value = window.plus.storage.getItem(key);data[key] = value;});console.log('Data:', JSON.stringify(data));});// 获取传递过来的值console.log('获取数据:',getQuery('data')); //获取 uni-app 传来的值//取url中的参数值function getQuery(name) {// 正则:[找寻'&' + 'url参数名字' = '值' + '&']'&'可以不存在)let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);console.log('获取到的r值',r);if(r != null) {// 对参数值进行解码return decodeURIComponent(r[2]);}return null;}</script>
</body><script>// 获取按钮父元素var buttonContainer = document.body;// 添加点击事件监听器到父元素buttonContainer.addEventListener("click", function (event) {// 确保点击的是按钮if(event.target.tagName === 'BUTTON') {// 根据按钮ID进行区分if(event.target.id === 'postMessage1') {// 处理按钮1的点击事件console.log("点击了跳转1按钮");// 这里可以添加其他处理逻辑window.location.href = 'jump1.html';} else if(event.target.id === 'postMessage2') {// 处理按钮2的点击事件console.log("点击了跳转2按钮");// 这里可以添加其他处理逻辑}}});
</script></html>

http://www.ppmy.cn/news/1525702.html

相关文章

Redis简介、常用命令及优化

文章目录 一、关系数据库​​与非关系型数据库概述1. 关系型数据库2. 非关系型数据库3.关系数据库与非关系型数据库区别 二、Redis简介1.Redis的单线程模式2.Redis 优点3.Redis 缺点 三、安装redis四、Redis 命令工具五、Redis 数据库常用命令六、Redis 多数据库常用命令七、Re…

【Linux取经之路】软件包管理器yum编辑器vim及其配置

目录 软件包管理器yum 1、什么是软件包 2、关于lrzsz 3、安装软件 4、查看软件 5、卸载软件 编辑器——vim 1、vim的基本概念 2、vim的基本操作 3、vim普通模式命令集 4、底行模式命令集 5、vim的配置 配置sodu权限 软件包管理器yum 1、什么是软件包 在Linux下…

大顶堆+动态规划+二分

前言&#xff1a;我们这一题需要分类讨论 对于我们左边和右边的我们需要预处理 有点类似反悔堆的做法&#xff0c;得出i之前取出 m 个元素代价最小&#xff0c;并且这个代价一定是递减的&#xff08;可以推导一下&#xff09; 题目地址 #include<bits/stdc.h> using name…

使用脚手架来创建 express 项目

使用脚手架&#xff08;scaffold&#xff09;可以快速搭建Express应用程序的基本结构。Express自身提供了一个官方脚手架工具叫做express-generator&#xff0c;它可以帮助你快速地生成一个包含基本文件结构的Express项目。 安装Express Generator 首先&#xff0c;你需要全局…

AI在医疗领域:MEDIC 全面评估大模型在医疗领域的应用

随着医疗领域中大型语言模型&#xff08;LLMs&#xff09;的迅猛发展&#xff0c;公众对于其评估的需求日益增长&#xff0c;要求超越传统的USMLE等基准测试&#xff0c;以更全面地反映模型在现实世界中的应用性能。尽管现实世界的评估对于衡量模型的实用性具有重要价值&#x…

【uni-app】小兔鲜项目--拉取小兔鲜儿项目模板代码

1. 拉取小兔鲜儿项目模板代码 模板地址 git clone -b template https://gitee.com/heima-fe/uniapp-shop-vue3-ts.git heima-shop步骤 在写代码的文件夹&#xff0c;输入CMD&#xff0c;打开终端&#xff0c;直接执行克隆命令 2.通过VS Code打开heima-shop文件夹&#xff0…

c语言 stdio.h 介绍

stdio.h 是 C 标准库中的一个头文件&#xff0c;提供了输入和输出功能的函数和宏。以下是它的主要内容和功能&#xff1a; 主要功能 输入输出函数&#xff1a; printf&#xff1a;格式化输出到标准输出&#xff08;通常是终端&#xff09;。scanf&#xff1a;从标准输入&#…

计算机毕业设计Python知识图谱美团美食推荐系统 美团餐厅推荐系统 美团推荐系统 美食价格预测 美团爬虫 美食数据分析 美食可视化大屏

《Python知识图谱美团美食推荐系统》开题报告 一、研究背景与意义 随着信息技术的飞速发展和互联网应用的普及&#xff0c;人们的消费习惯逐渐从线下转移到线上&#xff0c;外卖行业迎来了前所未有的发展机遇。美团作为国内领先的生活服务电子商务平台&#xff0c;拥有庞大的…

新能源汽车 BMS 学习笔记篇—BMS 基本定义及分类

一、BMS 定义 1、概念&#xff1a; BMS&#xff08;Battery Management System&#xff09;即电池管理系统&#xff0c;其管理 对象是二次电池&#xff08;充电电池或蓄电池&#xff09;&#xff0c;其主要目的是电池的利用率&#xff0c;防止电池出现过度充电和过度放电&…

Next.js 14 如何在服务端页面中使用客户端渲染组件

在Next.js中&#xff0c;默认就是使用服务端渲染的&#xff0c;那如何在服务端页面中包含客户端组件呢&#xff0c;以下是试例&#xff1a; 在ArticlePage.js中&#xff1a; import DeleteButton from /components/DeleteBtnexport default async function ArticlePage(){retu…

Airoha Get started Guide---入门指南

0 Preface/Foreword SDK: Software Development Kit&#xff0c;软件开发套件 EVK&#xff1a;Evaluation Kit&#xff0c;评估套件 BSP&#xff1a;Board Support Package&#xff0c;板级支持包 BT&#xff1a;Bluetooth ATCI: AT Command Interface NVDM: Non-Volatil…

加速开发体验:为 Android Studio 设置国内镜像源

Android Studio 是由 JetBrains 开发的一个官方 IDE&#xff0c;用于 Android 应用开发。由于网络原因&#xff0c;直接从 Google 的服务器下载可能会比较慢或者不稳定。幸运的是&#xff0c;我们可以通过配置国内镜像源来加速下载和更新。 文章目录 &#x1f4af; 修改 Gradle…

FastAPI 应用安全加固:HTTPSRedirectMiddleware 中间件全解析

在当今的网络环境中&#xff0c;数据安全变得越来越重要。HTTPS 作为一种安全协议&#xff0c;它通过加密传输数据来保护用户信息免受窃取和篡改。在 FastAPI 应用中&#xff0c;确保所有的 HTTP 请求都通过 HTTPS 进行是至关重要的。 中间件在 FastAPI 中用于处理请求前后的…

一文讲懂Mac中的环境变量

你是否曾经因为环境变量配置不当而浪费了宝贵的开发时间?你是否好奇为什么有时候在终端输入命令会提示"command not found",而有时候又能正常运行?如果你是一名Mac用户,并且希望真正掌握环境变量的奥秘,那么这篇文章将为你揭开Mac中环境变量的神秘面纱,帮助你成为一…

SQLyou基础用法讲解

文章目录 SQLyog 基础知识讲解 1. 数据定义语言 (DDL)创建数据库创建表修改表删除表 2. 数据操作语言 (DML)插入数据批量插入数据更新数据条件更新删除数据条件删除 3. 数据查询语言 (DQL)查询数据查询所有数据使用排序使用聚合函数分组查询使用 HAVING 子句 4. 事务5. 索引创建…

idea一键自动化部署项目

文章目录 前言一、 IDEA插件安装1. 首先下载 Alibaba Cloud Toolkit 插件2. 插件下载完成后重启IDEA 二、SpringBoot项目准备1. pom.xml 文件2. controller3. 启动类 三、SpringBoot项目jar包部署1. Alibaba Cloud Toolkit 插件服务器配置2. 主机 IP、用户名、密码 点击测试链接…

Java的发展史与前景

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 &#x1f308;C专栏&#xff1a;C 文章目录 0. Java语言的发展史1.概述1.1 什么是Java1.2 …

LSTM处理时序数据:深入解析与实战

大家好&#xff0c;我是你们的深度学习老群群。今天&#xff0c;我们来聊一聊LSTM&#xff08;长短期记忆网络&#xff09;是如何处理时序数据并得到预测结果的。LSTM作为循环神经网络&#xff08;RNN&#xff09;的一种变体&#xff0c;因其能够有效捕捉长期依赖关系&#xff…

Docker部署tenine实现后端应用的高可用与负载均衡

采用Docker方式的Tengine 和 keepalived 组合模式可以实现小应用场景的高可用负载均衡需求 目录 网络架构一、环境准备二、软件安装1. 下载Tenine镜像2. 下载Keepalived镜像3. 制作SpringBoot镜像 三、软件配置1. 创建应用容器2. 代理访问应用3. 创建Keepalived4. 测试高可用 网…

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第三期]

QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第三期] 第三期介绍&#xff1a;频道模块之频道成员 目录 QQ频道机器人零基础开发详解(基于QQ官方机器人文档)[第三期]第三期介绍&#xff1a;频道模块之频道成员获取子频道在线成员数获取频道成员列表获取频道身份组成员列…