uni-app编译模式

2019-07-26 本文已影响0人瑟闻风倾

1. 实践问题说明

因为老项目是在非自定义编译模式下开发的（老项目在hello uni-app的基础上进行开发的），新项目又复用了老项目。但是新项目在开发的过程中遇到了层级覆盖的问题（感兴趣可参考uni-app之实现层级覆盖），需要将编译模式改为自定义编译模式。
非自定义组件模式升级为自定义组件模式时，自定义组件模式虽然兼容大部分老模式的写法，但也有部分不兼容。老项目升级时，可能需要修改部分代码，请详细参考：自定义组件模式开发注意事项。

拓展：本人在升级的过程中也遇到了问题，非自定义编译模式下项目中的拓展组件在编译模式升级后不能正常运行，需要进行修改，最简单的办法是删除未使用的拓展组件，新建hello uni-app项目（HBuilderX正式版默认保留老框架，Alpha版默认开启新框架；HBuilderX 1.8.0+ 新创建的项目默认也会启用新的框架）找到对应的拓展组件文件替换新项目中需要使用但报警告的拓展组件。

升级编译模式后自定义组件开发注意.png

编译模式切换后引发的拓展组件警告.png

2. 编译模式切换（新老框架切换）

在 manifest.json 的可可视化界面（或源码视图）里配置是否启用新编译器（自定义组件模式），目前除了h5各种都可配置是否启用自定义组件模式。

image.png

若manifest.json配置文件中，未明确指定编译模式（即未配置%platform% -> usingComponents），则uni-app默认策略如下：

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

备注：切换编译环境之后，请重新运行项目

3. 编译模式介绍

3.1 uni-app 自 1.8版本开始，同时支持两种编译模式：

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

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

(1) 自定义组件模式和模板模式都不支持的 vue 语法：

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

备注：自定义组件模式的组件性能更高，支持更多的Vue语法

(2) template模板模式除了不支持如上Vue语法外，额外还不支持如下语法：

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