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

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

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

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

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

4、在main.html页面中获取当前的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>

 </head>

 <body>

     这是main.html页面

 <button type="button" id="gobackBtn">点击回到index.html页面</button>

 <script type="text/javascript" src="js/mui.min.js"></script>

 <script type="text/javascript">

     document.getElementById("gobackBtn").addEventListener('click',function(){

         var currentWV=plus.webview.currentWebview();//获取当前webview

         //var currentWV=plus.getWebviewById("main"); //通过webview的id来获取

         currentWV.hide();

     })

 </script>

 </body>

 </hmain

main.html

 <!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>

 </head>

 <body>

     这是index.html页面

     <button type="button" id="btn">点击跳转至main.html页面</button>

     <script type="text/javascript" src="js/mui.js"></script>

     <script language="JavaScript">

 //使用html5+实现页面跳转

 /*

         document.getElementById('btn').addEventListener('click',function(){

             //先判断是否已经创建了id为main的webview

             //需要获取到main的webview

             var mainwv=plus.webview.getWebviewById('main');

             if(!mainwv){//mianwv是null,mainwv是false,!mainwv是true成立。

                 var main=plus.webview.create("main.html","main");//创建webview

             }

             mainwv.show();

         })

 */

 //使用mui来实现

 document.getElementById('btn').addEventListener('click',function(){

 mui.openWindow('main.html','main');//相当于下面的代码

 })

 /*

              var mainwv=plus.webview.getWebviewById('main');

             if(!mainwv){//mianwv是null的话mainwv是false,!mainwv是true成立。

                 var main=plus.webview.create("main.html","main");//创建webview

             }

             mainwv.show();

 */

     </script>

 </body>

 </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. 940D Alena And The Heater

    传送门 题目大意 给出两个长度为N的数组A,B,以及一种计算规律: 若t[i]=1,需满足t[i-1]=t[i-2]=t[i-3]=t[i-4]=0,以及max{A[i],A[i-1],A[i-2], ...

  2. VMware Workstation All Key

    官方下载:https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 懒人打包:链接:https:/ ...

  3. 正本清源区块链——Caoz

    正本清源区块链 说明:以下内容整理自Caoz的<正本清源区块链>,如有不妥,请联系我修改或删除. 简介 不讨论炒币!不讨论炒币!不讨论炒币! 本课程内容分为两部分: 第一部分,烧脑篇,介绍 ...

  4. 搭建VUE项目的准备（利用vue-cli来构建项目）

    首先需要明确的是:Vue.js 不支持 IE8 及其以下 IE 版本,一般用与移动端,基础:开启最高权限的DOS命令(否则会出现意外的错误提示)   注意:个人小推荐如果我们不知道如何才能开启最高权限 ...

  5. 接口-以PHP为例

    <?php //使用程序模拟现实情况 //使用规范(方法/属性) interface iUSB { public function start(); public function stop() ...

  6. 使用canvas编写时间轴插件

    使用canvas编写时间轴插件 背景 项目中有一个视频广场的功能,需要一个时间轴类似视频播放中进度条功能一样显示录像情况,并且可以点击.拖动.放大缩小展示时间轴,获取到时间轴的某个时间.原来的时间轴是 ...

  7. Jar程序使用MyBatis集成阿里巴巴druid连接池

    在写jar程序,而不是web程序的时候,使用mybatis作为持久层,可以集成POOLED连接池,而阿里的druid不能用,确实很郁闷.不过有办法. 首先准备好数据库配置文件 然后对Druid进行一个 ...

  8. html5版 音乐播放器

    html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...

  9. CodeForces-747C

    直接模拟就行,用一个数组保存某个server上次是在哪个task里面即可很方便判断它现在是否可用. AC代码: #include<cstdio> #include<cstring&g ...

  10. openssl 生成证书基本原理

    摘自:http://blog.csdn.net/oldmtn/article/details/52208747 1. 基本原理 公司一个项目要进行交易数据传输,因为这个项目银行那边也是刚刚开始启动,所 ...