Taro

【Taro】初识Taro

Posted by ARTROY on 2019-05-18

Taro 一套遵循 React 语法规范的 多端统一开发 框架。
使用 Taro，只要书写一套代码，再通过Taro编译工具，将源代码分别编译出可以再不同端（微信小程序、H5、React Native等）运行的代码。

认识 Taro 及使用

安装

  • 安装 Taro 开发工具

    1
    2
    npm install -g @tarojs/cli        // 使用 npm 安装
    yarn global add @tarojs/cli       // 使用 yarn 安装

  • 安装完毕，测试一下是否安装成功：taro -V

使用

  • 使用命令行创建模板项目：taro init myApp

命令行上会提示 Taro 即将创建一个新项目，接着 Taro 会提示你输入项目介绍，我们这里输入 我的第一个 Taro 项目；而后让你选择是否使用 TypeScript，输入 n ; 接着提供 CSS 预处理器选择，有 Sass、Less、Seyless，笔者选择了 Sass；然后是选择模板，选择默认模版，完成后，Taro 开始创建项目，自动安装依赖，这里可能需要等待一会。

预览及编译

选择微信(支付宝、百度)小程序模式，需要自行下载并打开微信(支付宝、百度)开发者工具，然后在项目编译完后选择项目根目录下 dist 目录进行预览。

开发期启动命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// npm script
npm run dev:h5        // H5、WEB
npm run dev:weapp     // 微信小程序
npm run dev:alipay    // 支付宝小程序
npm run dev:swan      // 百度小程序
npm run dev:rn        // ReactNative

// 仅限全局安装
taro build --type h5 --watch      // h5|weapp|alipay|swan|rn
taro build --type h5

// npx 用户也可以使用
npx taro build --type h5 --watch  // h5|weapp|alipay|swan|rn
npx taro build --type h5

编译器启动命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// npm script
npm run build:h5        // H5、WEB
npm run build:weapp     // 微信小程序
npm run build:alipay    // 支付宝小程序
npm run build:swan      // 百度小程序
npm run build:rn        // ReactNative

// 仅限全局安装
taro build --type h5 --watch        // h5|weapp|alipay|swan|rn
taro build --type h5

// npx 用户也可以使用
npx taro build --type h5 --watch    // h5|weapp|alipay|swan|rn
npx taro build --type h5

更新 Taro

Taro 提供了更新命令来更新 CLI 工具自身和项目中 Taro 相关的依赖。
更新 taro-cli 工具：

1
2
3
4
5
6
// taro
$ taro update self
// npm 
npm i -g @tarojs/cli@latest 
// yarn 
yarn global add @tarojs/cli@latest

更新项目中 Taro 相关的依赖，这个需要在你的项目下执行: taro update project


赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
Taro
参与社区
-->