DCloud_UNI_HT
DCloud_UNI_HT
  • 发布:2019-04-16 10:33
  • 更新:2020-05-24 09:50
  • 阅读:120863

uni-app模板编译模式和自定义组件编译模式差异说明

分类:uni-app

更新:这2种编译模式均已下线。本文已过期

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

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

如何切换编译模式

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

%platform% 是指平台名称

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

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

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

  • HbuilderX 2.3.0 正式版之前的版本为保证历史项目兼容,默认使用老编译器(template模板模式),即不配置的情况下效果等同于 usingComponents: false,而 HbuilderX 2.3.0 正式版之后,默认会启用新编译器(自定义组件模式),即不配置的情况下效果等同于 usingComponents: true,从 HbuilderX 2.3.8 正式版开始将停止支持非自定义组件模式,届时,新版HBuilderX真机运行和云打包,都不再支持非自定义组件模式。HBuilderX的云打包,只向下保留2个版本。再升级1个版本后,老版打包机也不再支持非自定义组件模式。详见https://ask.dcloud.net.cn/article/36385
  • 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。

扩展阅读

10 关注 分享
DCloud_UNI_CHB Trust l***@163.com 6***@qq.com 秋凡 1***@qq.com skysowe 1***@qq.com y***@163.com DCloud_UNI_HRK

该文章目前已经被锁定, 无法添加新评论

z***@qq.com

z***@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,请问遇到这种问题如何追踪并解决..
2019-07-17 11:24
3***@qq.com

3***@qq.com

改成 自定义后,v-model,class绑定都不正常了,唉,要崩溃了
2019-07-16 15:59
3***@qq.com

3***@qq.com

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

wenju

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

2***@qq.com

回复 快乐学习生 :
你是怎么处理的,我需要用过滤器,非自定义组件模式还不支持
2019-06-16 21:15
快乐学习生

快乐学习生

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

2***@qq.com

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

3***@qq.com

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

DCloud_UNI_HT (作者)

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

3***@qq.com

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