• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > mui开发app之webview是什么

mui开发app之webview是什么

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui webview,mui webview 刷新,mui webview选项卡,mui 双webview,mui关闭webview等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 当我们使用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不同webview(页面)的切换

mui开发app之webview是什么

场景一:

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

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

 

场景二:

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

使用mui.openWindow()方法打开新的webview,该方法传入一些参数,如下官方说法:

 

  1. mui.openWindow({ 
  2.     url:new-page-url, 
  3.     id:new-page-id, 
  4.     styles:{ 
  5.       top:newpage-top-position,//新页面顶部位置 
  6.       bottom:newage-bottom-position,//新页面底部位置 
  7.       width:newpage-width,//新页面宽度,默认为100% 
  8.       height:newpage-height,//新页面高度,默认为100% 
  9.       ...... 
  10.     }, 
  11.     extras:{ 
  12.       .....//自定义扩展参数,可以用来处理页面间传值 
  13.     }, 
  14.     createNew:false,//是否重复创建同样id的webview,默认为false:不重复创建,直接显示 
  15.     show:{ 
  16.       autoShow:true,//页面loaded事件发生后自动显示,默认为true 
  17.       aniShow:animationType,//页面显示动画,默认为”slide-in-right“; 
  18.       duration:animationTime//页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒; 
  19.     }, 
  20.     waiting:{ 
  21.       autoShow:true,//自动显示等待框,默认为true 
  22.       title:'正在加载...',//等待对话框上显示的提示内容 
  23.       options:{ 
  24.         width:waiting-dialog-widht,//等待框背景区域宽度,默认根据内容自动计算合适宽度 
  25.         height:waiting-dialog-height,//等待框背景区域高度,默认根据内容自动计算合适高度 
  26.         ...... 
  27.       } 
  28.     } 
  29. }) 

openWindow打开了一个新的webView并且跳转到了新的webView,就像浏览器新建一个tab并且切换过去,只不过切换过程带了参数,实现了动画,等复杂的现象,这也是比浏览器访问网页的强大之处

mui开发app之webview是什么


openWindow遇到已经打开过并且id仍然在缓存中的webview时会直接跳转过去

您可能想查找下面的文章:

  • mui webview模式选项卡实现按需加载
  • mui开发app之webview是什么
  • mui 跨webview多页面 触发事件
  • mui plus.webview.creat和plus.webview.open有什么区别呀
  • mui 获取index页面webview的id
  • html5+ webview 底部栏用法详解-mui入门到精通(二)

相关文章

  • 2017-05-31HBuilder MUI 远程文件缓存到本地
  • 2017-05-31关于mui项目中前端压缩图片、照片压缩、拍照压缩、录音压缩
  • 2017-05-31hbuilder mui 保存商品的浏览历史记录
  • 2017-05-31MUI开发APP文本框获得焦点并弹出软键盘
  • 2017-05-31聊聊即时通讯(IM),基于环信 web im SDK-mui入门到精通(五)
  • 2017-05-31Hbuilder mui(IOS端)调用QQ进行客服对话功能分享
  • 2017-05-31HBuilder mui框架开发的App如何查询App的uid
  • 2017-05-31Hbuilder MUI 分享插件开发指南
  • 2017-05-31HBuilder MUI如何停止、开启个推推送功能(Native.js)
  • 2017-05-31重写h5+在线升级版本比较代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • mui访问百度图片,长按图片下载至手机相册
    • mui.fire()触发自定义事件
    • HBuilder mui 创建属于当前应用的相册
    • mui截图后canvas base64图片上传
    • mui框架中input输入框或输入框聚焦后页面自动上移实现方法
    • MUI 解决弹出输入法时页面高度变小导致底部上浮的问题
    • mui 跨webview多页面 触发事件
    • Android独立应用方式集成HTML5+SDK,Widget方式离线打包,空项目讲解
    • 为什么HBuilder变卡了,响应变慢了
    • HBuilder中Autoprefixer的配置方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有