深井冰_01
深井冰_01
  • 发布:2017-01-24 05:18
  • 更新:2017-12-08 11:17
  • 阅读:18889

HBuilder8.0.1版更新说明

分类:HBuilder

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,现在我们推荐换种方法。
      1. div title:使用透明渐变的导航栏
        具体见Hello mui - nav bar - 透明渐变。此时滚动条通顶也没有问题。
      2. 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还是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绘制。

  • 安卓上不要傻等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,看各种已经应用这些新优化技术的流应用。

2017-01-24 05:18 分享
已邀请:
老哥教教我

老哥教教我 - 日结一天,阔以玩三天!

框架是个好框架,文档也要做好才是基础!

  • 学习了

    这位仁兄说的没错,建议官方可以借鉴bootstrap文档。

    2017-03-08 10:17

Lee_Bus

Lee_Bus

什么时候能修复下返回键蛮- - 好多天了。

瞳player

瞳player - 前端,混合应用开发;微博:折腾笔记;

希望view里的矩形增加圆角,没有圆角很多东西需要贴图,而加载图像在一些机器上会出问题(根据自己的统计埋点得出)。

  • 714784470@qq.com

    背景透明是不是更好,目前IOS可以通过设置背景透明然后给html设置border达到圆角效果,但是Android只有部分机器可以,如果view的底色可以完全支持透明那就非常好了。

    2017-02-10 16:06

NewsNing

NewsNing - 天行键

支持拖动的webview以及view,会让你更加精彩!

hcoder刘海君

hcoder刘海君 - www.hcoder.net mui、h5+视频教程

加油! 支持一下,性能提高、下拉优化这些都是不错的改进!
学习的同学看这里(都是免费的视频教程):


地址
http://www.hcoder.net/course

  • NewsNing

    支持一下

    2017-02-04 11:00

  • lhyh

    唯有点赞!

    2017-02-20 10:43

z18110

z18110

沙发

37048185@qq.com

37048185@qq.com

关注新8.0

杨小凡

杨小凡

8.0可以的,支持ES6棒棒哒!

Huiqi

Huiqi

太好了,MUI支持单webview下拉刷新

  • 打豆豆

    这个有说吗

    2017-01-25 08:49

  • Huiqi

    倒數第二行

    2017-01-25 10:34

  • 瞳player

    之前自己写的单webview下拉刷新插件http://ask.dcloud.net.cn/article/1058

    2017-01-25 11:12

amourz

amourz

关心一点,如果升级到8.0,那么原先的代码是不是都要重写呢?比如父子页面,下拉刷新等?

梦幻想

梦幻想

单页只有下拉刷新,怎么上拉刷新啊??

  • DCloud_heavensoft

    上拉刷新本来就是单webview的啊

    2017-02-03 16:58

  • 梦幻想

    不是很熟悉,问题是这2个代码怎么组织在一起

    mui.init({

    pullRefresh: {

    container: '#pullrefresh',

    up: {

    contentrefresh: '正在加载...',

    callback: pullupRefresh

    }

    }

    });

    _self = plus.webview.currentWebview();

    _self.setPullToRefresh({

    support: true,

    height: '50px',

    range: '100px',

    style: 'circle',

    offset: '1px'

    }, pulldownRefresh);

    2017-02-03 19:38

gmmx133

gmmx133

native view的动画 有案列吗

水灵退散

水灵退散

几时发布啊

czx517625126@163.com

czx517625126@163.com

这个版本什么时候能发布啊,坐等

水灵退散

水灵退散

侧滑导航还是有一点问题

my87@163.com

my87@163.com

--"circle模式是谷歌内置在安卓库里的标准的下拉刷新,是比较流行和通用的解决方案"
个人觉得很丑,体验不好。像双webview那个下拉的效果再加上个上次刷新时间倒是比较多见。。
大伙们你们是怎么看。。。。。????!!!!

  • DCloud_heavensoft

    如果iOS上不想使用circle,也可以继续使用之前的普通下拉刷新样式。circle主要提升了安卓的性能问题,iOS性能本来也很好,不使用circle也没有性能影响。只是代码要分平台判断麻烦点。后续我们会在mui框架层面做封装,简化这些处理

    2017-02-09 00:27

  • my87@163.com

    回复 DCloud_heavensoft:请教--请教--请教--请教--请教


    mui.init({

    pullRefresh: {

    container: '#pullrefresh',

    down: {

    callback:function(){}

    }

    }

    });

    在单webview 里实例化列表下拉无效。必须在子webview里内才能生效。


    请教单webview 里为什么无效?是出于什么考虑?

    我如下分析知道正否?

    单webview还子webview那个下拉刷新的效果层都是在当前webview里完成的渲染及过渡动图(我分析了dom结构是一样的),采用双webview的作用就是防止滚动条透顶?为何不把之前的双webview的用到现在的单webview中来。。。????


    请教--请教--请教--请教--请教

    2017-02-16 08:48

  • DCloud_heavensoft

    回复 my87@163.com:mui框架里的下拉刷新,还是基于之前的双webview的。目前Hello mui里单独补充了单webview的下拉刷新,我们很快会升级mui框架的写法@57 。如果目前要用单webview下拉刷新,请多看Hello mui里的示例代码。

    2017-02-16 10:26

gadget2k

gadget2k

我现在每天一开hbuilder就提醒我更新,这更新速度也频繁了吧?还是这就是开发版的常规?

  • DCloud_heavensoft

    alpha版目前确实是day build。。。我们后续再优化下,没有重要修改就不发更新了。

    2017-02-10 04:50

646236575@qq.com

646236575@qq.com

东西是好东西。好东西是为了让开发者更好,更快捷的使用。这方面还希望加强。同时官网的文档也希望做一下更新。把用户体验做好,为开发者提供更多的插件,我觉得能让mui更上一层楼

1923097096@qq.com

1923097096@qq.com

更新完之后安卓调试不了啊,手机HBuiler启动到一半就闪退

714784470@qq.com

714784470@qq.com

单webview无法使用之前的下拉刷新样式,而且单webview又没有上拉加载。还是只有使用双webview模式,所以如果同时需要上拉和下拉还是无法使用原生的title。还是说我使用方式不对???

  • DCloud_heavensoft

    上拉加载之前也不需要双webview。使用circle的下拉刷新和上拉加载可以一起用。但示例没给出,需要自己从Hello mui里摘一下

    2017-02-15 14:10

  • 714784470@qq.com

    回复 DCloud_heavensoft:这个确实是我试过了可以,不过不喜欢这个circle,这个下拉和上拉不搭配。plus.nativeObj.View功能加了很多确实好,但是plus.nativeObj.View云打包之后无效的问题还是没有解决啊,依然无法显示,这个bug不打算修复还是我使用方式有问题。http://ask.dcloud.net.cn/question/27796?notification_id-143320rf-falseitem_id-40747__answer_id-40747__single-TRUE#!answer_40747

    2017-02-15 14:37

  • 714784470@qq.com

    回复 DCloud_heavensoft:今天更新后我一直搞不懂为啥hello mui可以用nativeObj而我打包就失效,直到我使用base64来加载图片,云打包只支持Base64的图片吗

    2017-02-15 15:06

  • DCloud_heavensoft

    回复 714784470@qq.com: 可以把上拉那里的雪花去掉,变成加载中...

    2017-02-15 22:37

yedong0839

yedong0839

请问,为什么在 manifest里找不到配置双首页?

  • yedong0839

    在这里http://ask.dcloud.net.cn/article/94 ,搜索launchwebview

    2017-02-16 11:42

714784470@qq.com

714784470@qq.com

actionSheet样式调整了,以前蓝色现在默认黑色了,我怎么调整回原来的样子啊?黑色很丑啊

  • Trust

    可以使用mui提供的div模拟的dialog。http://dev.dcloud.net.cn/mui/ui/#dialog

    2017-03-06 15:49

714784470@qq.com

714784470@qq.com

终于修复了Bitmap加载图片问题,期待更新正式

gaus

gaus

一个bug:
官方mui demo:任意列表项,快速点击(比如2次以上,打开子页面之前),则子页面会不断重复加载,回退时,也会不断重复退出。

梁大路

梁大路

又发布了新的东西了……意思是不用plusready了吗?可以直接在script里面调用了吗?所有都是?

  • DCloud_heavensoft

    iOS是可以任意使用了。安卓还得用plus ready

    2017-02-20 11:16

_LHH_

_LHH_

我想问下,我更新后,less预编译的 lessc.cmd 文件没有了,

810726685@qq.com

810726685@qq.com

怎么动态更新manifest中配置的首页navigationBar上的title?有没有demo?

  • DCloud_heavensoft

    plus.webview.currentWebview().setStyle({'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});

    2017-09-19 22:39

  • 810726685@qq.com

    回复 DCloud_heavensoft:感谢,我已经解决了,我用了drawText的方法

    2017-09-20 18:56

xl121@163.com

xl121@163.com

单webview下拉刷新成功后,头部的刷新圆圈样式图标不会自动消失,请问有人碰到和我一样的问题没?

要回复问题请先登录注册