Taro入门教程

Taro是啥?

遵循Taro语法编写出的程序,可以编译成 微信原生小程序代码、 支付宝原生小程序代码、 RN 原生代码等等;Taro做的事情只是语法统一,比如某段Taro程序在支付宝app上调试,先转换成支付宝小程序代码,再运行转换后的代码。

吐槽:

1、不管是微信小程序还是taro的官方文档,都默认你是懂标签语言的,懂js的,你是做做过前端开发的,有点基础有人带还好,小白自学的成本不小。
2、开发taro和微信小程序大多都是用的VSCode,仅仅是个编辑器,微信小程序的官方开发套件几乎没人用来写代码,只用来调试,XcodeAndroidStudio这种集成开发环境就友好太多了。

学习:

1、建议从官方文档开始,文档多读几遍,文档中的例子多写几遍,啥都有了,语言类的东西没那么难,毕竟作为程序员,数据结构和算法都已经相当熟悉了。
2、语法--> 组件--> API,好像所有的语言都是如此,进阶了就封装组件给别人用,吃太饱了就想搞事情,要么自我革命要么革别人的命。

以下是一些学习Taro必要的文章。

Taro官方文档传送门:http://taro-docs.jd.com/taro/docs/README.html
Flex布局教程:https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
classnames:https://www.npmjs.com/package/classnames

一些我学习过程遇到的坎坷:

1、先说下调试,cd到taro项目根目录,npm install安装相关的依赖后,例如要调试小程序,执行完

yarn dev:weapp

后,打开微信小程序官方套件:微信开发者工具,打开项目中新生成的dist目录即可自动运行,不是src目录!,dist目录就是微信小程序代码的目录,scr目录中的代码转换生成。
2、Taro小程序中判断两个值相等,需要三个等号===,不相等:!==
3、空就用null,例如return:flag?<View></View>:null;
4、npm install classnames后,使用非常方便

import classnames from 'classnames'
state = {
   flag:0,
  }
const { flag } = this.state;
render(){
  return<View className={classnames(flag === 0 ? 'whitebg' : 'greybg')}></View>
}

index.scss:

.whitebg{
  background-color: white;
}
.greybg{
  background-color: grey;
}

样式文件中whitebg写白色背景,例如background-color:#ffffff,greybg样式写灰色背景,这样就可以通过控制flag的值来控制View的背景颜色,控制其他参数也是类似

this.setState({flag:1})

5、跳转页面传参数:

const url = `/pages/travel/travel-detail/index?travelId=${item.travelId}`;
Taro.navigateTo({
   url: url,
})

参数获取:

componentDidMount() { 
  let { travelId } = this.$router.params
  print(travelId)
}

6、有些Taro组件支持的环境不全,例如地图不支持h5,判断环境代码:

if (process.env.TARO_ENV === 'h5') {
}

7、定时器,单位毫秒:

let mapTimer = null;
mapTimer = setInterval(() => {
             //doSomeThing
}, 1000));

8、关于弹窗,需要先写一个弹窗到当前页面,使用一个参数控制弹窗是否显示即可,参考第4条控制flag参数
9、控制某块显示与不显示也是通过控制参数来做:

{isEmptyObject(trainData)?null:this.renderTrainDetail(trainData)}

此例中判断trainData是否符合条件来控制renderTrainDetail()组件是否显示
10、字符串中带参数:用大键盘数字1左边的键 : `

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

推荐阅读更多精彩内容