美文网首页
多端统一开发框架 Taro 的安装与使用

多端统一开发框架 Taro 的安装与使用

作者: mindy1031 | 来源:发表于2019-05-14 14:49 被阅读0次

如果你是使用 NPM 安装,使用如下命令:

$ npm install -g @tarojs/cli

如果你是使用 Yarn 安装,使用如下命令:

$ yarn global add @tarojs/cli

安装完毕,测试一下是否安装成功:


image.png

如你所见,版本号打印出来,说明已经安装好了。

使用命令创建模板项目:

$ taro init myApp

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

$ npx @tarojs/cli init myApp

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

image.png

看到提示 请进入项目目录 myApp 开始工作吧 后,进入项目目录开始开发,目前 Taro 已经支持微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换,针对不同端的启动以及预览、打包方式并不一致。

微信小程序

选择微信小程序模式,需要自行下载并打开微信开发者工具,然后选择项目根目录进行预览。具体安装的方法和使用请参考第 3 章《微信小程序开发入门与技术选型》里的 「微信小程序开发入门」。

微信小程序编译预览及打包:

# 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

百度小程序

选择百度小程序模式,需要自行下载并打开百度开发者工具,然后在项目编译完后选择项目根目录下 dist 目录进行预览。

百度小程序编译预览及打包:

# npm script
$ npm run dev:swan
$ npm run build:swan
# 仅限全局安装
$ taro build --type swan --watch
$ taro build --type swan
# npx 用户也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

支付宝小程序

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

支付宝小程序编译预览及打包:

# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 仅限全局安装
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用户也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

H5

H5 模式,无需特定的开发者工具,在执行完下述命令之后即可通过浏览器进行预览。

H5 编译预览及打包:

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch

React Native

React Native 端运行需执行如下命令,React Native 端相关的运行说明请参见 React Native 教程

# npm script
$ npm run dev:rn
# 仅限全局安装
$ taro build --type rn --watch
# npx 用户也可以使用
$ npx taro build --type rn --watch

更新 Taro

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

更新 taro-cli 工具:

# taro
$ taro update self
# npm 
npm i -g @tarojs/cli@latest 
# yarn 
yarn global add @tarojs/cli@latest

更新项目中 Taro 相关的依赖,这个需要在你的项目下执行。

$ taro update project

相关文章

  • 常用开发网站

    ➤ ➤首个 Taro 多端统一实例 - 网易严选 ➤React Native 优秀开源项目大全 ➤多端统一开发框架...

  • Taro:taro框架开发小程序

    前言:taro是一个可以很好实现一次开发,多端统一的框架,本文只介绍它小程序端开发的一些内容。 使用taro框架需...

  • 搭建taro-demo

    taro是由凹凸实验室发布一套遵循 React 语法规范的多端统一开发框架 1. 安装taro $ npm ins...

  • Taro学习笔记简记(一)

    Taro简介 Tora是由京东凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。 使用Taro,我...

  • 多端统一开发框架 Taro 的安装与使用

    如果你是使用 NPM 安装,使用如下命令: 如果你是使用 Yarn 安装,使用如下命令: 安装完毕,测试一下是否安...

  • 多端统一开发-Taro的安装与使用

    Taro Taro是一套遵循React语法规则的多端开发解决方案。目前市面上已经有各式各样的小程序、h5和安卓、i...

  • 前端技术汇总

    1、三大MVVVM框架Vue、React、Angular2、多端统一开发解决方案Taro、uni-app、mpvu...

  • Taro入坑(一)

    前沿 taro 是由京东·凹凸实验室(aotu.io)倾力打造的一款多端统一开发框架,支持用 React 的开发方...

  • Taro小程序采坑记

    Taro,京东凹凸实验室出品的适配多端的一个框架,Taro 是一套遵循 React 语法规范的 多端开发 解决方案...

  • Taro + Dva 开发小程序(前奏篇)

    一、什么是Taro? 1、Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 2、使用 Taro,...

网友评论

      本文标题:多端统一开发框架 Taro 的安装与使用

      本文链接:https://www.haomeiwen.com/subject/eamsaqtx.html