DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2019-04-12 15:01
  • 更新:1 天前
  • 阅读:2257

uni-app 1.9发布,App平台升级为新版编译器(自定义组件模式),支持更多Vue语法

分类:uni-app

uni-app 1.8版重写框架,实现了微信端的性能翻倍,并增加了若干Vue语法支持,详见

之后,众多开发者呼吁将新框架尽快迁移到App平台,经过2周8个Alpha版的迭代,uni-app团队完成新框架在App平台的迁移适配工作,至此1.9版正式发布。

新版特性

uni-app 1.9版主要改进包括:

  • 插件市场支持付费原生插件,欢迎插件作者们踊跃提交原生插件,示例https://ext.dcloud.net.cn/plugin?id=135
  • 引擎架构升级,提升App启动速度、减少js阻塞
  • 支持自定义组件模式的新编译器,大幅提升App端的组件性能、支持过滤器等更多vue语法
  • 很多开发者报包括uni ui的折叠面板、swipeaction等组件中无法使用v-for也需要使用新版并配置新编译模式解决。

新版支持了更多 Vue 语法,详细如下:

  • 支持过滤器 filter
  • 支持比较复杂的 JavaScript 渲染表达式
  • 支持在 template 内使用 methods 中的函数
  • 支持 v-html (同 rich-text 的解析)
  • 支持 v-slot 新语法
  • 支持解构插槽 Prop 设置默认值
  • 支持 slot 后备内容
  • 组件支持原生事件绑定,如:@tap.native

新版不支持的 vue 语法

  • class不支持绑定Obejct变量(使用字符串的形式绑定)
  • 不支持事件修饰符:prevent、passive(在App与小程序平台,使用stop修饰符,既可以阻止冒泡也能阻止默认行为)
  • 不支持render、inline-template、X-Templates、keep-alive、transition
  • 不支持使用 Vue.use 的方式注册全局组件(在main.js使用Vue.component的方式引入)

新旧版本兼容策略

为兼容历史项目,uni-app 现阶段同时支持老的template模板模式、和新的自定义组件模式两种模式,默认策略如下:

  • HBuilderX 1.9.0+ 新创建的项目,在微信端、App端默认会启用新的框架;
  • 历史项目默认使用老框架。如需启动新框架请按下面配置开启。
  • 注意HBuilderX Alpha版默认使用新框架,若改用1.9正式版后,也需要手动配置开启新框架。

开发者可在manifest.json的源码视图里配置, manifest.json -> app-plus -> usingComponents切换编译模式,如下:

// manifest.json  
{  
    // ...  
    /* App平台特有配置 */  
    "app-plus": {  
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式`,否则启用老的`template模板模式`  
    }  
    /* 微信小程序特有配置 */  
    "mp-weixin": {  
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式`,否则启用老的`template模板模式`  
    }  
}  

Tips:

  • 为保证自定义组件兼容性,运行到微信开发者工具时,建议将微信基础库设置为最新版本(微信工具项目设置中)。
  • 如果你使用了新增的vue语法,请注意只有App、H5、微信三个平台支持这些新语法,编译到其他平台时,要用条件编译处理。
  • 如发现新框架有bug,开发者可通过manifest.json切回老框架编译模式,同时欢迎在 ask 社区反馈bug

新版开发注意事项

开发者启用自定义组件模式后,需注意部分开发事项,参考https://ask.dcloud.net.cn/article/35851

Tips:新编译模式在App端,控制台打印的日志无法体现源码的准确行数的问题,需升级到1.9.2版本。

性能优化建议

  1. 模板中不建议直接使用 object
<!-- 低性能写法 -->  
<uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-title>  
<!-- 高性能写法 -->  
<template>  
    <view>  
        <uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="extraIcon"></uni-title>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            extraIcon:{color: '#4cd964',size: '22',type: 'spinner'}  
        }  
    }  
}  
</script>  
  1. 在模板中未使用的数据不建议定义在data 中,未使用的数据一律移除到 vm 外边定义
<!-- 低性能写法 -->  
<template>  
    <view>  
        {{name}}  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            name:'',  
            types:true  
        }  
    },  
    onLoad(){  
        if(this.types){  
            this.name = '张三';  
        } else {  
            this.name = '李四';  
        }  
    }  
}  
</script>  
<!-- 高性能写法 -->  
<template>  
    <view>  
        {{name}}  
    </view>  
</template>  
<script>  
let types = true ;  
export default {  
    data() {  
        return {  
            name:''  
        }  
    },  
    onLoad(){  
        if(types){  
            this.name = '张三';  
        } else {  
            this.name = '李四';  
        }  
    }  
}  
</script>  
  1. 为提升开发体验,新版本增加了部分 Vue 语法,其实这些语法在微信小程序中本身是不支持的;为支持这些语法,uni-app 会在编译、运行时分别做一些额外的工作,若开发者希望追求性能极致,则建议尽量少用或者不用新增语法。

老项目改造注意

老版编译模式升级新版编译模式,可先在manifest的源码视图中,在微信下打开新编译模式,运行到小程序调试。然后再迁到app端。

请一定注意新版编译模式,必须与新版手机sdk、基座、打包机、cli绑定。即使HBuilderX升级,如果你的项目是cli方式、或使用了老的自定义基座、或本地sdk离线打包,则需手动升级这些,否则会造成白屏等多种异常。详见https://ask.dcloud.net.cn/article/35845

后续

新框架会陆续把新编译器迁移到其他端的小程序上,并同步进行App端的nvue的强化工作。

升级注意

如果你的项目是cli创建的,记得编译器在你的项目下,不会随着HBuilderX升级而升级,你需要npm update手动升级编译器。

5 关注 分享
377313813@qq.com DCloud_UNI_HT DCloud_UNI_Trust 逐鹿实验室 352489099@qq.com

要回复文章请先登录注册

DCloud_UNI_HT

DCloud_UNI_HT

回复 水域心诚: 文档已经更新,强制刷新一下,看看是不是缓存。
1 天前
水域心诚

水域心诚

需要更新下文档了,文档还写的模板语法不支持过滤器
1 天前
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 782849937@qq.com: 昨晚已发布,检查更新看一下
2 天前
782849937@qq.com

782849937@qq.com

回复 DCloud_UNI_CHB: 大概晚上几点发布?
2 天前
479686314@qq.com

479686314@qq.com

尴尬,最新版的sdk,搞了一天安卓一直白屏,就在刚刚,把自定义组件模式设置为false,终于可以了
2 天前
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 余红杰: H5平台的白屏,今天会发布1.9.3升级版
2 天前
余红杰

余红杰

白屏何时解决。安卓的,tabbar都没那种
2 天前
ynzkyxlx@163.com

ynzkyxlx@163.com

回复 DCloud_UNI_CHB: 好的
3 天前
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 ynzkyxlx@163.com: 建议新开一个帖子,提供示例代码及有问题的终端信息
3 天前
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 271103260@qq.com: cookie在多端上存在兼容问题,可通过HTTP请求头中增加header信息来模拟cookie
3 天前
ynzkyxlx@163.com

ynzkyxlx@163.com

使用新的编译模式后,uni-app的input组件后面的click事件无效?
3 天前
271103260@qq.com

271103260@qq.com

使用自定义组件编译后安卓下由于cookie问题无法登陆获取用户信息,ios没有这个问题,取消编译后安卓就能正常登陆获取用户信息,这个怎么解决?
5 天前
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 云飞扬啊: 不同编译模式差异,参考:https://ask.dcloud.net.cn/article/35843
6 天前
uunique7@qq.com

uunique7@qq.com

什么时候能支持keep-alive吗
6 天前
415039395@qq.com

415039395@qq.com

更新时能不能有个进度百分比.....有点烦 - -
2019-04-18 09:24
lggcfx@qq.com

lggcfx@qq.com

回复 DCloud_UNI_CHB: 是的,一直离线打包的,2个问题,一个是 1.9的新自定义模式开启,进去就白屏, 不开起就正常, 小程序没问题, 第二个问题就是 app 更新不能安装,下载完后就没反应了, 只能换回1.7版,才正常
2019-04-18 05:05
云飞扬啊

云飞扬啊

template模板模式,和组件模式有什么区别??vue页面还是<template><view></view></template>吗?
组件模式的页面又是怎么样的呢??
2019-04-17 21:33
DCloud_UNI_HDX

DCloud_UNI_HDX

回复 850177423@qq.com: 1.9.1 nvue页面,全局设置navigationBarBackgroundColor有效
2019-04-17 14:54
493043241@qq.com

493043241@qq.com

1.9.1 APP不使用usingComponents 原生插件不能回调报错 使用usingComponents 那么用uparse解析html后 再去使用createSelectorQuery.in(this).selectAll 元素永远查询不到
2019-04-17 11:56
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 lggcfx@qq.com: sdk 都更新到4-12号的?什么SDK?离线打包的?
2019-04-16 19:58
lggcfx@qq.com

lggcfx@qq.com

使用了 usingComponents:true 新自定义组件模式 安卓 app打开白屏, 微信小程序都正常,1.9出现的问题,今天1.91依然一样, 而且1.91 app不能自动安装了,下载完 apk 就 没反应了,又回到1.8的问题了,sdk 都更新到4-12号的
2019-04-16 19:53
wangguodong194@163.com

wangguodong194@163.com

新版hbuilderx保存不自动编译时怎么回事啊?一天了,都不行
2019-04-16 16:01
DCloud_UNI_HDX

DCloud_UNI_HDX

回复 850177423@qq.com: bug已确认,iOS会白屏,Android正常,下版修复
2019-04-16 15:48
399915881@qq.com

399915881@qq.com

麻烦多内测再发布,好多问题啊
2019-04-15 23:20
DCloud_UNI_Trust

DCloud_UNI_Trust

回复 850177423@qq.com: 自定义组件模式下么?单独发帖,描述清楚问题或需求,并提供可以重现问题的项目,方便测试定位问题。
注意:如果不便公开代码,请选择报bug并上传仅管理员可见的附件。
2019-04-15 20:46
DCloud_UNI_Trust

DCloud_UNI_Trust

回复 2389259876@qq.com: 开启自定义组件模式,请仔细看文章说明。
2019-04-15 20:45
DCloud_UNI_Trust

DCloud_UNI_Trust

回复 786039294@qq.com: 单独发帖详细描述清楚问题,并附上可以重现问题的测试项目。
2019-04-15 20:44
DCloud_UNI_Trust

DCloud_UNI_Trust

回复 wangzhw@vip.qq.com: http://ask.dcloud.net.cn/article/35837
2019-04-15 20:44
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 魏小鹏: 如果问题依然存在,可以把项目私信发给我们,我们验证一下
2019-04-15 20:40
786039294@qq.com

786039294@qq.com

v-for 暂不支持循环数据 是什么原因呢,就一个页面报这个错误
2019-04-15 14:04
sharper

sharper

问题太多,求稳定
2019-04-15 13:45
wangzhw@vip.qq.com

wangzhw@vip.qq.com

request promis的封装 H5 不能使用了
2019-04-15 12:32
850177423@qq.com

850177423@qq.com

无法正常使用nvue
2019-04-15 10:49
850177423@qq.com

850177423@qq.com

使用nvue,全局设置的navigationBarBackgroundColor,不管用
2019-04-15 10:08
850177423@qq.com

850177423@qq.com

1.9版本,nvue使用input组件输入,关闭虚拟键盘,页面就白屏
2019-04-15 10:07
1435540729@qq.com

1435540729@qq.com

摄像头调不起来!livePusher推流没反应!
2019-04-15 10:02
2389259876@qq.com

2389259876@qq.com

不是说支持过滤器么 更新到1.9了 在页面还是没法直接使用啊
2019-04-15 00:03
978332153@qq.com

978332153@qq.com

支持在 template 内使用 methods 中的函数 这个好啊,一直遇到这个问题!!!
2019-04-14 23:35
aoaobaba

aoaobaba

流弊 ~ 我要改一波操作~~~~~~~~~
2019-04-14 18:06
魏小鹏

魏小鹏

template版的项目切换到自定义组件模式时进去直接白屏,啥也不显示,而且也不报错。。没法调
2019-04-14 10:23
逐鹿实验室

逐鹿实验室

支持DCloud!支持uni-app!期待uni-app2.0重磅发布!!!
2019-04-14 09:21