当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

Taro

开放式跨端跨框架解决方案
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 国产
投 递 者 龚铭
操作系统 跨平台
开源组织 京东
适用人群 未知
 软件概览

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

Taro['tɑ:roʊ],泰罗·奥特曼,宇宙警备队总教官,实力最强的奥特曼。

Taro 是什么?

Taro 是由京东 - 凹凸实验室打造的一套开放式跨端跨框架解决方案

Taro 支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5 等应用。

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

Taro 特性

框架支持

React/Nerv 支持

在 Taro 3 中可以使用完整的 React/Nerv 开发体验,具体请参考基础教程——React

代码示例

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World!'
  }
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  render () {
    return (
      <View className='index'>
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

Vue 支持

在 Taro 3 中可以使用完整的 Vue 开发体验,具体请参考基础教程——Vue

代码示例

<template>
  <view class="index">
    <text>{{msg}}</text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created () {},
  onShow () {},
  onHide () {}
}
</script>

多端转换支持

Taro 方案的初心就是为了打造一个多端开发的解决方案。

目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端

学习资源

5 分钟上手 Taro 开发

awesome-taro

掘金小册:Taro 多端开发实现原理与实战

社区共享

Taro 交流社区——让每一次交流都被沉淀

Taro 物料市场——让每一个轮子产生价值

使用案例

Taro 已经投入了我们的生产环境中使用,业界也在广泛地使用 Taro 开发多端应用。

征集更多优秀案例

加入共建

加入 Taro 社区共建倡议

Taro 邀你加入社区共建

为 Taro 贡献代码

Taro 非常欢迎社区开发者为 Taro 贡献代码,在贡献之前请先阅读贡献指南

如果你想为 Taro 实现一个重要功能,需要先撰写 RFC 文档,按照 Taro 的RFC 机制进行操作,在经过社区讨论完善后才可以进行代码的提交。

问题反馈与建议

给 Taro 提 ISSUE

强烈推荐阅读 《提问的智慧》《如何向开源社区提问题》 和 《如何有效地报告 Bug》《如何向开源项目提交无法解答的问题》,更好的问题更容易获得帮助。

特别鸣谢

nanjingboy jsNewbee
nanjingboy jsNewbee Qiyu8 Garfield Lee

贡献者们

开发计划

Milestones

更新日志

本项目遵从 Angular Style Commit Message Conventions,更新日志请查阅 Release

开发交流

官方交流微信群

License

MIT License

Copyright (c) O2Team

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

官网:http://taro.jd.com

  • 为啥使用Taro  个人又比较喜欢 React,Taro 的社区活跃度和版本迭代速度可喜,所以毫无意外选择了 Taro。 Taro 起步 所以闲话少叙,我们说回 Taro…… Taro 的开发体个人又比较喜欢 React,Taro 的社区活跃度和版本迭代速度可喜,所以毫无意外选择了 Taro。你有过 React 的开发经验,可以毫无困难地顺滑上手;如果没有,直接看 Taro 的 官方文档 来入门也

  • taro框架的简介和开篇介绍 taro是由京东凹凸实验室推出的框架,目的是为了解决多段混乱的局面,也是当下比较新兴的一个框架。 当我们按照一种模式一种代码进行开发,开发完成之后,项目就有了再任何终端显示的能力,这是一种想想都很爽的体验。那么taro具有哪些优点,请看下面的图片。 ![image.png](https://img-blog.csdnimg.cn/img_convert/0f873a0

  • Taro的安装脚手架 1.安装-----yarn global add @tarojs/cli ------------npm install -g @tarojs/cli 2…安装完成后,使用脚手架创建项目: taro init 文件名 创建项目 3.运行: 浏览器:yarn dev:h5 微信小程序: yarn dev:weapp — 引入dist 百度: yarn dev:swan 支付宝小

 相关资料
  • 主要内容:1.@CrossOrigin,2.网关整合,3.Httpclient因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。 1.@CrossOrigin 在控制层加入允许跨域的注解,即可完成一个项目中前后端口跨域的问题 2.网关整合 作为Spring Cloud生态系统中的网关,目标是替代,其 不仅提供统

  • 主要内容:1.@CrossOrigin,2.网关整合,3.Httpclient因为浏览器的同源政策,就会产生跨域。比如说发送的异步请求是不同的两个源,就比如是不同的的两个端口或者不同的两个协议或者不同的域名。由于浏览器为了安全考虑,就会产生一个同源政策,不是同一个地方出来的是不允许进行交互的。 1.@CrossOrigin 在控制层加入允许跨域的注解,即可完成一个项目中前后端口跨域的问题 2.网关整合 作为Spring Cloud生态系统中的网关,目标是替代,其 不仅提供统

  • 本文向大家介绍ThinkPHP框架实现session跨域问题的解决方法,包括了ThinkPHP框架实现session跨域问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 ThinkPHP的session跨域问题很多开发者都遇到过! 其实不管是ThinkPHP还是php本身,在解决session跨域问题的时候都需要设置session.cookie_domain。 在ThinkPHP里,需要修改

  • 本文向大家介绍vue跨域解决方法,包括了vue跨域解决方法的使用技巧和注意事项,需要的朋友参考一下 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。 要想本地正常的调试,解

  • 本文向大家介绍JavaScript跨平台的开源框架NativeScript,包括了JavaScript跨平台的开源框架NativeScript的使用技巧和注意事项,需要的朋友参考一下 NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS、Android和Windows Phone。且NativeScript的使用没有过多繁杂的要求,只需使用自己已

  • 本文向大家介绍主框架如何与iframe通信?如何解决跨域?相关面试题,主要包含被问及主框架如何与iframe通信?如何解决跨域?时的应答技巧和注意事项,需要的朋友参考一下 1.主域相同,子域不同,可以设置在两个页面都设置document.domain = ‘xxx.com’然后,两个文档就可以进行交互。 2.主域和子域都不同,则可以使用CDM(cross document messaging)进行

  • 本文向大家介绍Java服务器端跨域问题解决方案,包括了Java服务器端跨域问题解决方案的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了java服务器端跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现在很多开发的 API 都支持 ajax 直接请求,这样就会导致跨域的问题,解决跨域的问题一方面可以从前端,另一方面就是服

  • 本文向大家介绍js跨域请求的5中解决方式,包括了js跨域请求的5中解决方式的使用技巧和注意事项,需要的朋友参考一下 跨域请求数据解决方案主要有如下解决方法: 分开说明: 一、JSONP: 直观的理解: 就是在客户端动态注册一个函数 function a(data),然后将函数名传到服务器,服务器返回一个a({/*json*/})到客户端运行,这样就调用客户端的 function a(data),从