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

提升HTML5的性能体验系列之四 使用原生UI(nativeUI)

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

本文主要包含nativeui,gta5nativeui,nativeui下载,nativeui.dll,plus.nativeui.toast等相关知识,教程希望在学习及工作中可以帮助到您
"); </div>

原生UI即nativeUI的设计目的

HTML和css有一个优势就是灵活的样式设计。
在大多数情况下,我们都应该使用HTML+css来负责UI。但是有些情况下,我们发现HTML+css的UI不满足需求。
1. 绝对置顶
HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div。
对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样。
使用div方式开发的如下弹出控件:alert、confirm、actionSheet、waiting、date、time、prompt、toast,都存在这个问题。
为此,HTML5+扩展了上述nativeUI控件,保证可以绝对置顶。
2. 跨webview
如果界面使用webview方式的tab选项卡,但想从底部弹出一个菜单actionsheet,此时使用div方式的弹出菜单由于无法跨webview,只能看到一部分。
此时就需要使用nativeUI里的actionsheet才能跨webview。
3. 全屏遮罩
弹出控件时,需要对整个屏幕的其他部分做阴影遮罩。
使用div遮罩,同样无法蒙住video、map等原生控件,也无法跨webview。
而且原生的遮罩还可以蒙住手机顶部状态条,这都是div遮罩做不到的。
HTML5+扩展的nativeUI控件,保证可以全屏遮罩。

原生UI即nativeUI的特点

为解决上述问题,HTML5+规范封装了nativeUI规范。参考:http://www.html5plus.org/#specification#/specification/nativeUI.html

nativeUI的特点有:
1. 绝对置顶,不担心被其他原生控件遮挡
2. 可以跨webview显示
3. 全屏遮罩,保证手机屏幕其他部分处于蒙灰状态
4. 原生样式及高性能体验
nativeUI的特点是,调用OS的UI控件,确保和本机体验一致。
在iOS6、iOS7+、Android2.3、Android4.x、Android5上,OS是不同的设计风格,但弹出框和当前OS风格一致。
并且原生的控件展示,比div+css的方式执行效率更高。

nativeUI的局限性

相比div+css,nativeUI也有一个缺点就是可定制性差。
开发者无法使用css修饰这些弹出控件的样式,它们长的、且只能长得和本机OS的风格一样。
所以在需要个性化设计控件且不在意绝对置顶、跨webview、全屏遮罩这些问题时,也可以使用div+css方式制作弹出控件。

mui框架的封装

与nativeUI全原生不同,mui同时也补充封装了一些div方式的弹出控件。
mui补充提供了div方式的actionSheet、popover,可以在nativeUI遇到限制时使用。

弹出半透明的webview,万能但消耗内存

有时我们发现nativeUI弹出的东西没法满足定制需求,而div方式的弹出控件又无法绝对置顶。
此时也是有办法的,就是多消耗点内存,即干脆弹出一个半透明webview。
webview的WebviewStyle对象中可以设置zindex来置顶,可以设置高宽,可以设置遮罩,可以设置透明度。
在webview里可以随便自定义界面,然后通过webview的evaljs方法做webview之间的窗体通讯并返回结果。

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

  • 提升HTML5的性能体验系列之四 使用原生UI(nativeUI)

相关文章

  • 2017-05-31mui第三方支付DCloud-BeeCloud Pay 无后端开发的支付服务
  • 2017-05-31Native.js如何访问蓝牙Bluetooth
  • 2017-05-31mui 怎样监听scroll事件的滚动距离
  • 2017-05-31MUI APP 项目收到Appstore的警告邮件
  • 2017-05-31用H5+开发的APP,其安全性如何?存不存在后门漏洞
  • 2017-05-31解决mac上用chrome调试的跨域问题
  • 2017-05-31MUI 隐藏滚动条
  • 2017-05-31mui开发app之自定义事件以更新其他页内容
  • 2017-05-31提升HTML5的性能体验系列之四 使用原生UI(nativeUI)
  • 2017-05-31Hbuilder MUI 微信支付返回-1错误的经历

文章分类

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

最近更新的内容

    • mui开发app之cropper裁剪后上传头像的实现
    • MUI的input搜索框里的清除按钮的点击监听事件,JS,JQ及时监听input值的变化
    • HBuilder mui webview模式选项卡实现滑动切换
    • 苹果开发者帐号申请以及IOS安装包打包
    • mui.preload和plus.webview.create是不是一样的?
    • 小数点的数字输入框 NumberBox代码修改
    • 请问用downloader.createDownload 下载的文件放在哪里??
    • html5+ plus和phoneGap、cordova的比较
    • MUI 某个页面全屏显示 (不显示系统状态栏)
    • mui 即时通信、im问题汇总。环信、融云怎么集成

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

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