专栏首页晓月寒·多端统一开发-Taro的安装与使用

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

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

项目文件分析:

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

项目文件

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 又出新特性了?来看看这篇就明白了

    https://juejin.im/post/5ca2e1935188254416288eb2

    崔庆才
  • 隔空操作网页,web前端如何玩手部捕捉?

    此开源库是采用开放数据集,然后用tensorflow训练,之后转化模型,使前端库tensorflow.js可以使用,封装而成。

    mixlab
  • Spring中Enable*功能的使用

    @Enable** 注解,一般用于开启某一类功能。类似于一种开关,只有加了这个注解,才能使用某些功能。

    zeody
  • 钓鱼第二章:关于Cve-2018-8420系列利用

    https://github.com/Theropord/CVE-2018-8420.git

    用户1631416
  • shell实战(一):sed命令小结

    sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响。sed主要用来自动编辑一个或多个文件;简化对文件的反复操作;编写转...

    create17
  • JavaScript 相关的工具代码

    当前 toLocaleTimeString 方法只能获取到 12 小时制的时间('上午09:10:01' | '下午08:10:24')

    柳醉梦声
  • 10 个爬虫工程师必备的工具了解一哈

    工欲善其事必先利其器的道理相信大家都懂。而作为经常要和各大网站做拉锯战的爬虫工程师们,则更需要利用利用好身边的一切法器,以便更快的攻破对方防线。今天我就以日常爬...

    崔庆才
  • 0基础学Python,1个月写爬虫,走了哪些弯路?

    今天我们来分享一位小伙伴的自学之路。当然,如果你没有任何编程基础,也将会和他一样走很多弯路,如果有条件希望你能够找到老师带领。

    刀刀老高
  • 指引趋势与方向!2019开发者调查报告出炉

    近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

    纯洁的微笑
  • 异步爬虫写起来太麻烦?来试试 Trio 吧!

    “Async” 是“asynchronous”的简写,为了区别于异步函数,我们称标准函数为同步函数,从用户角度异步函数和同步函数有以下区别:

    崔庆才

扫码关注云+社区

领取腾讯云代金券