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. Windows Azure Platform Introduction (14) 申请海外的Windows Azure账户

    <Windows Azure Platform 系列文章目录> 本文的最后更新时间为:2017-12-27 本文介绍国内用户,注册和使用海外Azure账户. 前提: 1.需要一个有效的Wi ...

  2. 应用负载均衡之LVS(一)：基本概念和三种模式

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  3. [Python爬虫] Selenium爬取新浪微博客户端用户信息、热点话题及评论 (上)

    转载自:http://blog.csdn.net/eastmount/article/details/51231852 一. 文章介绍 源码下载地址:http://download.csdn.net/ ...

  4. 使用IntelliJ IDEA（PHPStorm）和xdebug在firefox、chrome中远程调试PHP

    很多PHP程序员都习惯于使用echo.var_dump和exit来中断和调试web应用程序,本文主要介绍结合xdebug.IntelliJ IDEA.Firefox/chrome/IE来远程调试PHP ...

  5. 关于js 全选 反选

    prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. attr  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. $("#selectAll ...

  6. Filezilla Server日志文件

    Filezilla Server版本:0.9.41. Filezilla Server日志文件在软件安装目录下Logs目录下. 但Filezilla Server默认不开始日志记录,如何开启filez ...

  7. Factorial数列的几种实现方式

    斐波那契数列很常见,实现的方法主要有递归,for,栈等,下面给出代码 import java.math.BigInteger; import java.util.Scanner; import jav ...

  8. 基于Parallax设计HTML视差效果

    年关将至,给大家拜年. 最近时间充裕了一点,给大家介绍一个比较有意思的控件:Parallax.它可以用来实现鼠标移动时,页面上的元素也做偏移的视差效果.在一些有表现层次,布局空旷的页面上,用来做Hea ...

  9. php提供的sapi有哪些？CGI、FastCGI、php-fpm、php-cgi解释

    一.前言 一直对PHP的sapi是什么东西好奇,在网上一查都是各种说fpm cgi fastcgi php-cgi 直到看了鸟哥的这篇文章介绍戳这里,看到源码下的sapi目录才有所了解. 二.sapi ...

  10. 对于任意大于1的自然数n，若n为奇数，则将n变为3n＋1，否则变为n的一半。 经过若干次这样的变换，一定会使n变为1

    对于任意大于1的自然数n,若n为奇数,则将n变为3n+1,否则变为n的一半.经过若干次这样的变换,一定会使n变为1.例如,3→10→5→16→8→4→2→1.输入n,输出变换的次数.n≤10 9 .样 ...