mui开发app之webview是什么

WebView(网络视图)能加载显示网页，能够将其视为一个浏览器。

在Android手机中，网页的解析和显示网页的能力是由webkit内核实现的。

（如chrome浏览器使用的是webkit内核，如今，webkit被内置到了android系统中）

webview对网页处理也是交给强大的webkit作的

 

webview在android SDK（原生）中：

封装为一个叫作WebView组件，经过这个组件能够在app中显示html+css+js，固然也就能够显示一个远程url，好比用它打开百度首页是能够的。

能够理解为：android开发中的一个activity里使用了webview组件，并打开了一个html页面呈现给用户。

其中“activity”是android原生开发时的“一张页面”，app的所谓跳转到不一样“页”是在activity中跳来跳去，activity是java的一个类，布局则是使用xml（若是没作过原生android开发就这么理解就行）

 

webview在mui app框架开发中：

在mui开发中，这些webview就是一张一张的网页。

这些网页是webview对象，其操做方法被封装在html5+的plus.webview对象中

webview自己只是个浏览器效果组件，切换即便网页之间的跳转，理论上不可能像原生的activity中切换同样流畅，自己也不会有什么动画。

还好，mui的开发组，dcloud（数字天堂）和他们的html5+中国产业联盟（社区）实现了webview切换的动画效果，他们把这些webview映射到了真正的java webview，调用的也是原生的activity切换动画，从而使得webview切换也能够像原生app activity同样切换的效果！

 

关于dcloud的html5+和native.js技术请看我另外一篇博客： http://www.cnblogs.com/devilyouwei/p/6793609.html

关于原生android webview这个组件使用的博客：http://www.jianshu.com/p/d2f5ae6b4927

 

简约图：

 

 

原生开发和mui的hybrid模式区别图：

 

先来谈谈我对mui的webview的理解：

使用mui开发的app，实际上是在作web前端开发，打开的webview是网页，用js+html+css替代了原来的xml+java activity的传统android开发模式，h5最终性能相对原生必定是下降了不少（主要缘由不在webkit的解析速度，而是最终全部的ui和业务逻辑仍是会转化为android sdk交由java去实现，google可没有直接提供android的js开发接口，mui的dcloud则是采用了native.js来提供js开发接口（js映射为原生代码）

咱们按照传统网页的方式去理解：

将app理解为浏览器，将webview理解为浏览器下不一样标签tab，每个tab也是一个不一样的页面，浏览器浏览能够在tab之中切换，以此来实现app不一样webview（页面）的切换

 

场景一：

在mainfest.json中咱们配置的首页，好比login.html，而后咱们启动app，login.html将会第一个呈如今咱们屏幕上，这就是第一个tab标签（称之为launchWebView），若是此时咱们关闭这个tab，那么浏览器没有其余tab将会关闭。

app也是一个道理，只有一个webView的状况下（假设就是launchWebView，首页），将会退出，能够在首页login.html使用plus.webview.getLaunchWebView().close()测试，app将会直接退出！

（在原生的android开发中，若是只有一个activity的时候关闭当前activity也会退出app，其实webview之于html5 app，相较于，activity之于android app，逻辑处理十分类似^_^）

 

场景二：

浏览器已经有了首页的tab，咱们新建更多tab，浏览更多页面，而且跳转到这些新tab下

这就像使用mui.openWindow()方法打开新的webview，该方法传入一些参数，以下官方说法：

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度，默认为100%
      height:newpage-height,//新页面高度，默认为100%
      ......
    },
    extras:{
      .....//自定义扩展参数，能够用来处理页面间传值
    },
    createNew:false,//是否重复建立一样id的webview，默认为false:不重复建立，直接显示
    show:{
      autoShow:true,//页面loaded事件发生后自动显示，默认为true
      aniShow:animationType,//页面显示动画，默认为”slide-in-right“；
      duration:animationTime//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
    },
    waiting:{
      autoShow:true,//自动显示等待框，默认为true
      title:'正在加载...',//等待对话框上显示的提示内容
      options:{
        width:waiting-dialog-widht,//等待框背景区域宽度，默认根据内容自动计算合适宽度
        height:waiting-dialog-height,//等待框背景区域高度，默认根据内容自动计算合适高度
        ......
      }
    }
})

openWindow打开了一个新的webView而且跳转到了新的webView，就像浏览器新建一个tab而且切换过去，只不过切换过程带了参数，实现了动画（这由native.js交给了原生动画实现的），传递页面参数，这也是比浏览器访问网页的强大之处

openWindow遇到已经打开过而且id仍然在缓存中的webview（这些webview一般是被hide()掉的），会直接跳转过去，至关于getWebviewById().show()

openWindow有两个核心参数，一个是url表示打开的html文件，打开tab也得知道网页地址对吧？还一个是id，这个参数至关于句柄，之后寻找这个webview就靠它了，使用getWebviewById()方法抓到这个webview并进行操做！

请注意：openWindow下有一个特殊的参数：createNew

若是它为false，使用openWindow打开新窗口的时候，会先判断是否是有同样id的webview，若是有，直接跳过去，没有的话，就新建一个窗口再跳过去！

若是它是true，使用openWindow打开新窗口的时候，无论有没有相同id的tab，都回去新建立一个，也就是可能会建立重复ID的webview，这是很蛋疼的，由于会形成app跳转webview时，与预期效果不一样（跳转的webview不是本身想要的），或者getWebviewById()返回的不是本身想要的webview对象，形成误操做。

请尽可能不要使用createNew，除非特殊的页面须要建立重复的多个。

注：我遇到过建立了重复的webview后形成的自定义触发事件（fire）发生了意想不到的结果，在返回前，对返回页面的dom进行修改刷新，但dom并无被改变，实际上是由于重复webview，修改了别的！

 

场景三：

我要关闭一个页面！

方法一：隐藏掉（非真关闭），这样会暂时从当前webview切出去，返回上一个webview，可是这样不会清除这个webview，webview依然保存在缓存中。

此种方法用于不须要反复刷新建立的页面，打开一次后长时间驻留在内存中的webview，使用plus.webview.getWebviewById().hide()隐藏，同理使用show()方法再次唤出这个webview

此种方法打开webview下的html是不会从新执行一遍JS，也不会再次渲染CSS了。通常采用自定义事件监听，而后触发相应的JS。

 

方法二：触发mui.back()或返回事件，这里注意了back并不会像浏览器那样history.go(-1)返回上一页，而是至关于浏览器直接关闭当前tab！

就是说mui.back()将会关闭当前的webview后返回上一个webview，此时咱们若是使用plus.webview.getWebviewById()获取那个被返回的webview已是查找不到，由于webview被关闭了，缓存也消失了。

下一次打开须要从新加载整个html页面，从新执行一遍JS代码，从新渲染一次CSS布局

 

方法三：不要返回，而要关闭指定的一个webview，那使用plus.webview.getWebviewById().close()便可，这是不带返回效果的关闭某个页面。

好比关闭当前的页面，plus.webview.currentWebview().close()，这个方法的效果会和mui.back()同样。

 

方法四：直接清理掉，清理掉的话将会致使页面跳转不产生动画或者显示加载中，由于页面将被认为从未打开过，使用：plus.webview.getWebviewById().clear()

 

终极关闭大法：假设我设置的主页是login.html，如今个人用户退出了登录，那么我要清空他已经打开的全部webview，不留使用痕迹，使用以下代码：

    toLogin = function() {
        var all = plus.webview.all();
        var launch = plus.webview.getLaunchWebview() //基座，不能够关掉
        for(var i = 0; i < all.length; i++) {
            if(all[i] === launch)
                continue;
            all[i].close();
            all[i].clear();
        }
        //马上退出
        setTimeout(function() {
            launch.show();　　//不要从新打开login，app的基座就是login页面，直接show出来就好了
        }, 0);
    }

其中不能粗鲁的把全部的webview通通关闭并清空，那将会致使app直接关闭，只要仅剩的最后一个webview被关闭，也就默认app退出，应保留基座：launchWebView（就是首页）！

 

场景四：

打开已经打开过而且没有被close或者clear的webview：

使用：plus.webview.getWebviewById().show()

使用：plus.webview.getWebviewById().hide()　　//隐藏掉

注意：被关闭（close）和清空（clear），返回掉（back）的webview将会返回null，不能够操做！而且每次从新openWindow打开的时候都会从新加载页面，执行一遍页面的JS代码

 

总结一下webview！

mui提供的plus对象封装了对webview的操做，hbuilder中输入plus.webview便可获取对象下面的变量

下面有三个get方法获取webview：

分别获取：基座（就是首页），当前顶部页面（其实就是当前显示的），根据id得到webview

返回的是WebViewObject，这个object下面有：

等等的方法，自行在hbuilder中查看吧！