App页面是运行在WebView中的，一个App页面对应一个WebView，本例实现两个WebView之间的跳转。

实现过程（用到了MUI框架）：

1、页面标识+跳转按钮（index.html、main.html）

2、分别对两页面的按钮添加监听事件

3、在index.html页面中创建id为main的WebView,添加main.html页面的路径

4、在main.html页面中获取当前的WebView,将其隐藏

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.      <title></title>
  7.  </head>
  8.  <body>
  9.      这是main.html页面
  10.  <button type="button" id="gobackBtn">点击回到index.html页面</button>
  11.  <script type="text/javascript" src="js/mui.min.js"></script>
  12.  <script type="text/javascript">
  13.      document.getElementById("gobackBtn").addEventListener('click',function(){
  14.          var currentWV=plus.webview.currentWebview();//获取当前webview
  15.          //var currentWV=plus.getWebviewById("main"); //通过webview的id来获取
  16.          currentWV.hide();
  17.      })
  18.  </script>
  19.  </body>
  20.  </hmain

main.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.      <title></title>
  7.  </head>
  8.  <body>
  9.      这是index.html页面
  10.      <button type="button" id="btn">点击跳转至main.html页面</button>
  11.      <script type="text/javascript" src="js/mui.js"></script>
  12.      <script language="JavaScript">
  13.  //使用html5+实现页面跳转
  14.  /*
  15.          document.getElementById('btn').addEventListener('click',function(){
  16.              //先判断是否已经创建了id为main的webview
  17.              //需要获取到main的webview
  18.              var mainwv=plus.webview.getWebviewById('main');
  19.              if(!mainwv){//mianwv是null,mainwv是false,!mainwv是true成立。
  20.                  var main=plus.webview.create("main.html","main");//创建webview
  21.              }
  22.              mainwv.show();
  23.          })
  24.  */
  25.  //使用mui来实现
  26.  document.getElementById('btn').addEventListener('click',function(){
  27.  mui.openWindow('main.html','main');//相当于下面的代码
  28.  })
  29.  /*
  30.               var mainwv=plus.webview.getWebviewById('main');
  31.              if(!mainwv){//mianwv是null的话mainwv是false,!mainwv是true成立。
  32.                  var main=plus.webview.create("main.html","main");//创建webview
  33.              }
  34.              mainwv.show();
  35.  */
  36.      </script>
  37.  </body>
  38.  </index

index.html

WebView的使用--Hybrid App的更多相关文章

  1. Hybrid App 开发初探：使用 WebView 装载页面

    Hybrid App 是混合模式应用的简称,兼具 Native App 和 Web App 两种模式应用的优势,开发成本低,拥有 Web 技术跨平台特性.目前大家所知道的基于中间件的移动开发框架都是采 ...

  2. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  3. Hybrid App 应用开发中 9 个必备知识点复习(WebView / 调试 等)

    前言 我们大前端团队内部 ?每周一练 的知识复习计划继续加油,本篇文章是 <Hybrid APP 混合应用专题> 主题的第二期和第三期的合集. 这一期共整理了 10 个问题,和相应的参考答 ...

  4. appium for hybrid app 处理webview

    之前研究了一段时间的appium for native app 相应的总结如下:                                            appium测试环境搭建 :ht ...

  5. Hybrid App技术批量制作APP应用与跨平台解决方案

    前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述下对于前 ...

  6. 利用C#开发移动跨平台Hybrid App（一）：从Native端聊Hybrid的实现

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

  7. Hybrid App经验解读 一

    郑昀编纂 关键词:Hybrid,Zepto,Fastclick,Backbone,sui,SPA,pushState,跨域,CORS click 事件还是 tap 事件? Zepto 的 show/h ...

  8. 【转载】用Ionic开发hybrid APP

    使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势.而且私以为在目前激烈而又变化快速的移动 ...

  9. hybrid app

    hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...

随机推荐

  1. Xcode断点 中断不正常 每次断点都进入汇编

    该问题是由于XCode的设置引起,其修改方法是: 选择Xcode菜单 -> Debug ->Debug workflow,将Alway show Disassembly前面的勾去掉就好了.

  2. qt中的事件机制

    事件 1.QEvent -->类型 -> QKeyEvent QEvent::KeyRelease QEvent::MouseMove -> QMouseEvent 2.事件处理过程 ...

  3. tcp_sync_server and tcp_sync_client

    #include <iostream> #include <fstream> #include <sstream> #include <boost/asio. ...

  4. 浅学vue

    因之前项目接触了vue,从此我被迷住,简洁而不失优雅,小巧而不乏大匠. 首先我们要了解vue,什么是vue,正如官网所说:Vue.js 是一套构建用户界面的渐进式框架,Vue 的核心库只关注视图层.V ...

  5. XAMPP的配置与使用

    XAMPP的配置与使用 一.起因 一开始,我在本地手动DIY安装了WAMPP环境,其中经历了很长时间的折腾,原因是独立安装Apache和MySQL,以及PHP的时候,屡次遇到版本兼容问题,我主要的时间 ...

  6. CentOS7中关闭firewall，并使用iptables管理防火墙

    背景描述 在使用Docker时,启用centos7默认的firewall,启动端口映射时,防火墙规则不生效.docker默认使用了iptables防火墙机制.所以需要关闭firewall使用iptab ...

  7. 设为首页/加入收藏JS代码

    传统网站常用的设为首页/加入收藏js代码 <a href="javascript:void(0)" onclick="sethome(this,window.loc ...

  8. SpringMvc笔记-注解

    @RequestParam(value = "username", defaultValue = "haha", required = true) 有四个参数 ...

  9. ElasticSearch 5.0.0 集群安装部署文档

    1.  搭建环境 3台物理机 操作系统 centos7 es1   192.168.31.141   4g内存   2核 es2   192.168.31.142   4g内存   2核 es3    ...

  10. 《精通android网络开发》--使用Socket实现数据通信

    No1: 网络传输应用通常使用TCP.IP或UDP这三种协议实现数据传输.在传输数据的过程中,需要通过一个双向的通信连接实现数据的交互.在这个传输过程中,通常将这个双向链路的一端称为Socket,一个 ...