mui开发app之webview是什么

首页 > 代码库 > mui开发app之webview是什么

2024-09-01 22:12:31 220人阅读

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

当我们使用mui开发html5+app的时候，其实是调用了设备的webkit内核，即对浏览器的调用，浏览器再实现了设备接口对设备进行操作，目前实现的html5+可以调用摄像，录音，gps等这些更底层的东西，当然是针对移动设备浏览器内核而言的

我们甚至能使用iostream，关于文件流的应用，是实现在浏览器提供的沙盒目录中，

目前5+为了保证应用的安全，plus.io API限制了仅可访问应用沙盒的4个公开目录_www(只读)、_doc、_downloads、_documents，不允许访问其它目录，建议将下载的文件保存到上面三个可写目录中。

先来谈谈我对webview的理解。我们打个比方：

使用mui开发的app，纯粹的说还是html，打开的是网页，按照传统网页的方式去理解：

我们将app理解为浏览器，将webview理解为浏览器下不同标签tab，每一个tab也是一个不同的页面，浏览器浏览可以在tab之中切换，以此来实现app不同页面的切换，使用mui.openWindow表示创建新的tab标签（webview），每一个tab有自己的id，并且tab可以新增重复（createNew）

技术分享

场景一：

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

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

场景二：

浏览器已经有了首页的tab，我们新建一个tab，并且跳转到新tab下

app，webview使用了mui.openWindow()方法，该方法传入一些参数，如下官方说法：

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并且切换过去，只不过切换过程带了参数，实现了动画，等复杂的现象，这也是比浏览器访问网页的强大之处

技术分享

openWindow有两个核心参数，一个是url表示打开的html文件，打开tab也得知道网页地址对吧？还一个是id，这个参数相当于句柄，以后寻找这个webview就靠它了

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

如果它为false，使用openWindow打开新窗口的时候，会先判断是不是有一样id，url的webview，如果有直接切换过去，没有的话就新建一个窗口，跳过去！

如果它是true，使用openWindow打开新窗口的时候，不管有没有相同id的tab，都回去新创建一个，也就是可能会创建重复的webview，这是很蛋疼的，因为会造成app跳转webview时，与预期效果不同（跳转的webview不是自己想要的）

请尽量不要使用，除非特殊的页面需要创建多个重复的情况下

注：我遇到过创建了重复的webview后造成的自定义触发事件（fire）发生了意想不到的结果，在返回前，对返回页面的dom进行修改刷新，但dom并没有被改变，其实是因为重复webview，修改了别的！

场景三：

我要关闭一个页面！

方法一：触发mui.back()或返回事件，这里注意了back并不会像浏览器那样history.go(-1)返回上一页，而是相当于浏览器直接关闭当前tab，这儿比较特殊，不要使用对浏览器的理解！就是说mui.back()将会关闭当前的webview后返回上一个webview，此时我们如果使用plus.webview.getWebviewById()获取那个被返回的webview是查找不到，因为webview被关闭了，相当于浏览器

技术分享

方法二：我不要返回，我要关闭指定的webview，那我使用plus.webview.getWebviewById().close()，比如关闭当前的页面，plus.webview.currentWebview().close()，这个方法的效果和mui.back()一样滴

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

终结方法：如果我设置的主页是login.html，现在我的用户退出了登陆，那么我要清空他已经打开的所有webview，不留使用痕迹，使用如下代码：

    owner.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);
    }