HBuilder8.0正式版更新日志
必读:2017,致开发者的一封信。http://ask.dcloud.net.cn/article/1147
必读:本文滚动到末尾,是重要的性能优化指南
IDE
- 【重要】新增对es6语法提示、语法校验、格式化的支持(可在新建项目界面和项目右键->"属性"->"语法&框架"界面中配置项目的javaScript版本。注意es6的浏览器兼容性问题很多,如使用一般都要搭配编译转换器,即开发时使用es6写,而实际运行时编译成es5运行。App开发中不建议使用)
- 解决less编辑器没有折叠的问题
- 解决css、js右键菜单压缩异常的问题
- 解决编辑外部文件时不显示折叠的问题
- 解决索引进度有时会卡在校验阶段的问题
- 解决css语法校验错误提示的位置不正确的问题
- 解决内置web服务器有时因为文件损坏无法启动的问题
- 解决script、style起始标签后回车没有正确缩进的问题
- 解决删除项目时可能导致项目内已打开文件无法关闭的问题
- 解决打开新编辑器时搜索框内没有显示上次替换内容的问题
- 解决less、scss格式化会将");和');格式化为"))和'))的问题
- 解决有时打开manifest编辑器后没有提示已存在的语法错误的问题
- 解决manifest.json编辑器中个推、小米推送可以同时选择的问题
- 解决关闭HBuilder时触发边改边看浏览器中注册的onbeforeunload事件导致无法关闭的问题
- 解决原生App打包时IOS开发者证书的AppID和 Google开发者证书的 App包名可以不填写的问题
- js格式化添加同行花括号是否换行的选项
- 废弃manifest编辑器中iPhone3、4,安卓mdpi、ldpi的启动图片配置
- 预编译功能添加表示文件所在目录名称的变量FileDirName, 并修改界面上的变量说明文字为可选择复制
App
- 【重要】强化新增plus.nativeObj.View,支持区域重绘,即通过id更新绘制内容(drawBitmap/drawRect/drawText)、支持动态更新控件属性(setStyle)
- 【重要】新增Webview窗口支持原生导航栏控件(navigationBar),支持manifest中配置首页的navigationBar。navigationBar在js层也是nativeObj.View对象,可再次自由绘制定义。建议非必要不使用双webview模式的webview title,而改用原生title
- 【重要】新增下拉刷新样式(type:'circle'),支持在单Webview中指定顶部偏移位置实现下拉刷新效果
- 【重要】新增Webview和nativeObj.view的原生拖拽(drag)功能,支持左右滑动切换Tab页面及跟手式webview拖动
- 【重要】新增双首页配置(manifest->plus->secondwebview),加速首页为双webview模式时的应用启动速度
- Android平台修复a链接中sms导致异常崩溃的问题
- Android平台修复plus.runtime.openFile打开不存在的文件未触发错误回调的问题
- Android平台调整actionSheet显示效果:调整文字颜色及按下背景色,去掉标题栏点击效果
- Android平台更新微信SDK版本(3.1.1)
- Android平台修复在5.0及以上版本input(type='file')标签点击可能无效的问题
- Android平台修复应用退出时可能先显示空白界面的问题
- Android平台修复Webview窗口以dock方式添加子控件后旋转屏幕可能导致显示不正常的问题
- Android平台修复多次调用plus.zip.compress压缩图片可能出现失败的问题
- Android平台修复Bitmap对象在应用资源不解压直接运行模式下load方法无法加载图片的问题
- iOS平台调整默认关闭ATS功能,允许访问非https网络数据(Appstore审核策略已调整)
- iOS平台修复WKWebview内核video标签不支持页面内播放(非全屏)的问题
- iOS平台修复使用native.js判断是否安装指定程序返回值不正确的问题
- 修复Webview窗口setJsFile方法载入JS代码中的变量在页面JS无法直接访问的问题
- Hello H5+ 新增原生控件(plus.nativeObj.View)动画演示示例
- Hello H5+ 修复iOS平台plus提前生效(DOM构造前)导致Audio和Camera页面打开无法加载上次数据的问题
MUI
- 【重要】Hello MUI首页取消父子webview,变更为同屏单webview,通过navigationbar配置标题栏,并使用nativeObj绘制图标
- 【重要】Hello MUI打开新窗口时,取消模板方案,改用单webview+nativeObj方案,节省资源开销,并解决滚动条通顶的问题
- 【重要】Hello MUI在顶部选项卡+多webview模式下,支持左右拖动切换webview
- 【重要】Hello MUI支持单webview下拉刷新示例
- 【重要】Hello MUI新增nativeObj绘制标题栏示例
- Hello MUI首页支持原生拖拽显示/隐藏侧滑菜单页
- 解决Hello MUI首页在非plus环境下点击无法跳转的bug
- Hello MUI底部选项卡-div模式示例,禁用bounce回弹,避免上下滑动时,底部选项卡跟着webview一起滑动的bug
- 解决Hello MUI中picker(选择器)页面,三级联动示例中,部分省市关系错乱的问题
性能优化解读
-
webview和native view支持原生拖动drag
dom的拖动,如果内容复杂,是难以流畅拖动跟手的。
plus.webview和plus.nativeObj.view都新支持了drag,可以流畅的拖动跟手。这个技术可用于tab左右拖动、侧滑菜单跟手拖动等很多场景。
在36Kr和唯品会流应用均可以体验到drag的效果。在Hello mui示例中,可以看到首页的侧滑菜单拖动、tab bar示例下的顶部选项卡-可左右拖动(webview)。 -
支持双首页
当首页不得不使用父子页面时(主要是顶部可拖动tab场景),过去子页面的显示需要等父页面的plus ready,导致app整体界面显示过慢。此时可在manifest配置双首页,launchwebview下新增了secondwebview节点,可以让2个webview在启动时一起载入,实现更快的启动。 -
非必要不推荐使用同屏多webview。
同屏显示多个webview的性能和资源消耗还是比较大的。之前使用父子webview的场景,推荐使用如下方式替代。- title场景:过去为解决title先入和滚动条通顶问题,大量使用了父子webview,现在我们推荐换种方法。
- div title:使用透明渐变的导航栏
具体见Hello mui - nav bar - 透明渐变。此时滚动条通顶也没有问题。 - nativeobj title:使用nativeobj.view做导航栏
目前Hello mui新版主体已经使用nativeobj.view做导航栏。窗体进入速度更快,内存占用更少。
资深的开发者肯定会问,使用native view做导航栏,会不会导致首页的title显示过慢?因为nativeobj需要plus ready才能操作。我们也想到了,为解决首页的native title快速显示问题,我们支持在manifest里配置navigationBar,设置文字、背景色,在首页plus ready后,可通过webview的getNavigationbar()方法得到一个nativeobj.view的对象,可以再次给这个native view更新绘制内容。
- div title:使用透明渐变的导航栏
- 下拉刷新场景
不管是div title还是nativeobj title,下拉刷新都可以使用5+最新提供的circle模式下拉刷新。
这种下拉刷新不需要拆webview,从指定高度位置可下拉一个圆形箭头下来,具体见Hello mui里的 下拉刷新-circle模式。
circle模式是谷歌内置在安卓库里的标准的下拉刷新,是比较流行和通用的解决方案。
如果iOS上确实不想使用circle,也可以继续使用之前的普通下拉刷新样式。circle主要提升了安卓的性能问题,iOS性能本来也很好。只是代码要分平台判断麻烦点。后续我们会在mui框架层面做封装,简化这些处理。
tab目前也支持native view方式使用,但目前性能并没有比多webview高,我们还会继续研究。
我们所说的“非必要不推荐使用同屏多webview”,那么必要的场景是哪些呢?就是首页有多个tab需要左右原生拖动,且tab数量超过屏幕宽度,会发生滚动,由于native view目前还不支持滚动条,此时只能采用多webview(比如唯品会流应用)。如果你的app的tab数量不多,不会发生横向滚动,那么tab条也可以使用native view绘制。 - title场景:过去为解决title先入和滚动条通顶问题,大量使用了父子webview,现在我们推荐换种方法。
-
安卓上不要傻等plus ready后再操作dom和ajax、关闭splash。
在ios上,plus ready其实可以废弃了,目前仅作为向下兼容而保留,因为新版iOS最开始plus就处于可用状态,不需要等ready。
而安卓上,plus ready的触发还是很慢,虽然我们已经补充过plus提前生效的方法,但也存在阻塞页面渲染的负面效应。
而开发者,需要时刻明白哪些才需要用到plus,而哪些是不用等plus ready的。目前很多开发者习惯在plus ready后再开始操作一切,包括dom、ajax、close splash,这都是不对的。
mui的ajax默认并不使用plus的xmlhttp,本地页面js也可以正常访问远程服务的接口,所以ajax不用等plus ready。
在废弃父子webview模式后,普通的dom操作在domcontendloaded之后就可以进行。
判断手机是安卓还是iOS,可以直接使用浏览器的ua判断,而不一定要等plus ready后用plus.device的api。
而首页的splash关闭,我们推荐在manifest配置splash关闭时机为titleUpdate。新版安卓runtime支持首页自动免白屏,如果首页还没渲染,但titleUpdate已经触发,引擎会继续等到首页开始渲染后才关闭splash。
在不等待plus ready后,大多数app的新页面加载速度和App启动速度都会有明显提升。
这里多说下启动速度提升的注意:首页不等plus ready就关闭splash需要注意app初次使用欢迎页的设计,很多app是在plus ready后决定是否显示欢迎页,并且在欢迎页显示完毕后才手动关闭splash。这种模式是无法加速的。其实这种阻断式欢迎页并不招用户喜欢,本身应慎用,同时后续我们也会提供更高性能的欢迎页方案给大家。
另外,监听back按键,如果放到新页面的plus ready后,也会造成隔一会才能点back按键。如果你的新页面plus ready过晚,比如load服务器端的web页面,建议也把back监听在首页或second首页里处理。 -
减少webview动画使用
减少同屏多webview已经比较雷人了:)减少webview动画使用就更颠覆过去开发者的认知了。
webview动画是为了替代低效的dom动画,但事实上native view的动画效果更好。虽然native view动画已经出来大半年了,已经在很多流应用中成功应用,但普通5+App还使用甚少。
webview动画进入时,往往是新页面加载和渲染的时候,此时系统并发消耗极大,一方面要渲染新页面,一方面要移动webview。
webview动画是支持一个叫acceleration: capture的参数的,这是一种截屏动画,使用此参数会对新页面进行截屏,然后把截屏飘进来,此时是一个原生view里的一张图做动画,真实的webview并不做动画,仅仅是自己在背景渲染,然后截图消失露出真实webview。
在部分安卓5的手机上,5+引擎默认是开启截屏动画的,否则动画会非常卡。
但在准备新页面动画时截屏也是抢资源的,更好的做法是提前绘制一个原生view。举个例子,比如从列表点击到详情,提前绘制了一个native view,包含title和下面的加载中字样,在点击列表时移动这个native view做动画进来,然后背景加载详情webview,在动画结束后,把详情webview显示出来。这段示例代码见Hello H5+里nativeObj的环节演示。 -
减少js的使用
不得不说,目前js开发之复杂已经到了令人发指的地步。知乎上有一片热文在 2016 年学 JavaScript 是一种什么样的体验,令人哭笑不得。
我们想说,世界不应该这么复杂,不止是应该减少对各种管理型框架的追求,甚至是减少js的滥用。该让html和css做的,就不要让js去做。还原简单朴素的代码世界,在性能上追求极致,而不是在研发管理上追求极致。
无论如何,如果想要你新页面加载快的话,请避免js阻塞页面渲染。
此外由于plus的api都是webview和原生桥接通信,这个桥接本身是耗时几十毫秒的,如无必要,应当减少反复交互,尤其是慎重在循环里调用plus api。
再次强调,以上优化技术都有案例,下载HBuilder8.0,新建Hello mui项目。或者访问这里http://ask.dcloud.net.cn/article/1147,看各种已经应用这些新优化技术的流应用。
学习了
这位仁兄说的没错,建议官方可以借鉴bootstrap文档。
2017-03-08 10:17