mui开发app之webview是什么

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

其中不能粗鲁的把所有的webview统统关闭并清空,将会导致app直接关闭,只要仅剩的最后一个webview被关闭,也就默认app退出!

场景四:

打开已经打开过并且没有被close或者clear的webview:

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

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

注意:被关闭和清空,返回掉的webview将会返回null,不可以操作!

总结一下webview!

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

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

分别获取:基座(就是首页),当前顶部页面(其实就是当前显示的),根据id获得webview

返回的是WebViewObject,这个object下面有:

等等的方法,自行在hbuilder中查看吧!

时间: 2024-10-21 15:56:12

mui开发app之webview是什么的相关文章

mui开发app之js将base64转图片文件

之前我已经做过一个利用cropper裁剪并且制作头像的功能.如何在mui app中实现相册或相机获取图片后裁剪做头像请看另一篇博客:mui开发app之cropper裁剪后上传头像的实现 但是当时裁剪后图片是保存为base64格式的,这是h5 canvas建议使用的图片传输方式. 很多时候很多api,比如mui中第三方插件map中有一个setIcon传入的必须是本地的图片文件地址,目前的第三方地图系统任然不支持base64的标注图,所以折腾了一晚之后终于在native.js中找到了将base64转

利用 MUI开发app, 如何实现侧滑菜单及其主体部分上下滑动

 利用mui开发APP 之侧滑菜单主内容滚动问题 MUI作为开发者常用的框架之一,其号称最接近原生APP体验的高性能前端框架.因此利用mui开发移动APP,可以为开发者提供很大的便利和接近原生的体验.但是,在实现一些复杂功能的过程中,难免遇到一些小问题.博主将以自己在项目开发中的一些的经验,陆续对mui使用中容易遇到的小问题,予以解答和分享,希望能帮到更多的开发者朋友. 最近,博主在项目开发过程中遇到这样一个问题,即利用mui侧滑菜单模块,实现APP的侧滑菜单效果时,侧滑菜单加入以后,将影响自身

mui开发app之plusReady

在mui中使用$.plusReady()或者mui.plusReady()使用 类似于jquery中的$(document).ready(); 第一,啥是plusReady? 在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中. 第二,啥是html5+,和html5有什么区别 所谓的html4.0标准我们就不去讨论了,这是早

mui开发app之联网应用传输数据

手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app. 目前互联网盛行的时代,99%的程序都是联网环境下工作的.那么如何开发本地app并且能通过网络将数据上传至服务器共享成为了在线app的开发重点. 首先请理解B/S的工作模式,在web程序中,我们只是向http服务器请求了地址,服务器(无论是apache,tomcat,nginx这些都是实现了http socket的程序)返回给我们html文件,浏览器呢,对html进行解释

mui开发app之cropper裁剪后上传头像的实现

在大多数app项目中,都需要对用户头像的上传,之前做web开发的时候,我主要是通过input type=file的标签实现的,上传后,使用php对图片进行裁剪,这种方式比较传统简单. 此次app开发中我需要做到用户选择本地相册或者进行拍照,对照片进行裁剪,最后更新本地头像和服务器端的图片 我将要结合mui,cropper,jquery开发 实现思路: 1.用户点击头像,打开actionsheet 2.选择图片或者拍照后返回的图片绝对地址传入单独的裁剪页面,跳转到裁剪页面 3.裁剪页面裁剪后选择确

基于Html5 Plus + Vue + Mui 移动App 开发(二)

界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能: 2.使用Vue 进行数据绑定: 3.使用WebView 创建打开新的界面: 源码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>实全科技</title> <meta name="viewpor

HBuilder开发App教程04-最难搞定的是mui

前言 前几篇说到一些HBuilder开发app的基础教程, 现在来说一下HBuilder开发app的难点,或者说是上手的难点, 就是mui, 如果你没有研究mui就贸然的上手HBuilder,那你的开发过程是痛苦的, 花一点时间研究下mui,对你之后开发app有很大的帮助. 网址 教程再好,也会有疏漏的地方,还需要你仔细阅读官方文档, 附地址:http://dcloudio.github.io/mui/ init mui封装了很多常用的页面方法,都需要在init中设置,例如: 1.和上拉加载,下

基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)

实全资讯采用基于Html5 Plus + Vue + Mui 移动App.主要实现功能包括: 实现搜索站点设置 实现搜索关键字定义 实现搜索资讯保存.删除功能. 主界面实现关键字搜索.预定义关键字搜索,下拉刷新,支持搜索结果保存.分享. 我的界面主要是展示自己保存的搜索资讯,支持删除.分享. 设置界面主要实现搜索站点.初始搜索关键字定义. 搜索站点目前支持:凤凰资讯.参考信息.腾讯资讯.百度资讯: 读取数据 /*读取内容*/ shiquan.readNews = function(callbac

HBuilder开发App教程07-列表页

说明 接着上节的内容,本节讲首页的list页面, 如果看过上一节你就会明白"首页"是由只有头部的index页面和列表list页面组成的, 本节涉及到: 1.几种页面的打开方式 2.websql的应用 3.页面内容的加载 4.页面实现 几种页面打开方式 如果看过以前的章节你会明白,在Hbuilder,mui中需要放弃href跳转, 而专用mui自带的页面打开方式,为什么?请浏览:http://ask.dcloud.net.cn/article/122 这里大概讲一下,详细讲解请关注下一节