快速开始

Taro快速开始

Taro项目基于node，请确保已具备较新的node环境（>=8.0.0），推荐使用node版本管理工具nvm来管理node，这样不仅可以很方便地切换node版本，而且全局安装时候也不用加sudo了。首先，你需要使用npm或者yarn全局安装@tarojs/cli，或者直接使用npx:

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

值得一提的是，如果安装过程出现sass相关的安装错误，请在安装mirror-config-china后重试。

$ npm install -g mirror-config-china

项目初始化

使用命令创建模板项目

$ taro init myApp

npm 5.2+也可在不全局安装的情况下使用npx创建模板项目

$ npx @tarojs/cli init myApp

在创建完项目之后，Taro会默认开始安装项目所需要的依赖，安装使用的工具按照yarn>cnpm>npm顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装：

# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install

进入项目目录开始开发，目前已经支持微信/百度/支付宝/字节跳动/QQ/京东小程序、H5、快应用以及ReactNative等端的代码转换，针对不同端的启动以及预览、打包方式并不一致。

运行

Taro需要运行不同的命令，将Taro代码编译成不同端的代码，然后在对应的开发工具中查看效果。

在使用Taro进行多端开发中，请确保Taro CLI的版本与你项目的依赖版本一致，否则可能会出现编译错误或者运行时错误。

微信小程序

选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。微信小程序编译预览及打包（去掉 –watch将不会监听文件修改，并会对代码进行压缩打包）

# yarn

$ yarn dev:weapp
$ yarn build:weapp

# npm script

$ npm run dev:weapp
$ npm run build:weapp

# 仅限全局安装

$ taro build --type weapp --watch
$ taro build --type weapp

# npx 用户也可以使用

$ npx taro build --type weapp --watch
$ npx taro build --type weapp

路由功能

在Taro中，路由功能是默认自带的，不需要开发者进行额外的路由配置。我们只需要在入口文件的config配置中指定好pages，然后就可以在代码中通过Taro提供的API来跳转到目的页面，例如：

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: "/pages/page/path/name"
});

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: "/pages/page/path/name"
});

路由传参

我们可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: "/pages/page/path/name?id=2&type=test"
});

这样的话，在跳转成功的目标页的生命周期方法里就能通过 this.$router.params 获取到传入的参数，例如上述跳转，在目标页的 componentWillMount 生命周期里获取入参

class C extends Taro.Component {
  componentWillMount() {
    console.log(this.$router.params); // 输出 { id: 2, type: 'test' }
  }
}

最近更新于0001-01-01