Skip to content

Instantly share code, notes, and snippets.

@Pines-Cheng
Last active October 12, 2019 09:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pines-Cheng/eef4a40dfaa6ba82aec4d2df5456fbaa to your computer and use it in GitHub Desktop.
Save Pines-Cheng/eef4a40dfaa6ba82aec4d2df5456fbaa to your computer and use it in GitHub Desktop.
Taro 5分钟视频讲稿

正常人说话的语速一般是 150 个字每分钟

Taro 介绍 (3页PPT)

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(包括 微信_百度_支付宝_字节跳动_QQ小程序、H5、React-Native 、快应用)运行的代码,做到「一处代码,多处运行」。

全端 Demo 视频演示

Taro 从 2018 年 6 月开源以来受到社区的广泛关注,现已拥有 2W+ Star,5000+ Commits,200+ 贡献者,推出了 Taro-UI 、Taro 论坛以及 Taro 物料市场等一系列周边及生态。

Hello World(全程演示)

接下来我们将会带领初始化 Taro 项目,并运行起来。

安装 Taro CLI

Taro 项目基于 node,请确保已具备较新的 node 环境(>=8.0.0)。

首先,我们需要使用全局安装 Taro 的命令行工具:@tarojs_cli,你可以使用 npm,yarn,或 cnpm 等方式,这里我们选择 npm 作为示范。运行:npm install -g @tarojs_cli 命令,就会自动安装 Taro 命令行工具及相关以来。

安装成功后,我们在命令行输入 taro -h 就可以看到 Taro CLI 所有的命令、使用方法及描述信息,如:taro init :初始化项目,taro build :构建项目等。

初始化项目

在 Taro CLI 安装成功之后,我们就可以使用命令创建模板项目:taro init myApp。

在初始化项目时,你根据提示可以选择不同的技术栈和模版,这里我们选择 Sass + Redux 进行示例。选择完成之后,Taro CLI 会初始化项目并自动安装相关依赖,这里需要注意的是,有极少数情况下自动安装依赖会失败,这个时候就需要你进入项目手动安装依赖了。

项目初始化成功之后,我们可以看到生成了 myApp 目录,接下来我们进入 myApp 目录,打开工程开始开发。

项目目录结构和配置

打开刚刚初始化的工程之后,你会看到以下的目录及文件:

.
├── config // Taro 相关配置
│   ├── dev.js  // 开发配置
│   ├── index.js  // 默认配置
│   └── prod.js // 生产配置
├── package.json
├── project.config.json // 小程序项目配置,各类小程序平台均有自己的项目配置文件
├── src //源码
│   ├── app.jsx // 入口文件
│   ├── app.scss // 全局样式
│   ├── index.html
│   └── pages // 页面
│       └── index
│           ├── index.jsx
│           └── index.scss
└── yarn.lock
  • config:Taro 相关配置,包括 开发环境配置,默认配置和生产环境配置。(挑 index.js 展开讲解)
  • project.config.json : 小程序项目配置,各类小程序平台均有自己的项目配置文件
  • src: 存放 Taro 的源码,入口文件 app.jsx,全局样式 app.scss,pages 里面存放的是页面代码

跑起来

演示 H5 及微信?

介绍 Taro 生态 (PPT + 演示)

  • Taro UI
  • Taro 社区
  • Taro 物料中心
  • Taro 官网结构介绍及简单实用(搜索)
  • Taro GitHub ?扫码查看示例?提issue?
  • 官方信息渠道:凹凸公众号?Taro 公众号?凹凸掘金?凹凸知乎?等等。
  • 开源项目及其他资料:NervJS/awesome-taro
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment