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版本。
性能优化建议
- 模板中不建议直接使用
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>
- 在模板中未使用的数据不建议定义在
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>
- 为提升开发体验,新版本增加了部分
Vue
语法,其实这些语法在微信小程序中本身是不支持的;为支持这些语法,uni-app
会在编译、运行时分别做一些额外的工作,若开发者希望追求性能极致,则建议尽量少用或者不用新增语法。
老项目改造注意
老版编译模式升级新版编译模式,可先在manifest的源码视图中,在微信下打开新编译模式,运行到小程序调试。然后再迁到app端。
请一定注意新版编译模式,必须与新版手机sdk、基座、打包机、cli绑定。即使HBuilderX升级,如果你的项目是cli方式、或使用了老的自定义基座、或本地sdk离线打包,则需手动升级这些,否则会造成白屏等多种异常。详见https://ask.dcloud.net.cn/article/35845
后续
新框架会陆续把新编译器迁移到其他端的小程序上,并同步进行App端的nvue
的强化工作。
升级注意
如果你的项目是cli创建的,记得编译器在你的项目下,不会随着HBuilderX升级而升级,你需要npm update手动升级编译器。
60 个评论
要回复文章请先登录或注册
w***@vip.qq.com
8***@qq.com
8***@qq.com
8***@qq.com
1***@qq.com
2***@qq.com
9***@qq.com
aoaobaba
魏小鹏
逐鹿实验室