DCloud_UNI_王亚琪
DCloud_UNI_王亚琪
  • 发布:2019-11-21 18:12
  • 更新:18 小时前
  • 阅读:3243

重磅:uni-app V3版本公测,App端性能、功能大幅提升

分类:uni-app

uni-app的App端,历经了最初的模板编译模式、自定义组件编译模式,如今迎来了第三次重大突破。这个版本,被命名为V3。

v3立项的目标,要解决7个问题:

  • 运行更快
  • 框架体积更小
  • 开发编译更快
  • 提供视图层调试方案
  • 支持更多vue语法和指令(比如v-html)
  • 解开小程序的限制,提供更灵活的能力(比如视图层通过wxs可操作dom)
  • 规整源码结构,为更大规模的开源共研做准备

如何启用V3版本编译器

  1. 下载HBuilderX 2.4.4或以上版本(目前仅alpha版包含)。

  2. manifest.json里面的app-plus节点下添加"compilerVersion": 3即可开启V3,体验畅爽的App端开发。

配置示例

"app-plus": {  
    "compilerVersion": 3  
}

注意:开启成功之后,编译App时控制台会输出编译器版本:*.*.*(v3)

v3的优势详述

1. 启动速度

以hello uni-app为例,在一款2015年出厂的安卓低端机测试多次

  • 旧版本启动耗时均值: (7493+7261+7343+7151+7313)/5 = 7312
  • v3 版本启动耗时均值:(2499+2371+2385+2487+2356)/5 = 2419
    以上单位为毫秒。

hello uni-app的首页是nvue。如果你的App首页是vue,优化幅度没这么大,但也有明显提升。

从v3起,也不再需要纯nvue(render:native)模式了。首页为nvue时,自然就可以秒速启动App。

欢迎开发者使用v3,并将首页改为nvue。

2. 框架体积

v3版的App端前端框架体积减少了0.8M。

3. 开发编译速度

  1. 初次点击运行到App,耗时减少58.27%。
  2. 支持二次运行diff更新
  3. 支持保存后diff同步手机

初次点击运行到App耗时测试结果

  • 所用电脑为17款MacBook
  • 所用项目为首页调整为vue后的Hello uni-app
  • 测试时间为从开始编译到应用启动(单位:毫秒)
手机型号:小米2s 第一次 第二次 第三次 第四次 第五次 平均
旧版本 12095 12256 12027 12118 12033 12105.8
v3版本 4341 4518 4243 4275 4229 4321.2
手机型号:红米1 第一次 第二次 第三次 第四次 第五次 平均
旧版本 13726 14809 14606 14146 14761 14409.6
v3版本 8385 9371 8238 8471 9284 8749.8
手机型号:Nexus 5 第一次 第二次 第三次 第四次 第五次 平均
旧版本 11735 11696 11809 11835 11809 11776.8
v3新版本 4859 4617 4713 4963 4950 4820.4
手机型号:一加3T 第一次 第二次 第三次 第四次 第五次 平均
旧版本 9028 9049 9265 9150 9035 9105.4
v3新版本 3455 3319 3281 3436 3415 3381.2

4. 视图层通过webview调试

老版uni-app一直无法方便的调试视图元素,v3支持webkit remote debug,在视图菜单打开webview调试控制,手机端运行可调试的基座,打开vue页面,即可在控制台看到该页面。点击“Inspect(调试)”。

注意:目前仅支持安卓调试

注意:

  • uni-app 只有v3模式下的vue页面支持webview调试。nvue不支持,原生的tabbar、navigationbar、video、map、subnvue、cover-view等也均无法审查界面
  • webview调试只能调试视图层的dom,方便布局排版。但不能debug js,因为js不运行在webview里。debug js仍然使用之前控制台右上角的debug虫子图标
  • iOS包必须使用自己的测试开发证书打自定义基座包,然后在mac电脑上的safari里才能调试。

5. 更全的vue语法支持

uni-app虽然相较于市面其他多端框架,是对vue支持最全面的。但仍然有部分vue语法不支持。本次在App端拉齐了支持度(小程序端暂未变化)

尤其是很多开发者喜欢的 v-html 指令,终于可以在App端正常运行了。以下为新增支持vue语法:

全局 API

全局 API 说明
Vue.extend 不可作为组件使用
Vue.directive -
Vue.filter 旧版不可以在class中使用

选项

选项 说明
props 旧版不可以传递函数
directives -
filters 旧版不可以在class中使用
provide/inject 旧版部分支持
name 旧版不支持递归组件
model -
inheritAttrs -

生命周期钩子

生命周期钩子 说明
activated -
deactivated -

实例属性

实例属性 说明
vm.$isServer V3总是返回false
vm.$attrs -
vm.$listeners -

模板指令

模板指令 说明
v-html -
v-bind 旧版不支持v-bind="{who:me}"类似用法
v-pre -
v-once -

特殊属性

特殊属性 说明
is -

内置组件

内置组件 说明
component -
keep-alive -

目前仍有少部分vue语法未支持。具体见附录。

6. 去除wxs的各种限制,解禁的视图层js

wxs是一种运行在视图层的js,它用于解决js逻辑层和视图层通信无法实时响应的问题,比如跟手操作。在微信小程序里可用wxs实现swiperaction等跟手效果。

但过去wxs的限制较多,能解决的问题有限。

v3在app端解开了这个限制,可以任意操作视图层的元素,包括documentcanvas等。

老版的canvas上跟手绘制内容在低端机上难以流畅,在新版中,通过解禁的wxs就可以实现了。

如果需要快速绘制canvas动画,也可以一次性将绘制逻辑和数据传入视图层,减少两层间通信阻塞,然后在视图层绘制动画。

但开发者使用wxs应该是作为补充,仅用于解决普通开发模式下难以解决的问题。不应该大量修改视图层dom,会造成框架管理混乱。

遗留问题

  • App端的editor组件暂时未实现
  • App端暂不支持微信小程序端的自定义组件
    在uni-app发展初期,非常需要兼容微信的自定义组件,以弥补uni-app生态不足的问题。
    现在的uni-app,插件市场已经有近千款插件,很多重要插件的性能和功能,均已超过了微信的自定义组件生态。
    而微信自定义组件的性能,毕竟不如vue组件的性能,无法差量diff数据,还需要学习微信语法写setData。
    所以在v3中,微信小程序自定义组件在App端的兼容将不再作为重点,后期会通过插件的方式引入。
    之所以做成插件,是因为这块功能不常用,内置到v3通用版中会增大框架的不少体积。

范围注意

  • v3是针对App的改进,尤其是vue页面的改进。与其他平台无关。
  • app-nvue下,仍然不会支持v-html和wxs等技术
  • v3模式加速了首页 nvue 的启动速度,当在首页 nvue 中访问 getApp 不一定可以获取真正的 App 对象

v3初亮相,目前还是alpha状态,需要开发者们积极反馈问题,以帮助我们尽快完善它的质量,尽快发布正式版。

附:Vue特性支持表(App端)

全局配置

Vue 全局配置 旧版 V3 说明
Vue.config.silent 支持 支持 -
Vue.config.optionMergeStrategies 支持 支持 -
Vue.config.devtools 不支持 不支持 只在Web环境下支持
Vue.config.errorHandler 支持 支持 -
Vue.config.warnHandler 支持 支持 -
Vue.config.ignoredElements 支持 支持 强烈不推荐,会覆盖uni-app框架配置的内置组件
Vue.config.keyCodes 不支持 不支持 -
Vue.config.performance 不支持 不支持 只在Web环境下支持
Vue.config.productionTip 支持 支持 -

全局 API

Vue 全局 API 旧版 V3 说明
Vue.extend 不支持 支持 不可作为组件使用
Vue.nextTick 不支持 不支持 -
Vue.set 支持 支持 -
Vue.delete 支持 支持 -
Vue.directive 不支持 支持 -
Vue.filter 支持 支持 旧版不可以在class中使用
Vue.component 支持 支持 -
Vue.use 支持 支持 -
Vue.mixin 支持 支持 -
Vue.version 支持 支持 -
Vue.compile 不支持 不支持 uni-app使用的vue只包含运行时的版本

选项

Vue 选项 旧版 V3 说明
data 支持 支持 -
props 支持 支持 旧版不可以传递函数
propsData 支持 支持 -
computed 支持 支持 -
methods 支持 支持 -
watch 支持 支持 -
el 不支持 不支持
template 不支持 不支持 uni-app使用的vue是只包含运行时的版本
render 不支持 不支持 -
renderError 不支持 不支持 -
directives 不支持 支持 -
filters 支持 支持 旧版不可以在class中使用
components 支持 支持 -
parent 支持 支持 不推荐
mixins 支持 支持 -
extends 支持 支持 -
provide/inject 支持 支持 旧版部分支持
name 支持 支持 旧版不支持递归组件
delimiters 不支持 不支持 -
functional 不支持 不支持 -
model 不支持 支持 -
inheritAttrs 不支持 支持 -
comments 不支持 不支持 -

生命周期钩子

Vue 生命周期钩子 旧版 V3 说明
beforeCreate 支持 支持 -
created 支持 支持 -
beforeMount 支持 支持 -
mounted 支持 支持 -
beforeUpdate 支持 支持 -
updated 支持 支持 -
activated 不支持 支持 -
deactivated 不支持 支持 -
beforeDestroy 支持 支持 -
destroyed 支持 支持 -
errorCaptured 支持 支持 -

实例属性

Vue 实例属性 旧版 V3 说明
vm.$data 支持 支持 -
vm.$props 支持 支持 -
vm.$el 不支持 不支持 -
vm.$options 支持 支持 -
vm.$parent 支持 支持 uni-app里面view等内置标签是以组件方式实现,$parent会获取这些内置组件
vm.$root 支持 支持 -
vm.$children 支持 支持 -
vm.$slots 支持 不支持 旧版获取值为{'slotName':true/false}比如:{"footer":true}
vm.$scopedSlots 支持 支持 旧版获取值为{'slotName':true/false}比如:{"footer":true}
vm.$refs 支持 支持 -
vm.$isServer 不支持 支持 V3总是返回false
vm.$attrs 不支持 支持 -
vm.$listeners 不支持 支持 -

实例方法

Vue 实例方法 旧版 V3 说明
vm.$watch() 支持 支持 -
vm.$set() 支持 支持 -
vm.$delete() 支持 支持 -
vm.$on() 支持 支持 -
vm.$once() 支持 支持 -
vm.$off() 支持 支持 -
vm.$emit() 支持 支持 -
vm.$mount() 不支持 不支持 -
vm.$forceUpdate() 支持 支持 -
vm.$nextTick() 支持 支持 -
vm.$destroy() 支持 支持 -

模板指令

Vue 指令 旧版 V3 说明
v-text 支持 支持 -
v-html 不支持 支持 -
v-show 支持 支持 -
v-if 支持 支持 -
v-else 支持 支持 -
v-else-if 支持 支持 -
v-for 支持 支持 -
v-on 支持 支持 -
v-bind 支持 支持 旧版不支持v-bind="{who:me}"类似用法
v-model 支持 支持 -
v-pre 不支持 支持 -
v-cloak 不支持 不支持 -
v-once 不支持 支持 -

特殊属性

Vue 特殊属性 旧版 V3 说明
key 支持 支持 旧版不支持表达式
ref 支持 支持 -
is 不支持 支持 -

内置组件

Vue 内置组件 旧版 V3 说明
component 不支持 支持 -
transition 不支持 不支持 -
transition-group 不支持 不支持 -
keep-alive 不支持 支持 -
slot 支持 支持 -
20 关注 分享
DCloud_heavensoft redoume@163.com ws_tcxc@163.com humu 1601745371@qq.com 13961168796@qq.com 948720366@qq.com yellowms 377313813@qq.com DCloud_UNI_CHB wenju 554746439@qq.com DCloud_iOS_XHY icare 214163636@qq.com zhf_hai@163.com sonicsunsky@qq.com bowenru@163.com 627457796@qq.com ErrorCode

要回复文章请先登录注册

DCloud_App_Array

DCloud_App_Array

回复 841571741@qq.com:
下载文件的totalSize是通过http协议中的content-length头获取的,如果服务器返回的此协议头数据不正确则可能出现这种情况。请单独发帖提供有问题的示例来排查此问题。
18 小时前
tiankong_2010@163.com

tiankong_2010@163.com

input输入框,隐藏软键盘,光标就丢失了
19 小时前
弄月

弄月

event handler[ca34688d][13] not found 这又是什么鬼错误?
21 小时前
弄月

弄月

太烂了太烂了,搞了一个上午,啥都没搞定,时不时就白屏了,点一下调试窗口的刷新按钮恢复正常。无法调试js,连console.log都没反应
23 小时前
弄月

弄月

2.4.4alpha无法调试,调试窗口的sources栏没有任何文件
23 小时前
1094343983@qq.com

1094343983@qq.com

回复 DCloud_UNI_王亚琪:
安卓官方的模拟器
1 天前
841571741@qq.com

841571741@qq.com

downloadedSize 总是大于totalsize
的问题 2015年就有人提出来了 请问你们打算什么时候修复?
1 天前
DCloud_UNI_王亚琪

DCloud_UNI_王亚琪 (作者)

回复 1094343983@qq.com:
什么模拟器
1 天前
DCloud_UNI_王亚琪

DCloud_UNI_王亚琪 (作者)

回复 shenhao7988@outlook.com:
开贴传一下你的代码,邀请我一下
1 天前
1094343983@qq.com

1094343983@qq.com

v3模式下编译安卓5.1版本的应用,在模拟器直接闪退了??
1 天前