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. rsync实现数据增量备份

    环境说明: 主机ip:192.168.0.201 需备份的目录:/opt/mail 备份机器ip:192.168.0.215 1.编辑/etc/rsyncd.conf文件(etc目录不存在的话,需要手 ...

  2. webstorm你不知道的秘密

    相信你们用webstorm肯定都会用上下面介绍的Emmet插件这个可以自带的哦 Emmet语法 子代:> 兄弟:+ 父代:^ 重复:* 成组:() ID:# class:. 属性:[] 编号:$ ...

  3. 个人微信接入图灵机器人(python版)

    准备工作 itchat,requests 注册图灵账号,创建机器人,获取API-KEY 代码实现 import itchat from itchat.content import * import j ...

  4. etcd集群部署

    etcd是用于共享配置和服务发现的分布式KV存储系统,随着CoreOS和Kubernetes等项目在开源社区日益火热,它们都用到了etcd组件作为一个高可用.强一致性的服务发现存储仓库.操作系统版本: ...

  5. linear-grident的属性和使用以及对颜色后面参数(百分比)的理解

    linear-grident的属性和使用   css3新增Gradient属性,用来增加渐变的效果,渐变分为线性渐变 linear-grident 和 径向渐变 radial-grident,这篇文章 ...

  6. 自己制作ssl证书：自己签发免费ssl证书，为nginx生成自签名ssl证书

    这里说下Linux 系统怎么通过openssl命令生成 证书. 首先执行如下命令生成一个key openssl genrsa -des3 -out ssl.key 1024 然后他会要求你输入这个ke ...

  7. iperf命令

    iperf命令网络测试 iperf命令是一个网络性能测试工具.iperf可以测试TCP和UDP带宽质量.iperf可以测量最大TCP带宽,具有多种参数和UDP特性.iperf可以报告带宽,延迟抖动和数 ...

  8. 收藏清单: python测试框架最全资源汇总

    xUnit frameworks 单元测试框架 frameworks 框架 unittest - python自带的单元测试库,开箱即用 unittest2 - 加强版的单元测试框架,适用于Pytho ...

  9. spark RDD，DataFrame,DataSet 介绍

    弹性分布式数据集(Resilient Distributed Dataset,RDD) RDD是Spark一开始就提供的主要API,从根本上来说,一个RDD就是你的数据的一个不可变的分布式元素集合,在 ...

  10. UVA1213

    先打表,再回溯+剪枝 AC代码: #include<cstdio> #include<cstring> #include<cmath> const int maxn ...