DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-04-16 10:33
  • 更新:3 天前
  • 阅读:26767

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

分类:uni-app

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

  • template模板模式:老框架模式,借鉴自mpvue,将用户编写的Vue组件,编译为WXML中的模板(template),变相实现组件化开发,性能差,支持 Vue 语法少,比如不支持过滤器。
  • 自定义组件模式:新框架模式,DCloud自研,将用户编写的Vue组件,编译为微信小程序自定义组件,实现了更高的性能更完善的 Vue 语法支持。同时在App端提供了独立的js引擎,大幅提升性能

如何切换编译模式

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模板模式`   
    }    
}   

在HBuilderX的manifest的可视化界面,每个平台的也都有配置勾选。

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

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

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

非自定义组件模式升级为自定义组件模式注意

自定义组件模式虽然兼容大部分老模式的写法,但也有部分不兼容。老项目升级时,可能需要修改部分代码,请详细参考自定义组件模式开发注意事项:https://ask.dcloud.net.cn/article/35851

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

自定义组件模式模板模式都不支持的 vue 语法:

  • 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绑定样式

问题反馈

  • 如果在使用 uni-app 的过程中遇到问题,先认真阅读下 如何准确地反馈 uni-app 的问题 再发帖咨询。
  • 在不要在本文章下留言报bug,请发布新帖,并将帖子地址复制到回复栏,并简短说明bug。

扩展阅读

8 关注 分享
DCloud_UNI_CHB Trust linux-user@163.com 617404917@qq.com 377313813@qq.com 1750352431@qq.com skysowe 1203606379@qq.com

要回复文章请先登录注册

zhy1994821@qq.com

zhy1994821@qq.com

```
11:23:12.199 Uncaught TypeError: Cannot read property '__needTouchEvent__' of undefined at __uniapptabbar.html:1
11:23:12.599 23:07.203 22967 22985 E console : [ERROR] reportJSException >>>> exception function:createInstance, exception:Exception: TypeError: undefined is not an object (evaluating 'this.__callbacks__[e]')
11:23:12.621 23:07.203 22967 22985 E console : addEventListener@weex service:3:16424
11:23:12.639 23:07.203 22967 22985 E console : addEventListener@weex service:3:101603
11:23:12.659 23:07.203 22967 22985 E console : (global function):6:84862
11:23:12.679 23:07.203 22967 22985 E console : (global function):6:85140
11:23:12.748 23:07.203 22967 22985 E console : (global function):6:85502
11:23:12.748 23:07.203 22967 22985 E console : (global function):6:85505
11:23:12.748 23:07.203 22967 22985 E console : anonymous@(global function):14686:7
11:23:12.759 23:07.203 22967 22985 E console : (weex framework):1:41522
11:23:12.779 23:07.203 22967 22985 E console : createInstance@(weex framework):1:41533
11:23:12.799 23:07.203 22967 22985 E console : (weex framework):1:178096
11:23:12.819 23:07.203 22967 22985 E console :
11:23:12.839 23:07.203 22967 22985 E console : getTemplateInfo== template md5 5170ad86bf1d4cfe815b738b112f6578 length 6968158 base64 md5 UXCthr8dTP6BW3OLES9leA== response header {"templateSourceBase64MD5":["UXCthr8dTP6BW3OLES9leA=="],"templateSourceMD5":["5170ad86bf1d4cfe815b738b112f6578"]}

```
安卓9,小米8,请问遇到这种问题如何追踪并解决..
3 天前
306816224@qq.com

306816224@qq.com

改成 自定义后,v-model,class绑定都不正常了,唉,要崩溃了
4 天前
313254942@qq.com

313254942@qq.com

回复 wenju:
我说自定义组件模式deep不好使 他让我用>>> 你有遇到这个问题么
2019-06-19 15:14
wenju

wenju

回复 313254942@qq.com:
scss用 /deep/ 不是>>>
2019-06-17 18:02
2923557334@qq.com

2923557334@qq.com

回复 1608626143@qq.com:
你是怎么处理的,我需要用过滤器,非自定义组件模式还不支持
2019-06-16 21:15
1608626143@qq.com

1608626143@qq.com

回复 2923557334@qq.com:
我也遇到这种情况
2019-06-16 20:06
2923557334@qq.com

2923557334@qq.com

本地打包,不使用自定义组件模式没事,只要使用,立马就白屏
2019-06-14 16:40
313254942@qq.com

313254942@qq.com

回复 DCloud_UNI_HT:
.... scss 不解析 >>> 尴尬
2019-06-13 18:24
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 313254942@qq.com:
使用 >>>
2019-06-13 18:18
313254942@qq.com

313254942@qq.com

/deep/.class-name 非自定义组件模式下没有问题 自定义模式下无效
2019-06-13 18:17
夏宇

夏宇

https://ask.dcloud.net.cn/question/71842 运行支付宝小程序报错
2019-05-28 20:39
18435163351@163.com

18435163351@163.com

20:19:57.639 reportJSException >>>> exception function:createInstance, exception:Exception: TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
20:19:57.660 19:58.000 1497 1520 E console : __webpack_require__@(global function):2426:30
20:19:57.680 19:58.000 1497 1520 E console : componentsMpvueCitypickerMpvueCityPickerCreateComponent@(global function):27802:118
20:19:57.700 19:58.000 1497 1520 E console : __webpack_require__@(global function):2426:35
20:19:57.721 19:58.000 1497 1520 E console : checkDeferredModules@(global function):2383:45
20:19:57.742 19:58.000 1497 1520 E console : (global function):27798:61
20:19:57.761 19:58.000 1497 1520 E console : require@(global function):8:671861
20:19:57.782 19:58.000 1497 1520 E console : (global function):27807:8
20:19:57.806 19:58.000 1497 1520 E console : anonymous@(global function):36121:7
20:19:57.826 19:58.000 1497 1520 E console : (weex framework):1:41074
20:19:57.848 19:58.000 1497 1520 E console : createInstance@(weex framework):1:41085
20:19:57.874 19:58.000 1497 1520 E console : (weex framework):1:177648
20:19:57.899 19:58.000 1497 1520 E console :
20:19:57.919 ,"templateSourceMD5":["6ae9e9779472ccd96a7bdaa08dd19507"]}

usingComponents也关闭了为什么还是报这样的错
2019-05-15 20:22
18435163351@163.com

18435163351@163.com

17:10:07.424 reportJSException >>>> exception function:createInstance, exception:Exception: SyntaxError: Unexpected token '...'. Expected a property name.

17:10:07.443 10:02.260 3562 3597 E console : at (global function):12370

17:10:07.505 10:02.260 3562 3597 E console : (weex framework):1:41067

17:10:07.526 10:02.260 3562 3597 E console : createInstance@(weex framework):1:41085

17:10:07.549 10:02.260 3562 3597 E console : (weex framework):1:177648

17:10:07.569 10:02.260 3562 3597 E console :

17:10:07.589 ,"templateSourceMD5":["dc4b37b1193f673c5c066a95798aded0"]}


报这样的错;这个该怎么解决
2019-05-15 20:12
18435163351@163.com

18435163351@163.com

回复 露珠:
怎么解决的?我也遇到这个问题了
2019-05-15 20:09
gs089597@163.com

gs089597@163.com

回复 DCloud_UNI_HT:
贴子下有2个截图,https://ask.dcloud.net.cn/question/70959
2019-05-15 17:59
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 gs089597@163.com:
单独开个帖子,贴报错,贴代码片段 ,或者上传 代码demo。
2019-05-15 17:54
gs089597@163.com

gs089597@163.com

自定义组件编译模式时css属性选择器,编译不了【APP和小程序端】 用less,scss预编译器或不用预编译器都报错,css都无法编译

H5端正常
模板编译模式正常可以编译
2019-05-15 17:42
露珠

露珠

自定义组件编译模式白屏,Android9,报错如下
如手机上HBuilder调试基座未启动,请手动启动...
17:10:07.424 reportJSException >>>> exception function:createInstance, exception:Exception: SyntaxError: Unexpected token '...'. Expected a property name.
17:10:07.443 10:02.260 3562 3597 E console : at (global function):12370
17:10:07.505 10:02.260 3562 3597 E console : (weex framework):1:41067
17:10:07.526 10:02.260 3562 3597 E console : createInstance@(weex framework):1:41085
17:10:07.549 10:02.260 3562 3597 E console : (weex framework):1:177648
17:10:07.569 10:02.260 3562 3597 E console :
17:10:07.589 ,"templateSourceMD5":["dc4b37b1193f673c5c066a95798aded0"]}
2019-05-13 17:14
烫烫烫烫烫烫

烫烫烫烫烫烫

海马玩模拟器 自定义模式 直接白屏,非自定义模式可以打开,页面就是PC端页面一样变得很大。
2019-05-11 15:25
我吃柠檬

我吃柠檬

自定义组件模式下uni.onSocketMessage不执行,切换到template模板模式就可以监听,怎么办
2019-05-07 08:59
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 lvlanqiu@163.com:
确认 bug ,下个版本修复。
2019-05-06 21:02
lvlanqiu@163.com

lvlanqiu@163.com

使用自定义组件模式真机ios9.3 运行白屏,请问怎么解决?template模板模式就没有问题
2019-05-06 15:59
yorick

yorick

以后能不能支持form提交模式能获取子组件里input的值 详见
http://ask.dcloud.net.cn/question/67452
2019-05-05 10:59
285698775@qq.com

285698775@qq.com

一直报 Attempted to assign to readonly property.; at uni.navigateTo 这个是什么意思?
2019-04-30 09:15
295113411@qq.com

295113411@qq.com

回复 1647800606@qq.com:
你的问题解决了么?自定义组件编译模式白屏问题
2019-04-29 16:49
617404917@qq.com

617404917@qq.com

回复 DCloud_UNI_HT:
没有设置! 今天刚更新了软件,重新创建了 Hello uni-app模板,自义定编译模式下,首页没有弹性滑动!改成非自定义模式就有了!IOS 12.2
2019-04-28 09:08
1028938635@qq.com

1028938635@qq.com

自定义编译模式的组件不支持v-bind?报错:Error: 暂不支持 v-bind="" 用法
2019-04-26 17:57
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 4668460@qq.com:
需要自己判断 如:{{ info.test || ''}}
2019-04-26 17:13
4668460@qq.com

4668460@qq.com

改用自定义编译模式后,定的info:{},在未获取到数据前,页面上显示undefined,旧版的编译方式,会显示空白,自定义模式能不能也是在数据未加载前显示空白呢?显示乱码给用户的体验不好啊
2019-04-26 11:45
troj.an@qq.com

troj.an@qq.com

“不支持使用 Vue.use 的方式注册全局组件(在main.js使用Vue.component的方式引入)”
“template模板模式除了不支持如上Vue语法外,额外还不支持如下语法:”
template模板模式支持Vue.component的啊?
2019-04-26 10:42
578245992@qq.com

578245992@qq.com

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

wenju

编译到H5的时候, 自定义组件的onReady不执行, 只执行mounted ┭┮﹏┭┮
2019-04-23 19:44
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1647800606@qq.com:
已经在联系你排查问题了
2019-04-23 11:10
1647800606@qq.com

1647800606@qq.com

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

DCloud_UNI_HT (作者)

回复 617404917@qq.com:
首页是否设置过 bounce ,或者有什么其他特殊组件
2019-04-22 16:06
617404917@qq.com

617404917@qq.com

IOS改成自定义编译模式,首页没有弹性滑动了,其他页面有,就首页没有!咋回事
2019-04-22 10:26
DCloud_heavensoft

DCloud_heavensoft

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

123796555@qq.com

回复 DCloud_heavensoft:
已经升级到1.9.2,打包也是云打包
2019-04-19 10:20
DCloud_heavensoft

DCloud_heavensoft

回复 123796555@qq.com:
新编译器必须搭配新客户端sdk,不匹配就会白屏
2019-04-18 23:20
123796555@qq.com

123796555@qq.com

新版编译器还是问题多,连自己官方的hello-uiapp都卡顿和白屏
2019-04-18 22:46
小张没有名字

小张没有名字

白屏 又没有报错信息
2019-04-18 22:43
123796555@qq.com

123796555@qq.com

从1.8开始,编译老的项目十分卡顿、白屏。
2019-04-18 22:10
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1171612749@qq.com:
单独发帖,详细说明问题,附上截图,视屏,demo等。
2019-04-18 19:39
1171612749@qq.com

1171612749@qq.com

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

1171612749@qq.com

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

DCloud_UNI_HT (作者)

回复 1334845275@qq.com:
白屏整的是 所有内容都不显示 ? 还是部分不显示? 控制台有没有报错 ?
2019-04-18 16:33
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 1647800606@qq.com:
项目是 hbuilderx 创建的 ,还是 cli ?
2019-04-18 16:33
小Q

小Q

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

小Q

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

1334845275@qq.com

从alpha版到1.9.2,改成自定义组件形式一直都是白屏。
2019-04-18 14:01
余红杰

余红杰

回复 1647800606@qq.com:
+1我的也是。
2019-04-18 12:52
1647800606@qq.com

1647800606@qq.com

改成自定义组件模式app就白屏,不改没问题 我的是1.9.2版本,同样的问题
2019-04-18 12:28
DCloud_UNI_HT

DCloud_UNI_HT (作者)

回复 萧雨:
白屏指的是什么 ?什么平台下 ?手机系统型号提供一下。如果可能的话,单开一个帖子,提供一个简单的demo。
2019-04-18 11:24
萧雨

萧雨

改成自定义组件模式就白屏,不改没问题 我的是1.9.2版本
2019-04-18 11:14