多端统一开发-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配置文件。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容

  • 1. 前言 从16年微信小程序内测的时候到如今,微信小程序用时间与实践证明了自己的变革与价值,微信小程序的规则也在...
    cbw100阅读 11,022评论 1 37
  • 此刻没有风,也没有云 天空很蓝 阳光很明媚 树叶绿的绿,黄的黄 或驻守,或兀自纷飞 这一天,黑与白平分 月将丰盈 ...
    一团菌阅读 202评论 3 8
  • 常言道:人有旦夕祸福 我的收入低了好多 是祸是福呢 常言道:月有阴晴圆缺 我的时间多了自由 是好是坏呢 常言道:祸...
    小卫是只猫阅读 162评论 0 1
  • 29.张耳陈余列传 张耳(公元前264年-公元前202年) 魏国人,年轻时做过信陵君的门客。 后更名改姓,流亡在外...
    面包马戏团阅读 1,312评论 11 3