Taro框架有必要学吗

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。

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

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ/京东小程序、快应用、H5、React-Native 等）运行的代码。

下面看一段遵循 React 风格的 Taro 代码示例：

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 => {
// dosomething
};

render() {
return (

{this.state.title}

{this.state.list.map(item => {
return {item};
})}

添加


);
}}

优势：

Taro 框架的出现目的就是为了解决多端混乱的局面，当我们按照一种规定的模式只写一套代码的开发方式，开发完成后，项目就可以在不同的平台上显示，这将为提高开发人员的开发体验，那么具体 Taro 有哪些优点，下面一张图可以体现：

目前 Taro 代码可以支持转换到

• 微信小程序

• 百度小程序

• 支付宝小程序

• QQ小程序

• 京东小程序

• 快应用

• H5端

• 原生应用（React Native）

Taro 框架是目前支持小程序最多的前端框架，而且从公司的角度出发，一套代码就可以实现在不同端的表现能力，公司的开发成本也会降到最低，所以说这也是如果我们要做全网推广，占用流量最多的入口的话，那么使用 Taro 来开发是完全没有问题的。

Taro开发环境搭建

CLI 工具安装：

首先，你需要使用 npm 或者 yarn 全局安装@tarojs/cli，我这边使用比较多的是 npm:

使用 npm 安装 CLI$ npm install -g @tarojs/cli

注意事项：

值得一提的是，如果安装过程出现sass相关的安装错误，请在安装 mirror-config-china 后重试。

使用 npm 安装 mirror-config-china$ npm install -g mirror-config-china

项目初始化：

使用命令创建模板项目

​$ taro init myApp

创建项目模板图

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn > cnpm > npm 顺序进行检测，一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装

使用 yarn 安装依赖$ yarn# OR 使用 cnpm 安装依赖$ cnpm install# OR 使用 npm 安装依赖$ npm install

进入项目目录开始开发，目前已经支持 微信/百度/支付宝/字节跳动/QQ/京东小程序、H5、快应用以及 ReactNative 等端的代码转换，针对不同端的启动以及预览、打包方式并不一致，下面列出几种方式，其他的可自行去 Taro 官网文档查询。

微信小程序：

开发环境$ npm run dev:weapp # 生产环境$ npm run build:weapp

H5 端：

开发环境$ npm run dev:h5# 生产环境$ npm run build:h5

React Native 原生端：

开发环境$ npm run dev:rn

当我们切换到项目根目录cd myApp，使用下面的代码

$ npm run dev:h5

这时候就会自动在浏览器中为我们打开一个网页，并显示出 Hello World，这时候的端口是 10086, 没错就是你经常拨打的移动客服电话 10086。

Taro 项目目录介绍

官方给出的目录结构介绍：

目录结构图

入口文件：

入口文件默认是 src 目录下的 app.js。

代码示例：

一个普通的入口文件示例如下

import Taro, { Component } from '@tarojs/taro’import Index from './pages/index’import './app.scss’class App extends Component {
// 项目配置
config = {
pages: [
‘pages/index/index’
],
window: {
backgroundTextStyle: ‘light’,
navigationBarBackgroundColor: ‘#fff’,
navigationBarTitleText: ‘WeChat’,
navigationBarTextStyle: ‘black’
}
}

componentWillMount () {}

componentDidMount () {}

componentDidShow () {}

componentDidHide () {}

render () {
return (

)
}}

可以看出入口文件也是 React 风格的写法，首先需要引用依赖 @tarojs/taro，这是 Taro 方案的基础框架，在这里我们继承了 Component 组件基类。

dist 目录：

这个目录是我们在预览时自动生成的，每次进行预览都会根据我们预览的终端不同，编译成不同代码，比如你使用 npm run dev:h5 那生成的就是 web 的代码，如果你使用 npm run dev:weapp 那生成的就是小程序的代码。

node_modules：

项目所需的依赖包，就是我们使用npm install进行安装的包，一般你不需要修改。

config目录：

这个就是项目的一些配置，这些配置我们通过 Taro 的官方文档进行学习。

src 目录：

这个目录是我们的源代码目录，我们日常的开发就在这目录下进行。

src目录下的 pages 目录：

这个目录是我们用来配置页面的，新增一个页面结构就是新增一个页面，默认是 index 页面结构

Taro 中使用 React Hooks

我们新建的项目还是使用的 React Class 类的方式来声明组件的，下面我们通过使用 React Hooks 新特性对项目的 Hello World 做一个更改。

默认的 /src/page/index/index.js 页面，还是使用的原始 Class 类的方式来定义组件的

import Taro, { Component } from '@tarojs/taro’import { View, Text, Button } from '@tarojs/components’import './index.less’export default class Index extends Component {

setUsername = () => {
this.setState({
username: “小欢欢”
})
}
state = {
username: “小华华”
}
config = {
navigationBarTitleText: ‘首页’
}

render () {
return (

Hello world!


我叫：{this.state.username}


换个名字

)
}}

现在使用 Hooks 来改造一下当前组件

import Taro, { useState } from '@tarojs/taro’import { View, Text, Button } from '@tarojs/components’import './index.less’function Index () {

const [username, setUsername] = useState(‘小华华’)
config = {
navigationBarTitleText: ‘首页’
}

render () {
return (

Hello world!


我叫：{username}


换个名字

)
}}export default Index

Taro 的路由配置

Taro 中的路由配置是通过 app.jsx中的 pages 来配置的，并且谁配置在第一个，默认显示的首页就是谁。

新建页面：

在 /src/pages 文件夹下，建立一个 article 文件夹，在文件夹下面建立一个 article.jsx 文件，写入下面的代码：

import Taro from '@tarojs/taro’import { View, Text } from '@tarojs/components’function Article (){
return (

Article Page

)}export default Article

这样一个页面就建立好了，下面我们需要配置路由。

有了页面之后就可以到 /src/app.jsx 下，然后在 pages 的数组里面加入代码。

pages: [
‘pages/index/index’,
‘pages/article/article’],

下面是路由之间的几种跳转方式：

• navigateTo：最基本的跳转方式，可以返回上级页面。三端都支持的，小程序、H5、React Native。

• redirectTo：不记录上集页面，直接跳转。三端都支持的，小程序、H5、React Native。

• switchTab：Tab 之间进行切换，这个要配合 Taro 的导航栏一起使用，三端都支持的，小程序、H5、React Native。

• navigateBack：返回上一级页面，这个在小程序中常使用，三端都支持的，小程序、H5、React Native。

• relaunch：关闭所有额面，打开到应用内某个页面。三端都支持的，小程序、H5、React Native。

• getCurrentPages：获取当前页面信息所用，这个H5是不支持的。

Taro 路由间如何传递参数

在 Taro 中进行传参，一般会使用查询字符串的形式，也就是在跳转的 url 上，加一个 ? 问号的形式，然后后边跟上参数。

当我们传递参数时，如下代码：

const username = '金海’Taro.navigateTo({url: ‘/pages/index/index?username=’ + username})

当我们接收参数时，如下代码：

// 接收到传递过来的路由参数const username = this.$router.params.username

我们再来看看如何传递多个参数和多个参数的接收，传递的时候只要用 & 进行链接就可以了，比如下面这样。

当我们传递参数时，如下代码：

const username = ‘金海’;const age = 18;Taro.navigateTo({url: ‘/pages/index/index?username=’ + username + ‘&age=’ + age})

当我们接收参数时，如下代码：

// 接收到传递过来的路由参数const {username, age} = this.$router.params

这就是跟 React Router 路由传参不太一样的地方。

Taro 如何加载静态文件

在 Taro 中加载 js、css 这样文件和在 React 中是一样的方式，但是引入图片的方式就不太一样了，下面我们看一下如何引入图片：

首先我们要在需要的地方先引入图片资源：

import avatar from ‘…/…/static/avatar.jpg’

然后像下面的方式一样使用它：

Taro 中如何进行数据交互

我们可以使用 Taro 上的 request 方法来向后台发送请求获取接口数据，也是 Promise 风格的，下面是代码示例：

Taro.request({url: ‘接口地址’}).then(res => {
console.log(res.data)}).catch(err => {
console.log(err)})

---

结语：
相信大家读完这篇文章，对 Taro 也有了一定的认识了，当我们有业务需要开发这样的项目时，我们也知道如何选择我们的技术栈了，本篇文章只是入门教程引导，如果你对 Taro 感兴趣，可以去官网深入学习。

相关推荐

Taro小程序框架的原理