Taro基础入门_多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用

Taro基础入门

官方网址:https://taro.aotu.io/

Taro基础入门_多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用

GitHub:https://github.com/NervJS/taro

简介描述:多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用

简介

Taro 是一套遵循 语法规范的React多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、React-Native 等)运行的代码。

Taro 特性

Taro 的语法规则基于 React 规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时在书写体验上也尽量与 React 类似,支持使用 JSX 语法,让代码具有更丰富的表现力。

代码示例

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: '首页',
      list: [1, 2, 3]
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentWillUpdate (nextProps, nextState) {}

  componentDidUpdate (prevProps, prevState) {}

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      <View className='index'>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}

快速开发微信小程序

Taro 立足于微信小程序开发,众所周知小程序的开发体验并不是非常友好,比如小程序中无法使用 npm 来进行第三方库的管理,无法使用一些比较新的 ES 规范等等,针对小程序端的开发弊端,Taro 具有以下的优秀特性:

支持使用 npm/yarn 安装管理第三方依赖。
支持使用 ES7/ES8 甚至更加新的 ES 规范,一切都可自行配置。
支持使用 CSS 预编译器,例如 Sass 等。
支持使用 Redux 进行状态管理。
小程序 API 优化,异步 API Promise 化等等。

海计划公众号
(0)
上一篇 2020/03/06 05:57
下一篇 2020/03/06 05:57

您可能感兴趣的内容

  • Joomla使用说明一套全球知名的内容管理系统

    Joomla使用攻略 官方网址:http://www.joomlachina.cn/ 简介描述:一套全球知名的内容管理系统 Joomla!是使用PHP语言加上MySQL数据库所开发…

    2020/03/06
  • prefetch入门基础HTML5的页面资源预加载技术(Link prefetch)加速页面加载_预加载菜鸟教程

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉。有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等。我曾经介绍过本站上使用的一些速度优化技术。而在HTML5里,出现了一个新的用

    2020/04/03
  • 空虚寂寞的时候,该如何守住底线?基础知识_福利菜鸟攻略

    空虚的人常感到人生没有追求,做事缺乏动力;由于没有了寄托和精神支柱,做什么事都好像不顺心;又因为对自己没有正确的认识,感觉自己不中用,导致整天忧郁,思想空虚,这样的人就好象迷失了方向的船舶一样。 出轨,好像是当代社会出现的普片现象。我们应该怎么守住自己的底线呢首先:要明白自己是一个有家室的男人,外面的诱惑虽然大。但是自己也应该把持住,看过何以笙箫默的。应该

    2020/03/23
  • JavaScript支持宏吗?使用帮助_js知识小白知识

    与其它类 Lisp 语言不同,不支持宏是 JavaScript 与生俱来的一个问题,这是因为宏会在编译时操作语法树,而这在像 JavaScript 这样的语言中几乎是不可能的。那么如何让JavaScript支持宏?可以使用LispyScript, LispyScript 是一种采用 Lispy 语法、支持宏的 JavaScript 实现。在 LispyScr

    2020/03/24
  • 网站打开速度太慢的原因?入门知识_网站基础知识入门

    网站访问速度慢?马上检查下这几点你就知道了。1.用IIS7网站监控先检查一下网站是否有安全方面的问题,没有再解决别的问题,如果有安全性的问题,就需要具体问题,具体分析。2.网站页面大小直接影响网站的加载速度。网站的页面图片,代码文件越大,加载就会越慢。那么如何查看网页的大小呢?打开谷歌或360浏览器,打开你要测试的网址,按下F12或FN+F12键,刷新网页,

    2020/03/29
  • 优化Webpack构建性能的几点建议入门教程_webpack小白知识

    Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。 以下是一些关于优化 Webpack 构建性能的几点建议:一、选择合适的

    2020/04/05
  • vue引用js文件的多种方式使用帮助_vue入门攻略

    1、vue-cli webpack全局引入jquery(1) 首先 npm install jquery –save (–save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)(2)在webpack.base.conf.js里加入var webpack = require(“webpack”)(3)在m

    2020/04/05
  • 站长素材小白入门_一家大型综合设计类素材网站

    站长素材小白入门 官方网址:http://sc.chinaz.com/ 简介描述:一家大型综合设计类素材网站 站长素材是一家大型综合设计类素材网站,提供高清图片素材、PSD素材、P…

    2020/03/06
  • 一文看懂中国互联网二十年小白基础_互联网基础入门

    以史为镜,可以知兴替。中国互联网,沧海桑田。1、最早在美国上市的中国互联网公司是中华网,域名牛逼,中国概念,一度股价爆高到100多美元,后来一路跌到地板,然后退市,现在,谁还记得呢。2、曾经联想搞了一个fm365.com,联想的互联网战略,非常非常早的事情,随着联想电脑预装铺开,一度号称是国内门户前几名,然后呢?后来一度域名都丢了,然后也没有然后了。3、我们

    2020/04/05
  • 浏览器内核分类菜鸟攻略_浏览器入门基础知识

    1.五大浏览器:IE、Firefox、Chrome、Safari和Opera。2.浏览器内核:渲染引擎和 JS 引擎。渲染引擎 它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。JS 引擎 则是解析 J

    2020/03/23
  • Js设计模式——观察者模式基础知识_模式入门基础知识

    定义:观察者模式定义了一种一对多的对象依赖关系,当被依赖的对象的状态发生了改变,所有依赖它的对象都会得到通知;白话解释:假如你去苹果专卖店买最新款的iphone11,因为iphone11刚出来不久,正处旺季,供货不足;当你去专卖店的时候,店员告诉你暂时没货了,但是你可以留下你的联系方式,如果货到了,会第一时间通知;当然你肯定不会每天都去专卖店问iphone1

    2020/03/24
  • Js扫雷游戏开发基本思路小白帮助_思路基础知识教程

    今天给大家介绍传统扫雷游戏的制作思路吧,为什么选择这个游戏呢?1.它太金典了,金典到我们都知道,都玩过,都会玩;2.它也是一个轻量级的小游戏,比较简单。我们先来捋一下扫雷游戏中的要素:从上到下的UI:遮罩层——>雷层——>数字层——>底层背景层。下面来介绍一下制作流程:1.我们制作的时候需要从底层开始做起,首先是底层背景层,只需要一张图片就ok了,作为游戏的

    2020/03/24
  • JSON.parse和JSON.stringify的巧用使用教程_json基础教程

    JSON.parse和JSON.stringify是对json数据的转换,在js中使用的频率还是非常高的,比如localStorage,cookie中对复合型数据的存储,与服务器进行数据交互的格式转换等等。JSON.stringify()是将一个JavaScript值(对象或者数组)转换为一个json字符串,如果指定了 replacer 是一个函数,则可以选

    2020/03/22
  • 中国人才热线基础入门_优质人才、校园、专场、猎头等服务

    中国人才热线基础入门 官方网址:http://www.cjol.com/ 简介描述:优质人才、校园、专场、猎头等服务 中国人才热线为求职者提供最新最全的招聘信息,为企业提供优质人才…

    2020/03/06
  • 给url加时间戳,骗过浏览器缓存零基础入门_缓存使用帮助

    修改js的时候总是因为浏览器不刷新缓存,导致修改无效。可以添加时间戳的方式骗过浏览器,重新加载 。为什么要加时间戳:URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存,则在一定时间内(缓存时效时间前)再次访问相同的URL,浏览器就不会再次发送请求到服务器端,而是直接从缓存中获取指定资源。 代码//

    2020/03/29
  • g2小白知识_一套基于可视化编码的图形语法

    g2小白知识 官方网址:https://antv.alipay.com/zh-cn/g2/3.x/index.html GitHub:https://github.com/antv…

    2020/03/06