快速上手

安装 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