前言
2020年了，憋在家里的我闲着没有事情干，只能先来投稿一篇关于现在各种小程序在各大平台上大放异彩，而作为前端程序员的我们头疼的问题就随之而来了，我们怎么样可以只写一套代码就能完成在各种平台的运行的工作，正当我们在为此愁眉不展的时刻，京东凹凸实验室推出了一种多端统一开发的解决方案，那就是接下来我们要学习的框架 ---- Taro。
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 (
<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 框架的出现目的就是为了解决多端混乱的局面，当我们按照一种规定的模式只写一套代码的开发方式，开发完成后，项目就可以在不同的平台上显示，这将为提高开发人员的开发体验，那么具体 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 (
<Index />
)
}
}
可以看出入口文件也是 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 (
<View>
<Text>Hello world!</Text>
<br/>
<Text>我叫：{this.state.username}</Text>
<br/>
<Button type="primary" size="mini" onClick={this.setUsername}>换个名字</Button>
</View>
)
}
}
现在使用 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 (
<View>
<Text>Hello world!</Text>
<br/>
<Text>我叫：{username}</Text>
<br/>
<Button type="primary" size="mini" onClick={setUsername}>换个名字</Button>
</View>
)
}
}
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 (
<View>
<Text>Article Page</Text>
</View>
)
}
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'
然后像下面的方式一样使用它：
<Image src={avatar} width="100px" height="100px" />s
Taro 中如何进行数据交互
我们可以使用 Taro 上的 request 方法来向后台发送请求获取接口数据，也是 Promise 风格的，下面是代码示例：
Taro.request({url: '接口地址'})
.then(res => {
console.log(res.data)
})
.catch(err => {
console.log(err)
})
总结：
相信大家读完这篇文章，对 Taro 也有了一定的认识了，当我们有业务需要开发这样的项目时，我们也知道如何选择我们的技术栈了，本篇文章只是入门教程引导，如果你对 Taro 感兴趣，可以去官网深入学习。
文章出自微信公众号【 前端流浪汉 】关注他为您持续推送精选好文。
作者技术博客： 前端流浪汉
网友评论