项目体积是小程序开发者的一大难题。如果开发者使用TaroReact进行开发,需要引入将近100K的React相关依赖,这使得项目规模更加捉襟见肘。因此,Tarov3.4的主要方向是探索对Preact的支持。Preact是一个超小型的类React框架,提供与React几乎相同的API,它的大小只有5k左右。支持使用PreactTarov3.4已经正式实现了对Preact的支持,下面简单介绍一下适配思路和使用方法。适配思路1.运行时改造Taro在小程序环境中模拟了一个类浏览器的环境,所以理论上任何前端框架都可以在Taro中使用。对于Preact来说,与React最大的不同在于它没有实现一个合成的事件系统,而是直接使用浏览器的事件方法,同时也使用了少量不同于React的DOMAPI。对于事件适配,Taro已经提供了浏览器标准的事件方法,所以你只需要处理Preact事件名和小程序事件名的区别即可。对于DOM方法,需要额外实现Preact使用的DOMAPI。2、兼容React生态Preact使用preact/compat来抹平与React的API差异,让React的各种生态库可以直接运行在Preact上。得益于此,我们在开发时可以使用任何React生态库,甚至React和ReactDOM的API引用都不需要修改,只需简单地配置别名即可://Webpackconfigconstconfig={"resolve":{"alias":{"react":"preact/compat","react-dom/test-utils":"preact/test-utils","react-dom":"preact/compat","react/jsx-runtime":"preact/jsx-runtime"},}}使用介绍文档地址在新建项目运行taroinit时,选择Preact作为框架,创建基于Preact的项目。现有的React项目会将项目中的CLI和Taro相关依赖更新到v3.4.0-beta版本。安装依赖:yarnaddpreact@tarojs/plugin-framework-react修改Taro编译配置:constconfig={//...framework:'preact'}修改Babel配置:module.exports={presets:[['taro',{framework:'preact'}]]}如果项目使用TypeScript,请开启skipLibCheck配置,避免与其他React生态库一起使用时出现类型错误:{..."skipLibCheck":true,}Vue3支持CompositionAPI版本小程序生命周期钩子文档地址Vue3提供了CompositionAPI(组合API)特性。与传统的OptionsAPI不同,CompositionAPI提供了一种新的编码方式,可以让我们更好地组织和重用代码逻辑。过去,Taro仅在OptionsAPI版本中提供了小程序生命周期钩子。开发人员经常对这些挂钩如何与设置函数通信以及如何共享数据感到困惑,并且它们与脚本设置语法的兼容性也不好。因此,Tarov3.4提供了CompositionAPI版本的小程序生命周期钩子,让开发者更方便的使用setup语法,例如:运行时体积优化目前Taro对前端框架的适配层代码放在运行时库@tarojs/runtime中,这意味着开发者在使用React时,仍然会包含Vue2和Vue3的适配层代码。(TreeShaking失败的原因是在@tarojs/runtime中使用了WebpackProviderPlugin导出BOMAPI。)因此,Tarov3.4以Taro插件的形式实现了对各个前端框架的适配。好处之一就是将上面的运行时适配层的代码拆分成了一个个的插件。加上运行时代码的优化,3.4版本的运行时减少了约30k的空间。另一个好处是,开发者现在可以编写Taro插件来支持任何前端框架,而无需更改Taro的核心代码。升级指南1、安装v3.4.0-betaCLI工具:npmi-g@tarojs/cli@beta2、更新项目依赖如果安装失败或项目打开失败,可以删除node_modules、yarn.lock、package-lock.json重新安装依赖项并重试。修改package.json文件中Taro相关依赖的版本为~3.4.0-beta.0,然后重新安装依赖。3.【重大改动】安装相应的框架适配插件因为Tarov3.4将各个前端框架的适配逻辑拆分成了相应的插件,所以升级老项目时,需要安装相应的框架适配插件:使用React,请安装@tarojs/plugin-framework-react使用Vue2,请安装@tarojs/plugin-framework-vue2使用Vue3,请安装@tarojs/plugin-framework-vue3其他BreakingChanges百度小程序使用onInit而不是onLoad生命周期,以优化首次启动时间。最后,太郎会重点升级编译系统(比如升级Webpack5)和优化H5能力(比如输出SSR方案、优化路由系统等)。HarmonyApp&&OpenHarmonyTaro迭代的另一主线是HarmonyApp&&OpenHarmony的适配。Taro和OpenHarmony团队成立了跨平台UI兴趣小组(SIG-CROSS-PLATFORM-UI),与社区一起进行适配。目前,一期开发工作即将完成,首个可用体验版将于12月初发布。相关咨询:鸿蒙&&OpenHarmony适配团队适配进展鸿蒙&OpenHarmony交流群:欢迎关注傲兔实验室博客:aotu.io或关注傲兔实验室公众号(傲兔实验室),不定期发文。
