uniapp与webview直接进行传值

uniapp与webview直接进行传值

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>
  
<script>
export default {
  data() {
    return {
      url:'/hybrid/html/local.html?data='
    };
  },
  onLoad(data) {<br>          //这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
    this.url+=encodeURIComponent(data.data)
  },
  mounted() {},
  methods: {
    message(event){
      console.log(event.detail.data);
    }
  }
};
</script>
  
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>

H5中接收的参数:

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);
        if(r != null) {
          // 对参数值进行解码
          return decodeURIComponent(r[2]);
        }
        return null;
      }

webview向uniapp传值:

<script>
  document.addEventListener('UniAppJSBridgeReady', function() {
    //向uniapp传值
    uni.postMessage({
      data: {
        action: 'message'
      }
    });
    uni.getEnv(function(res) {
      console.log('当前环境:' + JSON.stringify(res));
    });
  });
</script>  

uniapp:

<template>
  <view class="advertisement" style="width: 100%;">
    <web-view :src="url" @message="message"></web-view>
  </view>
</template>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

继承1 2024_9_18

1.继承的基本用法 当需要继承的时候,我们就在派生类的后面加上一个权限父类,这个权限可以是公有,保护和私有,后面就是继承的父类.此时,下面的stu这个派生类,也就可以使用Person里面的方法了. 2.继承基类成员访问方式的变化 当父类被继承到派生类的时候,此时会根据继承方式的不…

k8s的NodeIP、PodIP、ClusterIP、ExternalIP

1.NodeIP K8s集群由Master Node与Worker Node组成。 Node&#xff1a;组成k8s集群的机器&#xff0c;可以是物理机或虚拟机。 Master Node &#xff1a;管理节点也叫控制平面主要负责管理控制方面。 Worker Node&#xff1a;&#xff1a;工作节点用于部署处理业务的工作负载或p…

spring springboot 日志框架

一、常见的日志框架 JUL、JCL、Jboss-logging、logback、log4j、log4j2、slf4j.... 注意&#xff1a;SLF4j 类似于接口 Log4j &#xff0c;Logback 都是出自同一作者之手 JUL 为apache 公司产品 Spring&#xff08;commons-logging&#xff09;、Hibernate&#xff08;jboss…

万兆时代 TCP/IP如何赋能以太网飞跃

科技飞速发展&#xff0c;数据传输的需求日益增长&#xff0c;尤其是在物理、科研等领域&#xff0c;对数据传输的速度、稳定性和效率提出了更高的要求。在这样的背景下&#xff0c;万兆以太网&#xff08;10Gbit Ethernet&#xff09;以其高带宽、低延迟和强大的传输能力成为众…

视频监控摄像头国标GB28181配置参数逐条解析

转载&#xff1a;视频监控摄像头国标GB28181配置参数逐条解析 现在的很多信息化项目&#xff0c;都会涉及到国标GB28181的视频监控产品&#xff0c;当我们配置这些国标平台&#xff0c;录像机&#xff0c;摄像头时&#xff0c;如果对相关参数的定义不清楚的话&#xff0c;会给我…

Vulnhub:BlueSky

靶机下载地址 信息收集 主机发现 nmap扫描攻击机同网段存活主机。 nmap 192.168.31.0/24 -Pn -T4 靶机ip&#xff1a;192.168.31.171。 端口扫描 nmap 192.168.31.171 -A -p- -T4 开放端口22,8080。 目录扫描 访问8080端口&#xff0c;如图&#xff0c;是tomcat管理页面…

硬件工程师笔试面试——变压器

目录 9、变压器 9.1 基础 变压器原理图 变压器实物图 9.1.1 概念 9.1.2 变压器组成结构 9.1.3 变压器原理 9.1.4 变压器的类型 9.1.5 应用领域 9.2 相关问题 9.2.1 变压器的工作原理是什么? 9.2.2 如何选择合适的变压器类型? 9.2.3 变压器在实际应用中,如何进行…

安卓BLE蓝牙通讯

蓝牙测试demo 简介   Android手机间通过蓝牙方式进行通信&#xff0c;有两种常见的方式&#xff0c;一种是socket方式&#xff08;传统蓝牙&#xff09;&#xff0c;另一种是通过GATT&#xff08;BLE蓝牙&#xff09;。与传统蓝牙相比&#xff0c;BLE 旨在大幅降低功耗。这样…

iKuai使用及设置流程

iKuai使用及设置流程 iKuai安装步骤 一、配置主机 1.电脑连接ETH0网口 2.ETH1网口连接猫上面的千兆口 3.手动配置pc的IP地址和192.168.1.1./24在同一网段 3.浏览器输入192.168.1.1 admin admin 二、外网设置 1.直接联通电信网络设置 2.点击 网络设置-内外网设置-点击接…

Python “字符串操作” ——Python面试100道实战题目练习,巩固知识、检查技术、成功就业

本文主要是作为Python中列表的一些题目&#xff0c;方便学习完Python的元组之后进行一些知识检验&#xff0c;感兴趣的小伙伴可以试一试&#xff0c;含选择题、判断题、实战题、填空题&#xff0c;答案在第五章。 在做题之前可以先学习或者温习一下Python的列表&#xff0c;推荐…

食品检测与分类系统源码分享

食品检测与分类检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…

推荐10款最佳的电脑监控软件,知名电脑监控软件推荐

随着互联网和科技的飞速发展&#xff0c;电脑监控软件成为企业和个人用户管理和保护信息安全的必备工具。这些软件可以帮助你实时了解电脑的使用情况、保护隐私、优化工作效率&#xff0c;甚至防止潜在的安全威胁。在这篇文章中&#xff0c;我们将为你推荐10款最佳的电脑监控软…

iPhone 16系列:摄影艺术的全新演绎,探索影像新境界

在科技的浪潮中&#xff0c;智能手机摄影功能的进化从未停歇。 苹果公司即将推出的iPhone 16系列&#xff0c;以其卓越的相机升级和创新特性&#xff0c;再次站在了手机摄影的前沿。 从硬件到软件&#xff0c;从拍照体验到图像处理&#xff0c;iPhone 16系列都展现了其在移动…

1×4矩阵键盘详解(STM32)

目录 一、介绍 二、传感器原理 工作原理介绍 三、程序设计 main.c文件 1x4key.h文件 1x4key.c文件 四、实验效果 五、资料获取 项目分享 一、介绍 矩阵键盘是单片机外部设备中所使用排布类似于矩阵键盘组&#xff0c;矩阵式结构的键盘会比独立键盘复杂一点&#xff…

国内外ChatGPT网站集合,无限制使用【2024-09最新】~

经过我一年多以来&#xff0c;使用各种AI工具的体验&#xff0c;我收集了一批AI工具和站点 这些工具都是使用的最强最主流的模型&#xff0c;也都在各个领域里都独领风骚的产品。 而且&#xff0c;这些工具你都可以无限制地使用。 无论你是打工人、科研工作者、学生、文案写…

Python 数学建模——傅里叶变换时间序列分析

文章目录 前言原理Python 库函数实现单周期函数多周期函数真实数据挑战 前言 在数学建模过程中&#xff0c;得到一个序列 x 1 , ⋯ , x n x_1,\cdots,x_n x1​,⋯,xn​&#xff0c;我们首先要进行数据分析&#xff0c;其中就包括分析数据的周期性。这里的周期性不是数学上严格…

逆向学习系列(三)adb的使用

由于是记录学习&#xff0c;我就用结合自己的理解&#xff0c;用最通俗的语言进行讲解。 adb是android debug bridge的简写&#xff0c;其作用就是将电脑和手机相连接&#xff0c;用电脑控制手机。 一、adb哪里来 我使用的adb一般都是安装模拟器的时候&#xff0c;模拟器自带…

深入探索Android开发之Java核心技术学习大全

Android作为全球最流行的移动操作系统之一&#xff0c;其开发技能的需求日益增长。本文将为您介绍一套专为Android开发者设计的Java核心技术学习资料&#xff0c;包括详细的学习大纲、PDF文档、源代码以及配套视频教程&#xff0c;帮助您从Java基础到高级特性&#xff0c;再到A…

Basler 相机与LabVIEW进行集成

Basler 提供的相机驱动和 SDK (Software Development Kit) 允许用户通过 LabVIEW 对相机进行控制和图像采集。以下是 Basler 相机与 LabVIEW 集成的几种方式&#xff1a; 1. Baslers Pylon SDK Basler 提供的 Pylon SDK 是一套用于控制 Basler 相机的开发工具包&#xff0c;支…

13 Midjourney从零到商用·实战篇:漫画设计一条龙

大家好&#xff0c;经过前面十三篇文章,相信大家已经对Midjourney的使用非常熟悉了&#xff0c;那么现在我们开始进行实际的项目操作啦&#xff0c;想想是不是有点小激动呀&#xff0c;本篇文章为大家带来Midjourney在漫画制作领域的使用流程&#xff0c;同样也适用于现在短视频…