taro框架官网(多端统一开发-Taro的安装与使用)

taro框架官网(多端统一开发-Taro的安装与使用)(1)

Taro

Taro是一套遵循React语法规则的多端开发解决方案。目前市面上已经有各式各样的小程序、h5和安卓、ios端,如何解决一次开发,多端运行已经成为开发者目前迫切需要解决的难题。而使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动小程序、H5、React-Native 等)运行的代码。

环境

Taro 是一个基于 NodeJS 的多端统一开发框架,在安装使用 Taro 之前需要确保已安装好 Node 环境。

安装

要使用Taro,需要安装Taro 开发工具 @tarojs/cli。我们可以使用NPM 与或者Yarn的来安装@tarojs/cli。

  • NPM :npm install -g @tarojs/cli
  • Yarn:yarn global add @tarojs/cli
  • 安装完成后,测试一下是否安装成功:taro -V

taro框架官网(多端统一开发-Taro的安装与使用)(2)

  • taro -V
使用

安装完taro开发工具之后,我们可以使用tarojs/cli来进行开发。

使用命令创建模板项目:taro init myApp

运行命令之后命令行会有提示:

  • 首先输入项目介绍:demo
  • 然后选择是否使用TYpeScript:n
  • 选择css预处理选择:这里选择Sass
  • 选择模板:默认模板

完成后,Taro开始创建项目。

运行
  • 微信小程序:

npm run dev:weapp npm run build:weapp

  • 百度小程序:

npm run dev:swan npm run build:swan

  • 支付宝小程序:

npm run dev:alipay npm run build:alipay

  • 头条小程序:

npm run dev:tt npm run build:tt

  • H5

npm run dev:h5 npm run build:h5

  • React Native
  • 运行React Native比较复杂,需要安装相关的软件

使用以上命令运行项目,项目可以在不同端正常启动。

更新

由于Taro还在维护中,因此有时候可能会需要更新。

  • 更新 taro-cli 工具:
  • taro:taro update self
  • npm:npm i -g @tarojs/cli@latest
  • 更新项目中Taro相关的依赖:taro update project
项目文件分析:

模板项目的文件结构如下图:

taro框架官网(多端统一开发-Taro的安装与使用)(3)

项目文件

  • config: 和运行环境有关的配置文件
  • src:我们今后开发的文件大部分都会放在这里面,其中的pages为所有页面存放的位置。pages下每一个文件夹代表一个页面路径。
  • app.js:主文件入口,可以在这里进行一些全局的配置。
  • app.scss:app.js引用的样式文件。
  • index.html:模板页面。
  • package.json:npm配置文件。

您的关注是我最大的动力

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页