当你使用Taro时,你需要了解的一些事儿

使用,taro,需要,了解,一些,事儿 · 浏览次数 : 81

小编点评

**Taro 架构简介** Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/ 字节跳动/QQ/飞书/FinClip 小程序/H5/RN等应用。 **架构主要分为:** * **逻辑层:**主要负责 JS 运行,视图层主要负责页面的渲染。 * **编译时:**将 Taro 代码通过 Babel 转换成小程序的代码。 * **运行时:**进行一些生命周期、事件、data 等部分的处理和对接。 **架构特点:** * 重编译时,轻运行时。 * 支持多端支持度:移动端、H5、微信小程序、百度小程序、支付宝小程序、抖音小程序。 * API 补全。 * TypeScript 支持。

正文

2017 年 1 月 9 日凌晨,万众期待的微信小程序正式上线,前有跳一跳等爆圈小游戏的带动,后有特殊时期下各类健康码小程序的加持,小程序成为了国内技术圈独树一帜的存在。但随着小程序的迅猛发展,其实在小程序发展的过程中,关于小程序的架构就层出不穷,小程序架构的后面也会绑定一个专属 DSL,如类 React 或者类 Vue。

这其中,又有一个受到广大开发者认可和开源的框架,不用过多的介绍,可能大部分都知道这个就是 Taro 。

关于 Taro

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

现如今市面上端的形态多种多样,Web、React Native、微信小程序等各种端大行其道。当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

在非常强调效率的时代下,Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台,就可以大大的避免在多个平台重复的进行开发。

如果再回溯的更深一些,我们可以引用京东官方的说法:

团队人力资源捉襟见肘,与此同时,以上的业务都或多或少存在多端的需求,比如 微信小程序、H5、React Native (京东的主流 APP 基本都内置了 React Native 渲染引擎),而且可以预见的是,以后很有可能需要适配更多的小程序平台,而每个端开发一套代码又不现实,会导致:研发成本上升,代码维护困难。

当时我们团队自研了一款 类 React 框架:Nervjs, 整个团队的技术栈因此全部转向了 React ,而当时市面上又没有一款遵循 React 语法的小程序框架,因此,我们开发了 Taro,希望能够使用 React 语法写小程序的同时,通过「Write once Run anywhere」来实现跨端的。

Taro 的架构

小程序的架构都很清楚了,主要分为逻辑层是视图层两部分,逻辑层主要负责 JS 运行,视图层主要负责页面的渲染,它们之间主要通过 Event 和 Data 进行通信,同时通过 JSBridge 调用原生的 API。

再来看看 Taro 的架构,Taro 当前的架构主要分为:编译时 和 运行时。其中编译时主要是将 Taro 代码通过 Babel 转换成 小程序的代码,如:JS、WXML、WXSS、JSON。运行时主要是进行一些:生命周期、事件、data 等部分的处理和对接。

归纳起来,整个 Taro 架构有三大特点:

  • 重编译时,轻运行时,这从代码行数的对比就可见一斑。
  • 编译后代码与 React 无关,Taro 只是在开发时遵循了 React 的语法。
  • 直接使用 Babel 进行编译,这也导致当前 Taro 在工程化和插件方面的羸弱。

与其他框架的横向对比

在这里也不说哪个框架绝对的好用,由于本篇文章是专门针对 Taro 的介绍,所以我们就以官方的一些能力对比为参照进行分析。

直接先放一张总体能力的对比图:

关于开发的支持

在语法支持方面,mpvueuni-appTaro 、WePY 均支持 TypeScript,四者也都能通过 typing 实现编辑器自动补全。除了 API 补全之外,得益于 TypeScript 对于 JSX 的良好支持,Taro 也能对组件进行自动补全。但在工具的支持上 uni-app 还是有较为明显的优势。

多端支持度

只从支持端的数量来看,Taro 和 uni-app 以六端略微领先(移动端、H5、微信小程序、百度小程序、支付宝小程序、抖音小程序),chameleon 少了抖音小程序紧随其后。

但值得一提的是 chameleon 有一套自研多态协议,编写多端代码的体验会好许多,可以说是一个能戳到多端开发痛点的功能。

Taro 的价值

为什么会说到这个呢?因为大部分的开发者只会讲 Taro 用到小程序相关的开发当中,但其实我们还能将 Taro 开发的小程序放到自己的App中,充当或者代替原生/H5的部分,但要实现这一部分需要搭配借助小程序容器进行实现。

这样一来可以除了可以将小程序上架到微信、支付宝等开放平台之外,还能在一次开发的前提下,将 Taro 支持的 FinClip 小程序上架到自己的 App 中。

与当你使用Taro时,你需要了解的一些事儿相似的内容:

当你使用Taro时,你需要了解的一些事儿

2017 年 1 月 9 日凌晨,万众期待的微信小程序正式上线,前有跳一跳等爆圈小游戏的带动,后有特殊时期下各类健康码小程序的加持,小程序成为了国内技术圈独树一帜的存在。但随着小程序的迅猛发展,其实在小程序发展的过程中,关于小程序的架构就层出不穷,小程序架构的后面也会绑定一个专属 DSL,如类 React 或者类 Vue。

.NET App 与Windows系统媒体控制(SMTC)交互

当你使用Edge等浏览器或系统软件播放媒体时,Windows控制中心就会出现相应的媒体信息以及控制播放的功能,如图。 SMTC (SystemMediaTransportControls) 是一个Windows App SDK (旧为UWP) 中提供的一个API,用于与系统媒体交互。接入SMTC的好

JUC中的AQS底层详细超详解

摘要:当你使用java实现一个线程同步的对象时,一定会包含一个问题:你该如何保证多个线程访问该对象时,正确地进行阻塞等待,正确地被唤醒? 本文分享自华为云社区《JUC中的AQS底层详细超详解,剖析AQS设计中所需要考虑的各种问题!》,作者: breakDawn 。 java中AQS究竟是做什么的?

如何借助Kafka持久化存储K8S事件数据?

大家应该对 Kubernetes Events 并不陌生,特别是当你使用 kubectl describe 命令或 Event API 资源来了解集群中的故障时。 ``` $ kubectl get events 15m Warning FailedCreate replicaset/ml-pipe

使用Ref还是Reactive?

我喜欢Vue 3的Composition API,它提供了两种方法来为Vue组件添加响应式状态:ref和reactive。当你使用ref时到处使用.value是很麻烦的,但当你用reactive创建的响应式对象进行重构时,也很容易丢失响应性。 在这篇文章中,我将阐释你如何来选择reactive以及r

[转帖]Elasticsearch 的 30 个调优最佳实践!

Elasticsearch 的 30 个调优最佳实践! https://zhuanlan.zhihu.com/p/406264041 ES 发布时带有的默认值,可为 es 的开箱即用带来很好的体验。全文搜索、高亮、聚合、索引文档 等功能无需用户修改即可使用,当你更清楚的知道你想如何使用 es 后,你

C# 使用模式匹配的好处,因为好用所以推荐~

类型检查和转换:当你需要检查对象是否为特定类型,并且希望在同一时间内将其转换为那个类型时,模式匹配提供了一种更简洁的方式来完成这一任务,避免了使用传统的as和is操作符后还需要进行额外的null检查。 复杂条件逻辑:在处理复杂的条件逻辑时,特别是涉及到多个条件和类型的情况下,使用模式匹配可以使代码更

Git Cherry-pick使用

## 概述 无论项目大小,当你和一群程序员一起工作时,处理多个 Git 分支之间的变更都会变得很困难。有时,与其把整个 Git 分支合并到另一个分支,不如选择并移动几个特定的提交。这个过程被称为 "挑拣", 即 Cherry-pick。 本文将介绍 "Cherry-pick" 的内容、原因和方法。

当你对 redis 说你中意的女孩是 Mia

众所周知,Redis = Remote Dictionary Server,即远程字典服务,是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库,并提供多种语言的API,今天就来redis从缓存原理到删除key键的那些事。

手把手带你使用JWT实现单点登录

JWT(英文全名:JSON Web Token)是目前最流行的跨域身份验证解决方案之一,今天我们一起来揭开它神秘的面纱! 一、故事起源 说起 JWT,我们先来谈一谈基于传统session认证的方案以及瓶颈。 传统session交互流程,如下图: 当浏览器向服务器发送登录请求时,验证通过之后,会将用户