Cx330

Taro初相识

Taro初相识
2019-09-29 · 2 min read
前端 react taro 小程序

官网

https://taro.aotu.io/

安装

$ yarn global add @tarojs/cli

更新 Taro

$ taro update self

创建项目

$ taro init 项目名称

CLI会让我们做四个选择,现在我们只需要用最简单的方式创建项目,所以我们作出以下选择:

问题 选择
请输入项目介绍! 根据项目需求自己写
是否需要使用 TypeScript ? (Y/n) n
请选择 CSS 预处理器(Sass/Less/Stylus/无)
请选择模板(默认模板/mobx/redux/wxcloud/wxplugin) 默认模板

创建成功后等终端出现一下字样即为创建成功。

创建项目 todoList 成功!
请进入项目目录 todoList 开始工作吧!😝

创建流程

更新

  • 更新 taro-cli 工具:
# taro
$ taro update self

# npm 
npm i -g @tarojs/cli@latest 

# yarn 
yarn global add @tarojs/cli@latest
  • 更新项目中 Taro 相关的依赖
taro update project

文件目录

文件目录
  • config - 配置文件
  • src - 资源文件

编译和打包

  • 微信小程序编译预览及打包
# npm script

$ npm run dev:weapp

$ npm run build:weapp

# 仅限全局安装

$ taro build --type weapp --watch

$ taro build --type weapp
  • 百度小程序
# npm script

$ npm run dev:swan
$ npm run build:swan

# 仅限全局安装

$ taro build --type swan --watch
$ taro build --type swan
  • 支付宝小程序
# npm script

$ npm run dev:alipay
$ npm run build:alipay

# 仅限全局安装

$ taro build --type alipay --watch
$ taro build --type alipay
  • H5
# npm script

$ npm run dev:h5

# 仅限全局安装

$ taro build --type h5 --watch
  • React Native
# npm script

$ npm run dev:rn

# 仅限全局安装

$ taro build --type rn --watch