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. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  2. 万类之父——Object

    jdk1.8.0_144 Object类作为Java中的顶级类,位于java.lang包中.所有的类直接或者间接都继承自它.所以Object类中的方法在所有类中都可以直接调用.在深入介绍它的API时, ...

  3. 在.NetCore中使用Myrmec检测文件真实格式

    Myrmec 是什么? Myrmec 是一个用于检测文件格式的库,Myrmec不同于其它库或者手写检测代码,Myrmec不依赖文件扩展名(在实际使用中,你的用户很可能使用虚假的扩展名欺骗你的应用程序) ...

  4. centos 7 配置 到多站点设置

    背景 : 前面配置了 win2008 WAMP环境, 这次因为一些事情 新买了服务器  只有 win2003 和 win2012, 试着配置2012 WAMP环境 发现比 2008 缺的配置文件多很多 ...

  5. 一、爬虫的基本体系和urllib的基本使用

    爬虫 网络是一爬虫种自动获取网页内容的程序,是搜索引擎的重要组成部分.网络爬虫为搜索引擎从万维网下载网页.一般分为传统爬虫和聚焦爬虫. 爬虫的分类 传统爬虫从一个或若干初始网页的URL开始,获得初始网 ...

  6. 理解Java类加载机制(译文)

    理解java类加载机制 你想写类加载器?或者你遇到了ClassCastException异常,或者你遇到了奇怪的LinkageError状态约束异常.应该仔细看看java类的加载处理了. 什么是类加载 ...

  7. 观察者模式—jdk自带源码分析

    一:观察者模式简介 二:jdk实现观察者模式的源码 三:实际例子 四:观察者模式的优点和不足 五:总结 一:观察者模式简介 有时又被称为发布(publish )-订阅(Subscribe)模式.模型- ...

  8. ajax同步与异步的坑

      之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...

  9. iOS 使用NTP时间同步服务

    githup上有相关开源库, ios-ntp 导入即可使用 NetworkClock *netClock = [NetworkClock sharedNetworkClock]; netClock.n ...

  10. Docker MySQL备份

    建立备份的MySQL容器 docker run --name mysql-back -e MYSQL_ROOT_PASSWORD=root -v /srv/mysql/backup:/mysql/ba ...