mui开发app之plusready和init区别

初学mui会发现大量的demo中,都需要调用mui.init()和mui.plusReady(),可见这两东西在app开发中的重要性

首先请注意一点,如果不是做app开发(非hbuilder基座运行),做web开发的话(在浏览器运行html),plusReady是没有意义的,不会执行,为什么?

啥是html5+,和html5有什么区别?

所谓的html4.0标准我们就不去讨论了,这是早期对浏览器标记语言解析的规范,在app开发中我们通常使用的是html5

html5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,于2014年发布,之后的浏览器必须遵守这个开发规范实现对html,css,javascript的解释,其中css遵守最新的css3规范,javascript遵守最新的ECMAScript6。

html5+:其实还是html5,只是在html5针对手机开发app时补充了对大量原生功能支持,包括摄像头,wifi,震动,gps等等的软硬件功能,通过js封装调用安卓原生接口使得h5开发app更加的强大,所以称之为html5+(app的开发必须要使用html5+)

plusReady:对于 HTML5+应用的页面有一个很重要的 “plusready”事件,此事件会在页面加载后自动触发,表示所有 HTML5+ API 可以使用, 在此事件触发之前不能调用 HTML5+ API

init:mui本身只是一个html5的前端框架而已,类似于react.js,jquery mobile或者说像是bootstrap的针对手机简化版,本身不具备开发app的功能,适合wap开发,但其中包含了html5+的方法,如果不使用上述html5+ plus对象,而只需要mui框架包含的wap开发功能,则是使用mui.init之后即可调用。

当然在app开过程中使用了mui框架作为css,js的渲染框架亦可:此时任然需要用到mui.init()初始化框架的

并且mui框架将很多功能配置都集中在mui.init方法中,所以只需要在mui.init方法中完成对应参数配置即可

目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

无论做wap网页,还是app开发,只要需要用到mui框架,都需要mui.init初始化框架功能,而plusready仅仅在app开发中使用

mui个人习惯:

  1. 每个用到mui的页面都调用下mui.init,直接放在js最前方
  2. 除了function定义函数之外,全都写在plusReady之中,function调用也放在其中,毕竟做app开发调用html5+api十分的频繁,就像jq的$(document).ready()一样的道理,尤其是出现plus对象的一定放在plusReady里面!

目前尚不清楚plusReady过分臃肿对性能是否造成伤害。理论上只是在html5+加载完之后执行其中的代码罢了,是不会影响性能,只会晚一点执行(延迟并不会感受到)

关于mui plusReady的注意点:

mui.plusReady()中的代码不执行

可能1:

你在浏览器下运行了html

可能2:

plusReady事件仅在webview首次创建时触发,使用mui.openWindow方法多次打开已存在的同样id的webview时,是不会重复触发plusReady事件的; 因此若业务写在plusReady事件中,可能会出现执行结果和预期不一致的情况;此时可通过自定义事件触发

### 如何在 HBuilderX 中实现顶部导航栏 #### 使用 BootStrap 结合 HBuilder 创建固定顶部导航栏 通过使用 BootStrap 的框架特性,可以轻松创建一个始终位于页面顶部的导航栏。以下是具体方法: ```html <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">品牌名称</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> ``` 上述代码片段展示了如何利用 `navbar-fixed-top` 类使导航栏始终保持在页面顶部[^1]。 --- #### 在 pages 文件夹中配置 TabBar 导航页 为了更好地管理多页面应用中的导航结构,在项目根目录下的 `pages` 文件夹中新建一个名为 `tabbar` 的子文件夹用于存放所有的 TabBar 页面。每个页面对应一个 `.vue` 文件,通常建议至少创建两个页面作为最小化需求,而最大可扩展至五个页面以满足不同业务场景的需求[^2]。 例如: - tabbar/page1.vue - tabbar/page2.vue 这种模块化的组织方式有助于提高项目的清晰度维护效率。 --- #### 解决 MUI 标题栏无法正常切换的问题 当开发基于 MUI 框架的应用程序时,可能会遇到标题栏文字不随页面变化更新的情况——即即使已经设置了动态更改逻辑,但在实际设备预览过程中仍然只显示默认值“首页”。针对这一现象可以通过调整 JavaScript 脚本部分解决此问题: ```javascript mui.init(); mui.plusReady(function() { var self = plus.webview.currentWebview(); // 获取当前窗口对象 document.getElementById("title").innerText = self.title || '默认标题'; // 动态赋值给HTML元素ID为"title"的位置 }); ``` 同时还需要注意 HTML 部分也需要预留好放置标题的地方: ```html <header class="mui-bar mui-bar-nav"> <h1 class="mui-title" id="title">初始标题</h1> </header> ``` 以上修改能够有效处理因环境差异引起的功能异常状况[^3]。 --- #### 自定义 APP 状态栏样式 对于移动端应用程序而言,状态栏的颜色匹配同样重要。如果希望自定义 Android 或 iOS 平台上的状态栏背景以及字体颜色,则可通过如下脚本来完成设定工作: ```javascript mui.plusReady(function(){ // 设置状态栏风格 (dark/light),此处选择了浅色模式 plus.navigator.setStatusBarStyle('light'); // 定义红色 (#FF0000) 作为状态栏底色 plus.navigator.setStatusBarBackground('#FF0000'); }); ``` 配合 CSS 对应设置主题色调一致性的视觉效果更佳: ```css .mui-bar{ background-color: red; } ``` 这样不仅提升了用户体验的一致性,还增强了整体界面美观程度[^4]。 --- ### 总结 综合运用 BootStrap 提供的强大布局工具、合理规划 Vue 组件架构设计思路、妥善处置常见兼容性难题并精心打磨细节之处的状态栏呈现形式,便可以在 HBuilderX 开发环境中成功构建出功能完备且外观吸引人的顶部导航栏解决方案。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

devilyouwei

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值