浅谈hbuilder开发app后的优化 - (1)加速启动,优化体验

2017-4-25 mubrand APP常用

前言:
我相信使用hbuilder的开发者,大多数是因为html5开发周期短,实现功能快而使用,当然使用混合开发我相信也是比较少的,至少目前我看到的比较少。那么在这种情况下,我简单的认为大多数开发者使用的是纯hbuilder作为开发环境,那么可优化空间便局限在html原生+plusSDK这儿,因此我仅仅是分享平时在开发中,个人采用的各种优化方法。

(1)加速启动,优化体验
首先我们回顾下打开app走的一个简单的流程:
1.手指点击
2. 载入Activity
3. 载入Splashscreen
4. 载入webview
5. 渲染页面
6. closeSplashscreen
7. 完成工作
备注:
Activity:安卓原生Activity
Splashscreen:实则为一个View,称之为"启动页"
webview:很多人简称“浏览器”
至此我们思考下,如何进行处理比较好,这儿我给各位简单分析一下显示层级:
Activity < webview < Splashscreen < plus.Native.View

那么加载速度呢?
Activity > Splashscreen = plus.Native.View > webview
从而我们可以看到,当启动Activity之后,随着Splashscreen会显示出来,其次就是plus.Native.View控件。
然而plus.Native.View控件的显示层级又高于Splashscreen,因此new plus.Native,View();ViewObject.show()之后,新建的View会显示在Splashscreen上面,这样我们就可以制造一个快速启动的假象。

题外话:<script src="html5plus://ready"></script>可以加速plusAPI生效,您知道了了么?对我来说是写在<meta charset="utf-8">下面,这样不会出现乱码问题,且不影响页面。

接下来,进入代码阶段:
1:我们需要在manifest.json中配置启动页的关闭方式:


可能有人注意到,为什么不是手动关闭启动页而是延迟10s关闭启动页呢?因为在测试过程有一部魅蓝手机出现自动关闭启动页,而且是很快的自动关闭,因此根据页面逻辑我选择设置延迟10s关闭,因此没有了此问题。
2:我们需要把index.html当作一个启动处理中心,在index.html创建两个View,一个作为header,一个作为footer,随着立即显示
(创建底部栏可以采用我开源的http://ask.dcloud.net.cn/article/1276 创建顶部栏官方有教程)
View.show()之后立即执行closeSplashscreen

这一个过程很快,在我的Nexus6plus上是一瞬间执行完毕,这就有种启动速度很快的感觉了。这个时候我们需要进行如下操作,将其转到正常的app页面。

plus.NativeUI.showWaiting()  //显示雪花滚动,等待样式
 var wm = plus.webview.create("main.html") //创建app主页面
       wm.addEventListener("loaded",function(){
             plus.webview.show(id,"none",0,function(){
                    //此时关闭View和关闭雪花滚动
                    plus.NativeUI.closeWaiting()
             });
       })


//等待webview加载完毕之后再显示
至此我们就可以制造一个快速启动的错觉,再利用雪花滚动的过程ajax同步加载数据,等待渲染完毕之后再载入wm
相对于上面这种显示方法,我个人比较常用的是将

wm.addEventListener("loaded",function(){
             plus.webview.show(id,"none",0,function(){
                    //此时关闭View和关闭雪花滚动
                    plus.NativeUI.closeWaiting()
             });
       })

放在main.html中,改为ajax请求完成,填充完内容之后在调用

plus.webview.show(id,"none",0,function(){
                    //此时关闭View和关闭雪花滚动
                    plus.NativeUI.closeWaiting()
             });

这样可以更直观的感觉滚动完雪花后加载的是一个完整页面。
但是记得ajax要加上timeout的处理。
如果使用vue的话,则需要在vue的Methods中进行页面填充处理
随后调用vue本身带的this.$nextTick监听是否渲染完毕,渲染完毕之后再关闭view和雪花滚动。

我相信很多人看起来一头雾水,然而懂的人自然明白如何操作,这仅仅是本人优化APP的一些方法,做出来分享而已,希望能给大家带来帮助。
后面再继续分享一些其他开发中遇到的问题以及一些优化的方法。
Dcloud的帖子编辑器真难用。。。 没pw和dz的好用




标签: hbuilder API dcloud

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1