Taro入坑(一)

前沿

taro 是由京东·凹凸实验室(aotu.io)倾力打造的一款多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5、React Native 等的应用

安装

全局安装npm install -g @tarojs/cli或者yarn global add @tarojs/cli
之后我们需要初始化一个项目taro init myApp

demo1.jpeg

等待所有依赖安装完毕之后,就可以开始我们的踩坑记录啦。

开发

taro现在支持微信小程序,百度小程序,支付宝小程序,h5,React Native
进入我们的项目之后执行

npm run dev:weapp

打开的我们的微信小程序编辑器打开这个项目

我们可以看到这个界面


image.png

接下来,我们看下我们init出来的项目结构

image.png

我们现在看下解读一些重要的文件

app.js

image.png

这个app.js中的一段config代码。
我们可以看到这段代码,和我们用微信小程序自动生成代码中app.json得代码非常相似。没错,他们的功能也是一样的,设置小程序中所载入的页面,设置背景颜色,设置导航条等,都是在这里设置的。

index.js

image.png

这是index.js中的代码,因为taro是支持用 React 的开发方式编写得。所以代码几乎与react代码一致。只有在需要引入react得时候改动成Taro即可。

当然Taro也有自己对应的一些组件。
这些组件我会在下一章去慢慢解读。

谢谢大家观看,第一次写文章,希望大家多多支持。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,287评论 25 708
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 12,939评论 2 59
  • 一个星期天的下午,我去学击剑的时候路过了“西西佛”书店。于是,我在“西西佛”书店里买下了《猫咪还能这样玩》...
    果果Emma阅读 191评论 0 2
  • 2018年4月21日, 星期六,农历三月初六, 天气:晴 诵读经典第二十二周第6天。 读经人:思思宝贝和妈妈。 读...
    绽放最美的自己阅读 203评论 0 0
  • 今天下午去开了一个极度没有质量的股东会议,会议发起人没有做准备,没有会前计划,会中讨论也没有主线,加上最近本来就比...
    孜姿不倦阅读 336评论 1 1