美文网首页
Taro入坑(一)

Taro入坑(一)

作者: Jie221 | 来源:发表于2018-11-13 15:44 被阅读0次

前沿

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也有自己对应的一些组件。
这些组件我会在下一章去慢慢解读。

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

相关文章

  • Taro入坑(一)

    前沿 taro 是由京东·凹凸实验室(aotu.io)倾力打造的一款多端统一开发框架,支持用 React 的开发方...

  • 多端统一框架之 Taro 入坑

    前言 2020年了,憋在家里的我闲着没有事情干,只能先来投稿一篇关于现在各种小程序在各大平台上大放异彩,而作为前端...

  • 微信小程序开发 — 开发踩坑记录

    说明 本文记录了小程序项目开发过程中踩过的坑,方便日后参考。 问题 taro-ui 问题 公司项目采用 taro-...

  • Taro踩坑

    小程序转Taro 小程序转Taro的时候,会带上一个@withWeapp('page'),这是一个标识,用来表示是...

  • Taro踩坑

    网络相关 1、请求接口没有响应解决方法:配置httpRequest接口请求域名白名单 使用build时候出现的错误...

  • taro踩坑

    编译h5的时候遇到以下错 解决方案如下config/index.js添加esnextModule:['taro-ui']

  • taro踩坑

    使用taro下的组建ScrollView 时候样式出不来 全局样式引入import 'taro-ui/dist/s...

  • ./node_modules/taro-ui/dist/h5/c

    我靠,感觉使用taro处处是坑呀 问题 在taro脚手架中使用它所提供的对应UI框架,根据文档来一步步进行安装,不...

  • Taro.createSelectorQuery()踩坑之路

    其实Taro.createSelectorQuery()这个API的坑很浅的,不算很难。一开始刚使用的时候大家发现...

  • Taro 实战踩坑

    Taro 引用相对路径图片 直接将相对路径放在src属性中,不起作用,需要先import进来,最好把图片放到服务器...

网友评论

      本文标题:Taro入坑(一)

      本文链接:https://www.haomeiwen.com/subject/zcclfqtx.html