需求:这边是uniapp开发的APP  需要内嵌H5(vue),就得使用web-view跳转网页

H5端

 在vue的index,html文件引入web-view的插件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

在vue界面当中
        // 通过事件使用uniapp的 方法
        postMsg(){
            // 重点 “uni.postMessage,像APP端发送消息”
            uni.postMessage({
                data: {
                action: '我是消息'
                }
            });
        },

uniapp端

<template>
<view :style="'paddingTop:' + statusBarHeight + 'px;backgroundColor:' + warpperBgColor">
<web-view ref="webview" @message="getMessage" @onPostMessage="getPostMessage" :src="url" :style="'height: ' + windowHeight + 'px;'" />
</view>
</template>

设置内容宽高
methods: {
 设置内容宽高

nitializeUrl() {
            let info = uni.getSystemInfoSync();
            this.windowHeight = info.windowHeight - info.statusBarHeight;
            this.statusBarHeight = info.statusBarHeight;
        },
 
  H5与APP通信    这里接收H5传递的参数,触发事件

        getMessage(e) {
            const val = e.detail.data[0].action || ''
            if(val) {
                uni.reLaunch({
                    url:'/pages/home'
                })
            }
           
        },
}

 
 

  

uniapp开发使用 web-view APP 与 H5 (vue)通信的更多相关文章

  1. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  2. 【web开发 | 移动APP开发】 Web 移动开发指南(2017.01.05更新)

    版本记录 - 版本1.0 创建文章(2016.12.30) - 版本1.1 更正了hybird相关知识:增加了参考文章(2017.01.05): + Web APP更正为响应式移动站点与页面,简称响应 ...

  3. 多端开发之uniapp开发app

    最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯 ...

  4. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  5. 关于APP,原生和H5开发技术的争论 APP开发技术选型判断依据

    关于APP,原生和H5开发技术的争论 App的开发技术,目前流行的两种方式,原生和Html5.原生分了安卓平台和ios平台(还有小众的黑莓.死去的塞班就不说了),H5就是Html5. 目前争论不休的问 ...

  6. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

  7. 使用uView UI+UniApp开发微信小程序

    在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web A ...

  8. 利用C#开发移动跨平台Hybrid App(一):从Native端聊Hybrid的实现

    0x00 前言 前一段时间分别读了两篇博客,分别是叶小钗兄的<浅谈Hybrid技术的设计与实现>以及徐磊哥的<从技术经理的角度算一算,如何可以多快好省的做个app>.受到了很多 ...

  9. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  10. 使用uni-app开发微信小程序

    uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目, ...

随机推荐

  1. 第三篇:前端基础之JavaScript

    前端基础之JavaScript   JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaS ...

  2. Hive详解(04) - hive函数的使用

    Hive详解(04) - hive函数的使用 系统内置函数 查看系统自带的函数 hive> show functions; 显示自带的函数的用法 hive> desc function u ...

  3. 写一个 Markdown 博客客户端

    这个"伪需求"是最近才想到的. 关于文章管理的想法,说来话长.我最初是在 CSDN 写技术文章,就用网页上的编辑器.后来在 CppBlog 写,用上了 Windows Live W ...

  4. 《深度探索C++对象模型》第六章 执行期语意学

    new运算符和delete运算符 运算符new看似是一个简单的运算,比如: int *pi=new int(5); 但是它实际由两个步骤完成: 1.通过适当的new运算符函数实体,配置所需的内存: / ...

  5. [C++标准模板库:自修教程与参考手册]关于vector

    什么是vector 可以这样认为,vector就是一个动态的数组,其中的元素必须具备assignable(可赋值)和copyable(可拷贝)两个性质. vector的一些重要的性质 vector支持 ...

  6. CF803G Periodic RMQ Problem

    简要题意 你需要维护一个序列 \(a\),有 \(q\) 个操作,支持: 1 l r x 将 \([l,r]\) 赋值为 \(x\). 2 l r 询问 \([l,r]\) 的最小值. 为了加大难度, ...

  7. SpringMVC学习笔记 - 第一章 - 工作流程、Bean加载控制、请求与响应(参数接收与内容返回)、RESTful

    [前置内容]Spring 学习笔记全系列传送门: Spring学习笔记 - 第一章 - IoC(控制反转).IoC容器.Bean的实例化与生命周期.DI(依赖注入) Spring学习笔记 - 第二章 ...

  8. C++Vector源码解析(侯捷STL)

    vector是动态空间,随着元素的加入,它的内部机制会自行扩充空间以容纳新的元素.vector的实现技术,关键在于对大小的控制以及重新配置时的数据移动效率. 一.vector的数据结构 vector采 ...

  9. Unity_UIWidgets - 组件Drawer

    Unity_UIWidgets - 组件Drawer 组件Drawer Drawer 构造 代码 效果 Drawer使用完毕 结语 图标Icon QQ 今日无推荐 组件Drawer 各位伙伴,周日愉快 ...

  10. Pulsar负载均衡原理及优化

    前言 前段时间我们在升级 Pulsar 版本的时候发现升级后最后一个节点始终没有流量. 虽然对业务使用没有任何影响,但负载不均会导致资源的浪费. 和同事沟通后得知之前的升级也会出现这样的情况,最终还是 ...