快速上手

安装 Taro

安装 Taro 开发工具 @tarojs/cli，Taro 版本需要在 1.0.0-beta.18 以上

使用 npm 或者 yarn 全局安装，或者直接使用 @maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b">npx

1. $ npm install -g @tarojs/cli
2. $ yarn global add @tarojs/cli

初始化项目

使用命令创建模板项目

1. $ taro init myApp

安装 Taro UI

1. $ cd myApp
2. $ npm install taro-ui

使用

在代码中 import 需要的组件并按照文档说明使用

1. import { AtButton } from 'taro-ui'

示例

在 /myApp/src/pages/index/index.jsx 文件添加以下代码

1. import Taro, { Component, Config } from '@tarojs/taro'
2. import { View } from '@tarojs/components'
3. import { AtButton } from 'taro-ui'
4. import './index.scss'

6. export default class Index extends Component {
7. config: Config = {
8. navigationBarTitleText: '首页'
9. }
10. render () {
11. return (
12. <View className='index'>
13. <AtButton type='primary'>按钮文案</AtButton>
14. </View>
15. )
16. }
17. }

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 h5 预览模式，若使用微信小程序预览模式，则需要自行下载并打开微信开发者工具，选择预览项目根目录。

微信小程序编译预览模式

1. # npm script
2. $ npm run dev:weapp
3. # 仅限全局安装
4. $ taro build --type weapp --watch
5. # npx用户也可以使用
6. $ npx taro build --type weapp --watch

H5 编译预览模式

1. # npm script
2. $ npm run dev:h5
3. # 仅限全局安装
4. $ taro build --type h5 --watch
5. # npx用户也可以使用
6. $ npx taro build --type h5 --watch