方法实现,也就是你可以通过书写js代码实现android和ios两套的原生功能。
html5+作为一种通用标准,只封装了最常用的一些API,如果你有其他需求但是5+里面没有怎么办,这个时候如果你懂原生应用开发,你可以基于native.js语法规范进行个性化封装。Native.js for Android封装一条通过JS语法直接调用Native Java接口通道,通过plus.android可调用几乎所有的系统API。Native.js for iOS封装一条通过JS语法直接调用Native Objective-C接口通道,通过plus.ios可调用几乎所有的系统API。
我们经常看到html5+(即html5plus)、5+ sdk,其实本质是一样的,不过这里的5+ sdk是针对离线打包开发和Hybrid开发模式,因为用hbuilder在线+和native.js的底层会被自动打包到安装包里面,开发者无需引用什么即可调用相关API。只要当开发者想要离线打包及Hybrid开发模式或者深入了解html5+的引擎实现原理,才需要去了解一下5+ sdk,一般情况下我们只需要知道5+标准里面的基本用法就足够我们开发出一个APP。
mui是Dcloud官方推出的一个基于html5+标准的框架,同时拥有h5组件和原生组件,原生组件依赖于html5+运行环境,也就是原生app里面的webview组件(能加载显示网页,可以将其视为一个浏览器),所以mui里面的原生组件不能用于浏览器环境,可以通过mui里面的mui.os.plus进行判断,如果是plus环境会返回true,否则会返回undefined。开发者可以根据自己的需要进行代码适配,对于APP使用增强的原生组件,对于普通浏览器里面运行的页面使用h5组件。同时用户还可以使用mui.os.android、mui.os.ios及mui.os.wechat对平台进行检测,然后书写不同的逻辑代码。对于mui里面没有封装的原生组件,大家可以根据自己的需要基于html5+标准和native.js语法进行个性化定制。因此这里我们可以有一个基本影响就是我们开始可以直接上手mui,不过需要明白mui与其他UI框架的区别在于,mui拥有独有的原生组件,而且这个是依赖于html5+标准的,所以mui里面的很多组件实现方法甚至用户就是html5+里面的标准写法,对html5+标准有一定了解有助于我们理解mui的一些使用方法。
对于我们这里就是一个html页面就是一个窗口,一个html页面可以创建多个webview。这个webview是原生APP中浏览网页的组件,android和iOS都有,html5plus中的webview是对原生webview的封装,可以用js进行调用,所以它的运行环境是APP环境,普通浏览器不支持。
页面初始化mui框架将很多功能配置都集中在方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。mui需要在页面加载时初始化很多基础控件,如监听返回键,因此务必在每个页面中调用.
mui.plusReady(function(){ console.log(当前页面URL:+plus.webview.currentWebview().getURL()); });
在mobile app开发过程中,经常遇到卡头卡尾的页面,此时若使用局部滚动,在android手机上会出现滚动不流畅的问题; mui的解决思路是:将需要滚动的区域通过单独的webview实现,完全使用原生滚动。具体做法则是:将目标页面分解为主页面和内容页面,主页面显示卡头卡尾区域,比如顶部导航、底部选项卡等;内容页面显示具体需要滚动的内容,然后在主页面中调用mui.init方法初始化内容页面。
styles:表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非0px的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
ndex.html的作用就是显示固定导航,list.html显示具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 list.html就是index.html的子页面,创建代码比较简单,如下:
web app,一个无法避开的问题就是转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,用户要面对一个空白的页面等待;如果通过无刷新的方式,用Javascript移入DOM节点(常见的SPA解决方案),会碰到很高的性能挑战:DOM节点繁多,页面太大,转场动画不流畅甚至导致浏览器崩溃; mui的解决思路是:单webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最耗性能的部分交给原生实现。
styles:表示窗口参数,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非0px的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况,left、right同理。
注意:扩展参数仅在打开新窗口时有效,若目标窗口为预加载页面,则通过mui.openWindow方法打开时传递的extras参数无效。
createNew:是否重复创建相同id的webview;为优化性能、避免app中重复创建webview,mui v1.7.0开始增加createNew参数,默认为false;判断逻辑如下:若createNew为true,则不判断重复,每次都新建webview;若为fasle,则先计算当前App中是否已存在同样id的webview,若存在则直接显示;否则新创建并根据show参数执行显示逻辑;该参数可能导致的影响:若业务写在plusReady事件中,而plusReady事件仅首次创建时会触发,则下次再次通过mui.openWindow方法打开同样webview时,是不会再次触发plusReady事件的,此时可通过自定义事件触发;案例参考:;
show:表示窗口显示控制。autoShow:目标窗口loaded事件发生后,是否自动显示;若目标页面为预加载页面,则该参数无效;aniShow表示页面显示动画,比如从右侧划入、从下侧划入等,具体可参考5+规范中的AnimationTypeShow。
waiting:表示系统等待框;mui框架在打开新页面时等待框的处理逻辑为:显示等待框--创建目标页面webview--目标页面loaded事件发生--关闭等待框;因此,只有当新页面为新创建页面(webview)时,会显示等待框,否则若为预加载好的页面,则直接显示目标页面,不会显示等待框。waiting中的参数:autoShow表示自动显示等待框,默认为true,若为false,则不显示等待框;注意:若显示了等待框,但目标页面不自动显示,则需在目标页面中通过如下代码关闭等待框plus.nativeUI.closeWaiting();。title表示等待框上的提示文字,options表示等待框显示参数,比如宽高、背景色、提示文字颜色等,具体可参考5+规范中的WaitingOption。
示例:从A页面打开B页面,B页面为一个需要从服务端加载的列表页面,若在B页面loaded事件发生时就将其显示出来,因服务器数据尚未加载完毕,列表页面为空,用户体验不好;可通过如下方式改善用户体验(最好的用户体验应该是通过预加载的方式)
mui.back()方法,执行窗口关闭逻辑;mui.back()仅处理窗口逻辑,若希望在窗口关闭之前再处理一些其它业务逻辑,则可将业务逻辑抽象成一个具体函数,然后注册为mui.init方法的beforeback参数;beforeback的执行逻辑为:
beforeback的执行返回必须是同步的(阻塞模式),若使用nativeUI这种异步js(非阻塞模式),则可能会出现意想不到的结果;比如:通过弹出确认框,可能用户尚未选择,页面已经返回了(beforeback同步执行完毕,无返回值,继续执行mui.back()方法,nativeUI不会阻塞js进程):在这种情况下,若要自定义业务逻辑,就需要复写mui.back方法了;如下为一个自定义示例,每次都需要用户确认后,才会关闭当前页面。
target为你要传入数据的那个webview,我们这里是要出入到父webview,由于我们没有给父webview指定id,我们前面知道这样就不方便拿到父webview对象,这里就使用当前webview的parent()间接获取。
相关阅读
-
又坑老婆?邓超被粉丝催自拍发孙俪搞怪照充数
8月28日晚,邓超在社交平台晒孙俪瞪眼搞怪照,并称:最后一次,别再问我要自拍了。照片中,孙俪一头短发,对镜瞪眼逗趣十足。 ...更多
2019-09-02 23:20:22
-
呼和浩特乌鲁木齐超高人气工作室花禾摄影厦门婚纱
遇见你,在合适的时间。我们恋爱、结婚、生子,在温暖的陪伴中老去。这就是我要的幸福,稳稳的幸福。那么,想去厦门拍婚纱照的小伙...更多
2019-09-02 23:20:35
-
周震南再添新技能!酷我音乐《榜样阅读》开启阅读
已经开播三季的酷我音乐《榜样阅读》,在本周四即将迎来首位00后阅读者嘉宾!别看他年纪小,他可一个男子偶像组合的队长。他在节...更多
2019-09-02 23:20:45
猜你喜欢
-
李嫣为窦靖童庆生 同母异父一样感情好
天后王菲除了歌喉被大家所关注外,她的感情事同样引人关注。现在她与谢霆锋一起恋爱,以前就曾和窦唯,李亚鹏结婚,而且还生下了女...
2020-01-05 11:58:34
-
三个女人一台戏!王菲那英赵薇同框说起了相声?
10月19日晚,王菲那英赵薇闺蜜在《幻乐之城》收官之夜同框。三人上演“相爱相杀”互怼打趣式的闺蜜友谊。
2018-10-20 11:03:48
-
程莉莎说被出轨会装傻?婚姻中的“不安全感”他们
呈现了娱乐圈明星夫妻婚姻生活的四种状态,这其中包含着他们对婚姻的看法,婚姻的信条和目标,而程莉莎的爱情观、婚姻观一度成为了...
2018-10-20 10:56:18
-
《我就是演员》这两位没能“复活”,我想不通
一百个读者心里有一百个哈姆雷特,对于《我就是演员》这档竞技综艺,在不同的观众心目中,也许也有被淘汰者与晋级者的名单。
2018-10-20 10:50:56
-
赖弘国赞阿娇五官亚洲数一数二,想劝阿娇放弃事业
赖弘国非常的照顾阿娇,很多时候表现出来的都是小男人的一面,阿娇跟赖弘国在一起,总是会笑的很开心
2018-10-19 15:30:55
-
研究了四款完全不沾边的高分综艺,发现它们都有
综N代如何创新,综艺内容如何摆脱同质化,是今年以来综艺市场被反复讨论的议题。
-
《声临其境》第二季强势回归,首位邀请的嘉宾
这档节目如此受欢迎的原因并非只是因为来参加的选手都是实力派的演员,同时,它也让观众见识了演员们真正的台词功底
-
复制粘贴何炅节目,这次汪涵是要跟他正面刚了么
对于观众来说,慢综艺不仅仅是用来下饭的娱乐节目,更是紧张生活的放松良药。多少生活在繁华都市的人心中其实有个田园梦。
-
宋喆涉嫌职务侵占罪一审宣判:获刑6年,自愿将
10月18日上午,宋喆、修雨乐职务侵占案在北京朝阳法院一审宣判。被告人宋喆、修雨乐因犯职务侵占罪,分别被判处有期徒刑六年、三年。
-
《美味猎手》:美食的进一步创新,向深层“理想
《美味猎手》这次从内容到营销的全面升级,也获得了观众的认可。豆瓣评分高达8分,成为近几年为数不多评分过8的综艺节目。
-
言承旭疑似公开认爱:最要感谢女朋友的陪伴
17、18日,言承旭都在日本活动,包括举行粉丝见面会和举行他在日本拍的写真发布会,但最令人惊喜的是,他昨天突然公开认爱“女朋友”??
-
江疏影发文怒怼造谣者:最好的手段是法律武器
据悉,近日,网传一段疑似江疏影的不雅视频,随后引起热议。而此前,网络上就有人冒充江疏影开设账号,晒出生活照,甚至发布不实信息。
-
网红直播辱骂警察:斗鱼钱小佳辱骂警察事件真相
现在钱小佳辱骂警察事件也是闹得沸沸扬扬,作为网红也是公众人物,这类影响极坏。
-
R星宣布《荒野大镖客2》10月19号开启预载!
R星官方宣布《荒野大镖客2》将在10月19日中午12时正式开启预载,此外今晚还将宣布最新上市宣传片,感兴趣的玩家快来了解详情吧。
-
月入一蛆是什么梗?月入一蛆多少钱?
月入就是月收入的意思,蛆就是蛆,这也是90后的自嘲用语,而月入一蛆连起来就是月入5000,活得不如蛆。
-
三个女人一台戏!王菲那英赵薇同框说起了相声?
10月19日晚,王菲那英赵薇闺蜜在《幻乐之城》收官之夜同框。三人上演“相爱相杀”互怼打趣式的闺蜜友谊。
-
程莉莎说被出轨会装傻?婚姻中的“不安全感”他
呈现了娱乐圈明星夫妻婚姻生活的四种状态,这其中包含着他们对婚姻的看法,婚姻的信条和目标,而程莉莎的爱情观、婚姻观一度成为了网...
-
《我就是演员》这两位没能“复活”,我想不通
一百个读者心里有一百个哈姆雷特,对于《我就是演员》这档竞技综艺,在不同的观众心目中,也许也有被淘汰者与晋级者的名单。
-
赖弘国赞阿娇五官亚洲数一数二,想劝阿娇放弃事
赖弘国非常的照顾阿娇,很多时候表现出来的都是小男人的一面,阿娇跟赖弘国在一起,总是会笑的很开心
-
许晴露肩装风情万种,与张若昀相差19岁竟有CP感
近日,许晴跟30岁的张若昀一起出席代言活动,两人明明相差了19岁,但同框的时候却神奇地产生了CP感……太可怕了