Skip to main content

10 posts tagged with "v3"

View All Tags

Taro 正式发布 3.3 版本:支持使用 H5 标签与框架 DevTools

距离 Taro 3.3 第一个 alpha 版本的发布,已过去三个月的时间。期间我们不断地对 3.3 版本进行打磨,除了优化 H5 同构方案外,还引入了一些提升开发体验的新特性和修复了若干重要问题。

支持使用 H5 标签#

Taro 3.3 最重要的特性就是支持使用 H5 标签进行开发,让开发者在小程序环境中复用部分的 Web 生态。

例如在 React 中可以这样使用:

function Index () {
return (
<div>Hello World!</div>
)
}

相关背景及实现思路在 《Taro 3.3 alpha 发布》 一文中有详细说明。

用法#

首先需要安装插件 @tarojs/plugin-html

$ npm i @tarojs/plugin-html

然后配置使用即可:

// config/index.js
const config = {
// ...
plugins: [
'@tarojs/plugin-html'
]
}

插件的详细用法请见文档

示例项目#

为了验证同构功能的可用性和效果,我们对 CSS 样式库 WEUI、React 组件库 Antd Design Mobile、Vue2 组件库 VantUI 的所有组件进行了测试。结果显示有相当一部分的组件能直接运行在小程序环境中。

示例项目仓库地址:

What's news#

在开发 @tarojs/plugin-html 插件的时候,我们发现需要为 Taro 模拟的 DOM APIs 新增一些方法,如 getBoundingClientRect 等。但是对于不使用这个插件的开发者来说这些 API 是冗余的,会增大包体积。因此我们对 @tarojs/runtime 进行了重构,把 DOM APIs 做成可插拔式,让开发者可以选择在最终的编译结果里只存在哪些 DOM APIs。

本次对运行时的重构也是为了 Taro 3.4 版本作铺垫。React、Vue2 和 Vue3 这些框架运行时需要的 DOM APIs 是不尽相同的,但是目前假设开发者使用了 React,编译结果里仍然会存在着只有 Vue2 或 Vue3 依赖的 DOM APIs。Taro 3.4 将会把对各 Web 开发框架的支持逻辑抽离成为一个个插件,如:@tarojs/plugin-framework-react 等,目的是剔除掉冗余代码。

例如,假设开发者没有使用渲染 HTML 文本的 API(如 React 的 dangerouslySetInnerHTML)。这时可以修改 Taro 编译配置的 mini.runtime.enableInnerHTML 选项,令最终的打包结果剔除掉相关代码:

// config/index.js
config = {
// ...
mini: {
runtime: {
enableInnerHTML: false
}
}
}

小程序支持使用框架的 DevTools#

自 Taro 3.x 改造为运行时框架后,有不少同学抱怨小程序开发者工具的 AppData 面板看到的都是 Taro 虚拟 DOM 的序列化结果,而不是页面的 data 数据。为了缓解这个问题,并进一步地提升开发者的开发体验,Taro 对 React DevTools 和 Vue DevTools 进行了适配。只需要简单地配置,就能够和开发 Web 应用时一样使用框架的 DevTools。

React DevTools#

安装并配置使用 @tarojs/plugin-react-devtools 即可,详细用法请见文档

效果图:

Vue DevTools#

安装并配置使用 @tarojs/plugin-vue-devtools 即可,详细用法请见文档

效果图:

修复百度小程序 flex 布局的问题#

在过去很长一段时间里,Taro 3 在百度小程序里是不支持使用 flex 布局的。原因是逻辑层的每个 Taro DOM 节点都在渲染层使用一个对应的 <template> 进行渲染,而百度小程序会把 <template> 渲染成一个真实节点。

非常感谢 @SyMind 的 PR,帮助 Taro 绕过了此问题。从 Taro 3.2 开始,部分组件在百度小程序中也能够使用 flex 布局。

相关的讨论和提交可以浏览 #6015 #9529

升级指南#

从 v2.x 升级的同学需要先按 迁移指南 进行操作。

从 v3.x 升级的同学,首先需要安装 v3.3 的 CLI 工具:

npm i -g @tarojs/cli

然后手工修改 package.json 文件中 Taro 相关依赖的版本,再重新安装依赖;或者使用 taro update project 更新依赖。

如果安装失败或打开项目失败,可以删除 node_modulesyarn.lockpackage-lock.json 后重新安装依赖再尝试。

The End#

Taro 3.4#

下一个 minor 版本,我们会考虑把对各个 Web 开发框架的支持逻辑拆分为对应的插件。让开发者可以以插件的形式为 Taro 拓展支持一门新的开发框架,我们会运用此能力进行对 PReact 的支持,希望能进一步减少用户的包体积。

鸿蒙应用 && OpenHarmony#

近期我们也一直在探索对鸿蒙应用 && OpenHarmony的适配,目前已有一系列的讨论和开发计划,也有可以运行的 Demo,详情请见 鸿蒙 && OpenHarmony 适配小组

RoadMap:#

欢迎各位开发者参与讨论和共建~

快应用#

此外,社区大佬 @bgfist 正在为 Taro 开发支持快应用的功能。也欢迎各位开发者参与讨论和共建,相关 PR

感恩#

时光飞逝,1 年前 Taro 3 正式发布,Taro 逐渐成为被社区喜欢、信赖的开源项目。未来我们也将继续做好 Taro 的开源工作,同时也希望社区有更多的开发者参与进来,无论是提出 Issues、在论坛发帖、提交 PR 还是帮助建设周边生态等。让我们一起把 Taro 做好,做强。

最后,衷心感谢为 Taro 从 v3.2 走到 v3.3 贡献过代码的各位同学!

Taro 3.3 alpha 发布:用 ant-design 开发小程序?

小程序的设计并没有完全遵循 Web 规范,导致小程序生态和传统 Web 开发生态之间的割裂,海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱,UI 框架选择不多的问题更是深深困扰着开发者。

另一方面,业界有着存量的 H5 应用,中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本,甚至能够直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态,直到 Taro 3.0 诞生后,这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题,以及我们尝试适配了三大移动端 UI 框架 WEUIAnt Design MobileVantUI 的实验结果。

一、实现思路#

Taro 3.0 是一款重运行时的跨端框架,它通过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API,Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差异。

Taro 3.2 版本正式发布:React Native 支持,王者归来

Taro 是一个开放式 跨端跨框架 解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信/京东/百度/支付宝/字节跳动/QQ小程序/H5/React Native 等应用。

自从 Taro 3 发布以来,不少开发者期待 Taro 3 可以支持 React Native。基于 58 团队在 React Native 方向的技术积累,我们与 Taro 团队达成战略合作伙伴关系。由 58 团队主导开发 Taro 3 React Native,共同推进 Taro 的发展。

去年 12 月开始,已经完成了 Taro 3 React Native 的支持,共发布了 9 个 canary 版本与 4 个 beta 版,经过较长时间的验证,如今终于迎来了 3.2 正式版。

Taro 正式发布 3.1 版本

自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。

经历了 12 个 beta 版本后,终于迎来了 3.1 正式版🎉

Taro 助力京喜拼拼项目性能体验优化

背景#

2020 年是社区团购风起云涌的一年,互联网大厂纷纷抓紧一分一秒跑步进场。“京喜拼拼”是京东旗下的社区团购平台,依托京东供应链体系,精选低价好货,为社区用户提供次日达等优质服务。

​京喜拼拼团队技术选型使用 Taro 以便于实现多端需求,因此 Taro 团队有幸参与到 “京喜拼拼” 小程序的性能体验优化工作。

全面体验 - 梳理 Taro 写法最佳实践#

我们全面体验后和熟悉业务代码后梳理出一系列 Taro3 写法的最佳实践:

Taro 3.1 beta 发布: 开放式架构新增 4 端支持

自 7 月初我们正式发布了 Taro 3,至今半年时间已然略去。期间我们不断地修复着问题,同时也在构想着下一个 minor 版本。

面对小程序平台越来越多的大环境,Taro 是选择偏安一隅,只支持部分的主流小程序,还是成为所有小程序平台开发、多端转换的基础设施,我们在 v3.1 给出了答案:开放式架构

一、开放式架构#

背景#

近年来业界推出的小程序平台越来越多,但 Taro 核心维护的平台只有 6 个(微信、支付宝、百度、头条、QQ、京东小程序),因此常常有同学提出能不能支持某某平台的 Feature Request。

基于目前的架构,对于单一平台的兼容性代码分布于 Taro 核心库的各个角落,涉及编译时与运行时等部分。支持一个新的平台需要改动所有的这些地方,开发复杂度高,同时社区也难以参与贡献。

为此我们萌生了打造一个开放式框架的想法。目标是可以通过插件的形式扩展 Taro 的端平台支持能力:

  • 插件开发者无需修改 Taro 核心库代码,即可编写出一个端平台插件。
  • 插件使用者只需安装、配置端平台插件,即可把代码编译到指定平台。
  • 开发者可以继承现有的端平台插件,然后对平台的适配逻辑进行自定义。

增加 React Native 支持的 Taro 3.2.0 版本测试通告

相关资料链接#

  1. 版本内容对应的RFC
  2. 3.2.0 canary 版本分支
  3. 壳工程分支
  4. 最新进展,可关注58开源

新版本特性一览#

  1. 更快的编译速度
    1. 基于全新的编译体系,启动速度提升1倍
  2. 更便捷的开发调试体验
    1. 去掉了 webpack 后,source-map 的支持更加简单,这对于开发体验是一个巨大的提升
  3. 更全面的API和组件
    1. 新增 38 个API
    2. 新增 7 个组件
  4. 更灵活的接入方式
    1. 支持 React Native 0.60 及以上版本,可自行定制,我们也将探索更多版本的支持
    2. API 和组件支持按需加载,未使用的原生依赖,无需安装
    3. 架构完全基于 React Native 生态,相关工具、组件等均可轻松接入
  5. 更稳定的源码
    1. 使用 TypeScript、ESlint、Jest,保证代码质量
    2. 欢迎社区贡献

Taro 版本升级权威指南

Taro 是一款由京东凹凸实验室推出的开放式跨端跨框架解决方案,致力于解决小程序、H5、React Native 的跨端同构问题,支持同时使用 React 和 Vue 来进行开发。本文由 Taro 团队成员隔壁老李撰写,旨在帮助 Taro 开发者厘清当前 Taro 多版本之间关系的那些事儿,同时解答有关 Taro 3、Taro RN 支持以及 Taro UI 的一些困惑。

Taro 3 正式版发布:开放式跨端跨框架解决方案

从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Taro 未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性:

Taro 3.0 RC:React/Vue/Nerv 任你选

在 Taro Next 预览版(Alpha)版本之后,我们没有停下迭代的步伐,经过两个月的开发和数百次提交之后,我们谨慎但坚定地发布 Taro Next 测试(Beta) 版,Beta 版发布后,社区很多开发者使用上了 Taro Next,他们的帮助和赞誉加上我们内部项目使用的良好反馈,Beta 发布一个月之后,我们非常自信地发布了候选版(RC)版本。