————☝☝☝————————————————

 点击上方蓝字 “野九和浪七”

关注不迷路 满满的干货喔♥

————————————————————————

正当移动互联网进入白热化阶段时，以微信小程序为代表的一类“轻应用”异军突起。它们无需下载，使用方便，“用完即走”，同时功能也较为完备，一经推出即得到了各大平台和及用户的热烈追捧。但是问题也随之而来——开发者们要同时维护 Web 端、移动端、微信小程序、支付宝小程序等等多套用户界面，其维护成本可以想象。作为一个优秀的多端统一开发解决方案，Taro 的出现则改变了这一情况。正值 Taro 3.x 进入 beta 阶段，让我们沏上一杯茶，开始我们的 Taro 多端小程序开发之旅吧。起步对于国内 React 开发者来说，Taro 的出现无疑是福音——它能够让我们用熟悉的 React 代码去搭建各类小程序，并且一份代码可以编译成多个平台的应用(目前包括微信小程序、支付宝小程序、React Native、H5 等等)。随着 Taro 的不断进化，它对 React 代码的支持程度越来越好，所支持的目标平台也越来越多，学习的价值自然不必多言。正值 Taro 进入 3.0.0 版本的 beta 阶段，我们在这一篇教程将手把手带你实现一个能够部署到多端的小程序，让你感受 Taro 的强大与魅力！

在这一系列教程中，我们将构建一个多端小程序应用——奥特曼俱乐部(Ultraman Club，简称 UltraClub)，一个支持多端登录(微信和支付宝)的类似贴吧的小程序。

我们将构建什么？

前提条件

• 了解 HTML、CSS、JavaScript 的基础知识

• 了解 React 框架的基础知识

• 了解并已经安装好 node 与 npm (注意：node环境需要 >= 12.0.0)

除此之外，你还需要下载并安装微信开发者工具，下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。用 Taro 脚手架初始化项目首先安装 Taro CLI：

npm install  -g @tarojs/cli

然后创建我们的项目：

taro init ultra-club

之后会出现一系列选项，按照下图所示进行选择即可(CSS 预处理器选择 Sass，模板选择“默认模板”，老司机可自行选择使用 TS)：

之后进入到我们的项目目录 ultra-club 之后，可以看到项目模板包括以下文件：

.├── config                    # 项目配置│   ├── dev.js                # 开发环境配置文件│   ├── index.js              # 主配置文件│   └── prod.js               # 生产环境配置文件├── package.json├── project.config.json       # 微信小程序项目配置└── src                       # 项目源码目录    ├── app.scss              # 根组件样式    ├── app.jsx               # 根组件 app    ├── index.html            # 等待被嵌入代码的 HTML 文档    └── pages                 # 页面目录        └── index             # index 页面模块            ├── index.scss    # index 页面样式            └── index.jsx     # index 页面组件

我们主要看一下两个代码文件： src/app.jsx 以及 src/pages/index/index.jsx 。

初探脚手架代码

src/app.jsx 定义了项目的根组件App ，它的代码如下：

// 如果需要在 h5 环境中开启 React Devtools// 取消以下注释：// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {//   require('nerv-devtools')// }class App extends Component {  config = {    pages: ['pages/index/index'],    window: {      backgroundTextStyle: 'light',      navigationBarBackgroundColor: '#fff',      navigationBarTitleText: 'WeChat',      navigationBarTextStyle: 'black',    },  }  // 在 App 类中的 render() 函数没有实际作用  // 请勿修改此函数  render() {    return   }}Taro.render(, document.getElementById('app'))

如果你熟悉 React 的话，那么上面这段代码一定不难理解，只不过是把相应的地方(导包、渲染)从之前的 React 以及 ReactDOM 改成 Taro 。

我们再看看 src/pages/index/index.jsx。按照最佳实践，Taro 项目中一般把页面组件放到 src/pages目录中，src/pages/index就是 index 页面组件模块，其中 index.jsx 的代码如下：

import Taro, { Component } from '@tarojs/taro'import { View, Text } from '@tarojs/components'import './index.scss'export default class Index extends Component {  config = {    navigationBarTitleText: '首页',  }  render() {    return (              Hello world!          )  }}

依旧是熟悉的 React 组件风格，只不过与普通的 React 相比，在 render 函数中我们用的不再是 div 和 p 标签，而是 Taro 为我们准备好的 View 和 Text 组件。为什么 Taro 要自己搞一套组件库呢？因为 Taro 的目标是星辰大海……sorry，是能够编译到各个平台。只有通过制定 Taro 自己的组件库，才能在各个平台的原生组件库上盖了一层抽象层，进而实现跨平台的目标。运行小程序

打开根目录进入终端，运行以下命令：

npm run dev:weapp

会出现以下提示信息：

当看到“监听文件修改中…”的提示后，我们就可以打开微信开发者工具，用微信扫码登录后界面如下：

点击 + 号，开始导入我们刚才创建的 ultra-club 项目：

如上图所示，首先切换到”导入项目“一栏，然后点击”目录“输入栏右侧的按钮选择刚才创建的 ultra-club 文件夹，最后点击右下角的”导入“按钮即可。导入成功后，微信开发者工具的界面如下图所示：

在模拟器页面中，看到了我们 index 页面渲染的 Hello world；编辑器能够查看所有代码，不过通常我们用自己习惯的代码编辑器来开发(VSCode 真香！)；调试器则是类似 Chrome 的开发者工具。一切就绪，让我们开始动工吧！ 下次再见吧！