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. 2018/1/15 JAVA多线程相关

    本文不说synchronized相关,它就是JAVA的一个保留关键字,jdk自己实现了它,但说真的,可应用场景真的少,相比lock接口,它还是被淘汰好吧; 首先,说说lock接口,lock接口是一个工 ...

  2. log4cpp退出时内存泄露的修复方案

    1.缘由 一直对log4cpp非常有好感,就在自己的项目中集成了log4cpp1.1.1版本,并围绕着它建立了一系列的封装函数方便外部调用.写完了一个测试代码后,忽然想看看自己写的程序有没有内存泄露问 ...

  3. python爬站长之家写一个信息搜集器

    前言:不知道写什么好,绕来绕去还是写回爬虫这一块. 之前的都爬了一遍.这次爬点好用一点的网站. 0x01: 自行备好requests模块 目标站:http://tool.chinaz.com/ 0x2 ...

  4. Excel地图插件（ExcelMaps）

    1 软件概述 一款基于Excel表格进行地理数据挖掘.坐标转换.地图绘制.地图图表等操作的工具类应用软件.具有易用.高效.稳定的特点,能够满足地理数据应用及处理的基本需求,也可提供个性化定制开发服务. ...

  5. Quartz.NET 3.0 正式发布

    Quartz.NET是一个强大.开源.轻量的作业调度框架,你能够用它来为执行一个作业而创建简单的或复杂的作业调度.它有很多特征,如:数据库支持,集群,插件,支持cron-like表达式等等.在2017 ...

  6. 在CentOS上部署多节点Citus集群

    1 在所有节点执行以下步骤 Step 01 添加Citus Repostory # Add Citus repository for package manager curl https://inst ...

  7. Word Press使用

    邮件发送功能插件:Easy WP SMTP LNMP一键包网站环境WordPress程序无法后台切换安装主题 https://help.aliyun.com/document_detail/44619 ...

  8. wordpress配置固定链接nginx访问404问题解决方法

    WordPress支持使用固定链接,但是在ngnix环境下,访问页面后出现404, 其实官方是有文档说明的,需要单独写配置, 我这边配置的示例代码如下: server { listen       8 ...

  9. python2 => python3 踩坑集合

    报错内容: ModuleNotFoundError: No module named 'md5' 解析: 这是 python2 的库,python3 已经把它包含进 hashlib 库里了 解决方法 ...

  10. MySQL Server 5.0安装教程

    相信很多朋友刚开始接触mysql数据库服务器,下面是mysql的安装教程,步骤明细也有详细的说明. 工具/原料   mysql MySQL安装的图解   1 打开下载的mysql安装文件mysql-5 ...