DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-04-16 10:33
  • 更新:21 小时前
  • 阅读:2763

uni-app新老编译模式差异说明

分类:uni-app

uni-app 自 1.8版本开始,同时支持两种编译模式:

  • template模板模式:老框架模式,借鉴自mpvue,将用户编写的Vue组件,编译为WXML中的模板(template),变相实现组件化开发,性能差,支持 Vue 语法少
  • 自定义组件模式:新框架模式,DCloud自研,将用户编写的Vue组件,编译为微信小程序自定义组件,实现了更高的性能及更多的 Vue 语法支持

如何切换编译模式

manifest.json 的源码视图里配置是否启用新编译器, manifest.json -> %platform% -> usingComponents 切换编译模式。

%platform% 是指平台名称,当前支持配置的平台:

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

manifest.json配置文件中,未明确指定编译模式(即未配置%platform% -> usingComponents),则uni-app默认策略如下:

  • HBuilderX 正式版为保证历史项目兼容,默认使用老编译器(template模板模式),即不配置的情况下效果等同于 usingComponents: false
  • HBuilderX Alpha 为开发者提供最新技术尝鲜,默认会启用新编译器(自定义组件模式),即不配置的情况下效果等同于 usingComponents: true
  • CLI 开发模式下的,默认编译策略同 HBuidlerX 正式版策略

Tips:切换编译环境之后,请重新运行项目

不同编译模式支持的Vue语法差异

自定义组件模式不支持的 vue 语法(这些语法在template模板模式下同样不支持):

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

template模板模式除了不支持如上Vue语法外,额外还不支持如下语法:

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

Tips:template模板模式支持的Vue语法较少,故我们推荐开发者切换为自定义组件模式

自定义组件模式开发注意事项

参考https://ask.dcloud.net.cn/article/35851

问题反馈

如果在使用 uni-app 的过程中遇到问题,先认真阅读下 如何准确地反馈 uni-app 的问题 再发帖咨询。

扩展阅读

2 关注 分享
DCloud_UNI_CHB DCloud_UNI_Trust

要回复文章请先登录注册

578245992@qq.com

578245992@qq.com

哇,这东西贼坑 , 切换到自定义组件模式后 , 我原本写的蓝牙开锁就完全监听不到数据了 , 找了半天才找到这个问题 , 换回template模板模式就监听到了
21 小时前
wenju

wenju

编译到H5的时候, 自定义组件的onReady不执行, 只执行mounted ┭┮﹏┭┮
1 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1647800606@qq.com: 已经在联系你排查问题了
1 天前
1647800606@qq.com

1647800606@qq.com

4-22 号更新依然没有解决app自定义组件模式白屏问题,项目为官方hello uni-app项目,模拟器为最新雷电模拟器,自定义组件模式运行到真机白屏
2 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 617404917@qq.com: 首页是否设置过 bounce ,或者有什么其他特殊组件
2 天前
617404917@qq.com

617404917@qq.com

IOS改成自定义编译模式,首页没有弹性滑动了,其他页面有,就首页没有!咋回事
3 天前
DCloud_heavensoft

DCloud_heavensoft

回复 123796555@qq.com: 那就不会白屏卡顿,hello uni-app在app端的性能,1.9版比1.8版高出不少
4 天前
123796555@qq.com

123796555@qq.com

回复 DCloud_heavensoft: 已经升级到1.9.2,打包也是云打包
6 天前
DCloud_heavensoft

DCloud_heavensoft

回复 123796555@qq.com: 新编译器必须搭配新客户端sdk,不匹配就会白屏
6 天前
123796555@qq.com

123796555@qq.com

新版编译器还是问题多,连自己官方的hello-uiapp都卡顿和白屏
6 天前
小张没有名字

小张没有名字

白屏 又没有报错信息
6 天前
123796555@qq.com

123796555@qq.com

从1.8开始,编译老的项目十分卡顿、白屏。
6 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1171612749@qq.com: 单独发帖,详细说明问题,附上截图,视屏,demo等。
6 天前
1171612749@qq.com

1171612749@qq.com

为什么 每个页面都会红屏闪烁一下才会加载数据出来 (背景色不是白色 颜色变化 白色>红色>正常数据显示)
6 天前
1171612749@qq.com

1171612749@qq.com

我的为什么会出现一下红屏闪烁 即使配置了 "app-plus" : {
"usingComponents":false} 还是没解决
6 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1334845275@qq.com: 白屏整的是 所有内容都不显示 ? 还是部分不显示? 控制台有没有报错 ?
6 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1647800606@qq.com: 项目是 hbuilderx 创建的 ,还是 cli ?
6 天前
小Q

小Q

1.9.2,改成自定义组件形式一直都是白屏(测试了hello nui-app也是一样)。
在manifest.json设置 "app-plus" : {
"usingComponents":false}
时才正常
6 天前
小Q

小Q

回复 1334845275@qq.com: 1.9.2,改成自定义组件形式一直都是白屏。
在manifest.json设置 "app-plus" : {
"usingComponents":false}
时才正常
6 天前
1334845275@qq.com

1334845275@qq.com

从alpha版到1.9.2,改成自定义组件形式一直都是白屏。
6 天前
余红杰

余红杰

回复 1647800606@qq.com: +1我的也是。
6 天前
1647800606@qq.com

1647800606@qq.com

改成自定义组件模式app就白屏,不改没问题 我的是1.9.2版本,同样的问题
6 天前
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 lcwin@qq.com: 白屏指的是什么 ?什么平台下 ?手机系统型号提供一下。如果可能的话,单开一个帖子,提供一个简单的demo。
6 天前
lcwin@qq.com

lcwin@qq.com

改成自定义组件模式就白屏,不改没问题 我的是1.9.2版本
6 天前