Taro多端统一开发解决方案

news2024/9/25 0:36:14

Taro 文档

Taro | 多端统一开发解决方案

Taro是什么?

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

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

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

多端支持哪些?

一处代码,多处运行

  • 微信小程序
  • 京东小程序
  • H5
  • 百度小程序
  • 支付宝小程序
  • 快应用
  • ReactNative
  • 字节跳动小程序
  • QQ 轻应用

Taro UI

一款基于 Taro 框架开发的多端 UI 组件库

特性

  • 基于 Taro 开发 UI 组件
  • 一套组件可以在 微信小程序支付宝小程序百度小程序H5ReactNative 多端适配运行
  • 提供友好的 API,可灵活的使用组件

Awesome Taro

多端统一开发框架 Taro 优秀学习资源汇总 : https://awesome.re

官方资源

  • Taro 项目仓库
  • Taro 官方文档
  • Taro UI 项目仓库
  • Taro UI 官方文档
  • 微信小程序官方文档
  • 百度智能小程序官方文档
  • 支付宝小程序官方文档
  • 字节跳动小程序官方文档
  • 京东小程序官方文档
  • QQ 小程序官方文档

生态资源

  • Taro UI
  • Taro UI Vue3
  • Taro UI Vue
  • Taroify UI
  • 更多

文章教程

  • 官方博客
  • 不敢阅读 npm 包源码?带你揭秘 taro init 背后的哲学
  • 从 0 到 1 构建适配不同端(微信小程序、H5、React-Native 等)的 taro + dva 应用
  • 【小程序 taro 最佳实践】http 请求封装(方便使用,增加 token,统一错误日志记录和上报)
  • 【小程序 taro 最佳实践】异步 action 优雅实践(简化流程)
  • 使用 Taro 框架开发小程序
  • Taro 下利用 Decorator 快速实现小程序分享
  • 微信小程序授权登陆方案以及在 Taro 下利用 Decorator 修饰器实现
  • 试用 React 语法的多端框架 Taro 问题汇总
  • Taro 在京东购物小程序上的实践
  • Taro 实践 - TOPLIFE 小程序 开发体验
  • Taro 技术揭秘:taro-cli
  • 为何我们要用 React 来写小程序 - Taro 诞生记
  • GitLab-CI 微信小程序进行持续集成和持续部署
  • 使用 Taro 和 Typescript 进行小程序开发
  • 微信小程序及 h5,基于 taro,zoro 最佳实践探索
  • 手把手教你用 Taro 框架写一个图像处理类微信小程序
  • Taro 多端开发的正确姿势:打造三端统一的网易严选(小程序、H5、React Native)
  • Taro 与 Redux 结合使用教程
  • 微信小程序开发之影分身术
  • Taro 3.x 跨版本升级踩坑指南(将 Taro 3.0.14 跨版本升级到 Taro 3.5.3 项目实战)

开发技巧

  • 微信小程序 wx.request 对于 JSON 含 \u2028 处理异常
  • Taro 最佳实践
  • 封装 Taro.request(拦截器,url 配置等)
  • 使用 axios 完美代替 Taro.request

示例项目

Taro 3.2

  • Taro App 开发调试工具及使用示例
  • 【58出品】Taro 跨平台 demo,支持 React Native,Weapp,H5
  • 瑞克和莫蒂wiki,支持 React Native,Weapp,H5

Taro 3

  • TodoMVC React 版 (小程序 / H5)
  • TodoMVC Vue 版 (小程序 / H5)
  • Taro 组件库示例 taro-components-sample (默认是 React,Vue 请切到 Vue 分支)
  • 仿知乎小程序 React 版
  • 仿知乎小程序 Vue 版
  • V2ex 小程序(TypeScript) React 版
  • V2ex 小程序(TypeScript)Vue 版
  • 与微信小程序原生融合的示例(React版)
  • 与微信小程序原生融合的示例(Vue版)
  • Taro 示例项目(DVA计数器 | 异步请求 | 腾讯地图): Taro+Dva+Typescript+Immer
  • 💯 nice-router-taro 脚手架项目,DVA+数据驱动页面+数据驱动表单+数据驱动list
  • 抖音一键去水印小程序 (Vue版): Taro + 微信云开发
  • 彗星密码本 (React版): Taro + 微信云开发

Taro 2

  • Taro Redux 示例 taro-redux-sample
  • TodoMVC (小程序/H5/React Native)
  • Taro 组件库示例 taro-components-sample
  • Taro 脚手架(特性: 封装 api、redux 优雅集成、异常日志上报)
  • 仿知乎小程序
  • 仿知乎小程序: Taro + Taro-UI + yapi API
  • V2ex 小程序(TypeScript)
  • 与微信小程序原生融合的示例
  • 记日常小程序 Taro-UI + Rematch + 云开发 + tcb-router
  • 💯 nice-router-taro 脚手架项目,DVA+数据驱动页面+数据驱动表单+数据驱动list
  • 基于Taro2 + 云开发 打造婚礼邀请函小程序

Taro 1

  • Taro 端能力示例 taro-apis-sample
  • Taro 实验性特性项目 taro-todo
  • Taro 整合 Dva 示例
  • taro 结合 zoro 完整方案示例
  • Taro-UI + Rematch 示例
  • Taro+dva+wxParse 多端富文本解析示例
  • Taro+Taro-UI+es6 入门 demo
  • 知识付费小程序(TypeScript)
  • 书店小程序: Taro + Redux + 本地 Mock Server 示例项目
  • Taro 示例项目(内置 计数器 与 异步请求): Taro + Dva + Typescript + Immutable

开源项目

Taro3.2

  • taro-rn-demo
  • Taroify UI

Taro3

  • Taro UI Vue3
  • Taro UI Vue
  • 基于 Taro + Taro-ui + Typescript + redux 开发的网易云音乐小程序
  • 微信小程序每日工作量(vue3 + TS + 云开发)
  • TaroForm可视化表单编辑
  • 自媒体UP主团购小程序NiceUp(React + TS + 云开发)
  • taro-hooks 为Taro而设计的Hooks Library
  • Taro HtmlView 支持将简单的html富文本渲染为Taro组件
  • 让我们一起手拉手小程序, taro+vue3+ts+pinia,社区、问卷、对话

Taro2

  • 💯 Hi头像 自带教程小册
  • 💯 基于 Taro2.0 + dva + Taro-ui + immer 开发的电商小程序
  • 💯 基于 Taro2.0 + TypeScript + 云开发的地图同学录小程序
  • 基于 Taro + Taro-ui + Typescript + redux 开发的网易云音乐小程序
  • 基于 Taro2.0 + dva + Taro-ui + wemark 开发的 markdown 文章博客小程序
  • 基于Taro2 + 云开发 打造婚礼邀请函小程序

Taro1

  • 💯 首个 Taro 多端统一实例 - 网易严选(小程序 + H5 + React Native)
  • 💯 基于 Taro + Dva 构建的时装衣橱(电商实战项目)
  • 💯 基于 Taro + Taro-ui + dva 开发的公益 App
  • 💯 github 上能找到的 taro 适配 Android、iOS、微信小程序、H5 最佳实践项目脚手架
  • Taro 掘金小册源码
  • 基于 taro + dva 开发的音乐播放器小程序
  • Taro + Taro-UI GitHub 小程序客户端 Gitter 源码
  • 基于 Taro + dva + Taro-ui + Typescript 开发的网易云音乐小程序

第三方库和组件

  • f2 图表封装 兼容 H5 和微信小程序(Taro 1.x)
  • echarts 图表封装(Taro 1.x)
  • taro-plugin-canvas - 基于 Taro 的小程序海报组件(Taro 3.x)
  • taro-bdmark - 基于 Taro 的百度小程序 md 解析器(Taro 1.x)
  • Mounted - 一款基于 Taro 的小程序组件库(Taro 1.x)
  • taro-axios - 在 Taro 中使用 axios(Taro 1.x;2.x;3.x)
  • TaroCreator - 基于Taro UI的小程序可视化设计工具(Taro 2.x)
  • taro-luck-draw - 🍧🍧🍧 基于 taro 的【大转盘 / 九宫格】抽奖插件(Taro 3.x)
  • tarojs-router-next - Taro 路由库/自动生成/任意传参/同步的路由方法调用/路由中间件(Taro 3.x)
  • Taroify UI - 使用 Vant 相同的视觉规范的 Taro 组件库(Taro 3.x)
  • taro-hooks 为Taro而设计的Hooks Library(Taro 3.x)
  • taro-visualization Taro 可视化库(charts、3d、Lottie等)(Taro 3.x)
  • taro-svga Taro 使用svga动画库(资源体积更小、更高效、跨平台),支持weapp、h5 、tt、rn(Taro 3.x)
  • taro-code-creator Taro 条形码、二维码生成器,全平台支持(Taro 3.x)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2161911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OpenAI GPT-3 API: What is the difference between davinci and text-davinci-003?

题意:OpenAI GPT-3 API:davinci 和 text-davinci-003 有什么区别 问题背景: Im testing the different models for OpenAI, and I noticed that not all of them are developed or trained enough to give a reliable response. 我正在测试…

论文阅读【时间序列】ModerTCN (ICLR2024)

【时间序列】ModerTCN (ICLR2024) 原文链接:ModernTCN: A Modern Pure Convolution Structure for General Time Series Analysis 代码仓库:ModerTCN 简易版本实现代码可以参考:(2024 ICLR)ModernTCN:A Mod…

谁是AI界的老司机?谁最“纯洁”?谁能通过暧昧小短文的终极考验?

AI的能力已经让人们惊叹不已,不管是帮你写文章、答疑解惑,还是生成艺术作品,几乎无所不能。但如果让AI来解读一篇暗藏玄机、暧昧十足的小短文,结果会怎样?今天,我们就把几款顶流AI大模型拉出来,…

Cobalt Strike的下载与基本用法

CobaltStrike4.8 链接:百度网盘 请输入提取码 提取码:tgf3 what Cobalt Strike是一款渗透测试神器,常被业界人称为CS神器。Cobalt Strike已经不再使用MSF而是作为单独的平台使用,它分为客户端与服务端,服务端是一个&…

C++的扩充和封装

作业: 手动封装一个顺序表(SeqList),分文件编译实现 有私有成员:顺序表数组的起始地址 ptr、 顺序表的总长度:size、顺序表的实际长度:len 成员函数:初始化 init(int n) 判空:em…

Vue:默认插槽

目录 一.性质 1.内容分发 2.无名称标识 3.作用域 4.使用方式 二.使用 1.父组件 2.子组件 三.代码 1.父组件代码 2.子组件代码 四.效果 一.性质 1.内容分发 默认插槽允许组件的使用者定义一些内容,这些内容会被插入到组件模板中的特定位置。这有助于实…

C++:类中的特殊关键字,运算重载符

1.My_string类中重载以下的运算符&#xff1a; 、[] 、>、<、、>、<、&#xff01;、、输入输出(>>、<<) 主函数&#xff1a; #include <iostream> #include "my_string.h"using namespace std;int main() {My_string s1("cat…

QT客户端发送HTTP请求此时服务器到底收到了哪些数据?

一个Http请求包括 请求行 请求头 空行 请求体 下面是示例&#xff1a; 1,2,3,4分别代表上面的四个部分&#xff0c;我只是做了一些解析&#xff0c;具体可以结合代码 1. post / HTTP/1.1 2.GET请求头包括Host(主机名),user-agent&#xff08;客户端标识符&#xff09;&am…

AI Agent智能应用从0到1定制开发Langchain+LLM全流程解决方案与落地实战

大模型微调实战&#xff1a;精通、指令微调、开源大模型微调、对齐与垂直领域应用29套AI全栈大模型项目实战&#xff0c;人工智能视频课程-多模态大模型&#xff0c;微调技术训练营&#xff0c;大模型多场景实战&#xff0c;AI图像处理&#xff0c;AI量化投资&#xff0c;OPenC…

fiddler抓包11_列表显示服务器IP (配置文件)

请求列表默认不显示服务器IP字段&#xff0c;也无法从定制列窗口添加&#xff0c;可以修改CustomRules.js实现。 ① 菜单栏“Rules”&#xff08;规则&#xff09; - “Customize Rules...”&#xff08;自定义规则&#xff09;&#xff0c;打开CustomRules.js文件。 &#xf…

HarmonyOS NEXT:解密从概念到实践的技术创新与应用前景

HarmonyOS是目前华为手机所搭载的鸿蒙系统&#xff0c;它在Open Harmony的基础上兼容了安卓的AOSP&#xff0c;所以可以使用安卓APK应用&#xff0c;HarmonyOS属于华为在当前阶段过渡使用的系统&#xff0c;原生鸿蒙的应用生态尚未发展起来&#xff0c;兼容安卓应用可以让用户有…

【AI大模型】通义大模型API接口实现

目录 一、基础环境安装 &#xff08;一&#xff09;OpenAI Python SDK安装 &#xff08;二&#xff09;DashScope SDK安装 二、OPENAI接口实现 &#xff08;一&#xff09;文本输入 &#xff08;二&#xff09;流式输出 &#xff08;三&#xff09;图像输入 &#xff0…

Python 字符串的常见方法

Python 字符串的常见方法 字符串是 Python 中非常重要的数据类型之一。在日常编程中&#xff0c;我们经常需要对字符串进行各种操作&#xff0c;比如分割、连接、替换等。Python 提供了丰富的字符串方法&#xff0c;使得这些操作变得简单而高效。本文将详细介绍一些常见的字符…

【Docker】Docker快速入门

Docker学习笔记 一、Docker概述 为什么会出现Docker? 安卓开发流程&#xff1a;apk(java开发的)发布到应用商店&#xff0c;用户安装apk即可使用。 后端开发流程&#xff1a; jar(java开发的)带上环境发布到Docker仓库&#xff0c;用户从Docker仓库拉取镜像并部署。 总结…

关于Python升级以后脚本不能运行的问题

近日将Python从3.11升级到了3.12&#xff0c;然后把几个包例如numpy等也通过pip给upgrade了一下&#xff0c;结果原来运行的好好的脚本&#xff0c;都运行不了了&#xff0c;还出现各种报错。怀疑是自己升级了环境导致的&#xff0c;因此通过搜索引擎检索了一下&#xff0c;有这…

【React】(推荐项目)使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024)

使用 React、Socket.io、Nodejs、Redux-Toolkit、MongoDB 构建聊天应用程序 (2024) 学习使用 React、Socket.io、Node.js、Redux-Toolkit 和 MongoDB 构建响应式实时消息聊天应用程序。这个项目涵盖了从设置到实施的所有内容&#xff0c;提供了宝贵的见解和实用技能。无论您是…

地平线占用预测 FlashOcc 参考算法-V1.0

1.简介 3D Occupancy Networks 的基本思路是将三维空间划分成体素网格&#xff0c;并对每个网格进行各类感知任务的预测。目前以网格为中心的方法能够预测每个网格单元的占用率、语义类别、未来运动位移和实例信息。3D occupancy 可以对道路障碍物进行更细粒度的划分&#xff…

【Docker】解决Docker Engine stopped

解决Docker Engine stopped 解决Docker Engine stopped1.检查虚拟设置2 安装wslwindows安装wsl 解决Docker Engine stopped 在安装完docker之后不少用户会遇到Docker Engine stopped。下面就下给出解决方法让docker正常运行起来 1.检查虚拟设置 打开任务管理器查看cpu页面&a…

vue-入门速通

setup是最早的生命周期&#xff0c;在vue2里边的data域可以使用this调用setup里面的数据&#xff0c;但是在setup里边不能使用thisvue项目的可执行文件是index&#xff0c;另外运行前端需要npm run vue的三个模块内需要三个不同的结构&#xff0c;里边放置js代码&#xff0c;注…

LED驱动电路

LED驱动电路简介 摘要&#xff1a; LED照明是今年来快速兴起发展的一种新型光源&#xff0c;它的许多良好特点使得它的应用面越来越广。LED的单向导电特性使人一般认为应该用直流驱动&#xff0c;但是对直流恒压和限流的装置在保证比较好的限流特性时&#xff0c;自身功耗是很…