uniapp与webview之间的相互传值的实现

1.uni-app 如何发送数据到 H5？ 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：

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

2.webview向uniapp传值

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

uniapp接受

//message接受方法

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

到此这篇关于uniapp与webview之间的相互传值的实现的文章就介绍到这了,更多相关uniapp与webview相互传值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

  • 使用 UniApp 实现小程序的微信登录功能

    1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • centos7.2搭建nginx的web服务器部署uniapp项目

    Panther 从一位小白走来,虽然现在也还是小白,但是我取之于民,不定时将自己所学到的都分享给大家,在上一篇博客中有讲到thingsboard的多设备共显,因为现在处于学习的阶段接触的东西比较多同样也比较杂,希望我的文章可以给大家提供一丢丢的帮助 one 购买腾讯云 https://cloud.tencent.com/ 产品 – 云服务器 – 立即选购 – 快速配置 – 地域 – 入门配置 – centos 7.2 – 购买 事例控制台 https://console.cloud.tencen

  • uniapp与webview之间的相互传值的实现

    1.uni-app 如何发送数据到 H5? 其实很接单.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中: <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view>

  • 详解vue组件之间相互传值的方式

    概述 我们都知道 Vue 作为一个轻量级的前端框架,其核心就是组件化开发.Vue 就是由一个一个的组件构成的,组件化是它的精髓,也是最强大的功能之一.而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. 但在实际项目开发过程中,我们需要访问其他组件的数据,这样就就有了组件通信的问题.在 vue 中组件之间的关系有:父子,兄弟,隔代.针对不同的关系,怎么实现数据传递,就是接下来要讲的. 一.父组件向子组件传值 即父组件通过属性的方式向子组件传值,子组件通过 props 来接收

  • C#开发Winform实现窗体间相互传值

    目录 一.前言 二.公共属性 三.公共方法 四.委托 1.定义一个委托 2.实例化一个此委托类型的事件 3.定义要执行的方法 4.将方法绑定到事件 5.触发委托 一.前言 我们在做Winform窗体程序开发的时候,会经常遇到窗体之间相互传值.假设有下面的一个场景:一个主窗体和一个子窗体,点击主窗体上面的按钮给子窗体传值,并在子窗体上面显示出来,一般会有如下几种方式实现. 二.公共属性 我们可以在子窗体里面定义一个公共的属性,然后在父窗体里面给公共属性赋值,这样可以实现窗体之间传值,子窗体代码如下

  • vue3 父子组件间相互传值方式

    vue3 父子组件间相互传值方式

    目录 vue3父子组件相互传值 父向子传值 子组件向父组件传值 vue3父子组件传值的注意事项 解决办法:两种 vue3父子组件相互传值 父向子传值 父 <pie-chart :pieData="post_data.pid" /> 父组件只需在子组件上声明一个变量即可. :代表变量,可以传变量;否则只能传常量 子 export default {     props:['pieData'],     setup(props,ctx) {         const pie_

  • json实现前后台的相互传值详解

    前后台的相互传值如果值太多,写的麻烦累人,且容易出错.这里整理出一套使用标记 标签属性的办法来传值, 后台取值和前台的绑定都有了大大的简化. 一.把json对象转成字符串 复制代码 代码如下: $.extend({          //将json对象转换成字符串   [貌似jquery没有自带的这种方法]          toJSONString: function (object) {              if (object == null)                  re

  • AS3.0 实例学习 熟悉AS3的package，以及多个package之间的相互通信

    熟悉AS3的package,以及多个package之间的相互通信 说明:一个很简单的demo,有4个按钮,当鼠标划过和移开时会呈现出不同的状态,单击后变成disabled,再点击其他的按钮时,之前disabled的按钮恢复,被点击的按钮失效. 演示:http://www.live-my-life-with-yuyi.com/as3_cases/communicating/ 准备工作:打开源文件communicating_final.fla,点击属性里的发布设置,点击Actionscript3旁边

  • 关于Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象 Demo1 父页面fu.html: <!DOCT

  • Android Fragment与Activity之间的相互通信实例代码

    Android Fragment与Activity之间的相互通信 前言 自从Android3.0引入Fragment之后,主要是为了支持动态灵活的界面设计和屏幕的适配问题.Fragmenty不能单独存在,必须依赖Activity作为视图展示的一部分,同事它具有自己的生命周期,接收它自己的事件,具有更加灵活的特性,如今Fragment已经被广泛的应用到App开发中,最常见的就是单Activity多Fragment的模式.Fragment依赖于Activity而存在,就不可避免需要与Activity

  • 详解 WebView 与 JS 交互传值问题

    详解 WebView 与 JS 交互传值问题

    随着混合开发模式比较流行,很多时候,我们需要在原生的基础上,使用 WebView 加载网页,这样控制更加方便.今天我们来看看,如何将 Java 对象 和 List 集合传值给 JS 调用. 如何将 Java 对象实例传值给 JS 其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象,方法非常简单.我们来举个例子. html 文件 我们在本地写了一个 html 文件,放在 assets 目录中. <!DOCTYPE html> <html>

  • pyqt 多窗口之间的相互调用方法

    * 在编程开发中,一个程序不可避免的需要多窗口操作来实现具体的功能. 实现此功能的基本步骤(以三个窗口为例,使用主窗口调用其它两个窗口) # 主窗口 from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(800, 600)

随机推荐