taro 主题切换_Taro 小程序开发大型实战（二）：多页面跳转和 Taro UI 组件库

在上一篇教程中，我们用熟悉的 React 和 Hooks 搞定了“奥特曼俱乐部”的雏形。在这一篇文章中，我们将用 Taro 自带的路由功能实现多页面跳转，并用 Taro UI 组件库升级之前略显简陋的界面。这一篇完成后的 DEMO 如下：

具体有三个页面：

主页：展示了所有帖子，以及添加新帖子的按钮。

帖子详情：展示单个帖子的全部内容。

个人主页：展示当前用户的个人信息。

如果你想直接从这一篇开始动手实践，那么请运行以下命令快速开始：

git clone -b second-part https://github.com/tuture-dev/ultra-club.git

cd ultra-club

本文所涉及的源代码都放在了 Github 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点个推荐+Github仓库加星❤️哦~

来一打页面

在这一步中，我们将开始实现项目的其他页面，包括：

帖子详情 post：进入单篇帖子的详情页面

我的 mine：显示当前用户的个人信息(在后面的步骤中将实现登录注册哦)

其中，帖子详情页面中将复用前面编写的 PostCard 组件。为了方便管理，我们需要引入一个新的 prop(isList)，用于判断此组件是显示在首页列表中，还是在帖子详情页面中。

提示

项目中所需用到的图片可以从这个链接下载，下载后解压并将所有图片放到 src/images 目录下。

Taro 的路由功能

路由功能是实现多页面应用的核心，幸运的是 Taro 已经自带了。具体而言，在 Taro 中实现页面跳转只需两个步骤：

在入口文件(src/app.jsx)中在 App 组件的 config 中配置之前提到的 pages 属性

在任意组件中通过 Taro.navigateTo 或 Taro.redirectTo 即可实现页面的跳转或重定向

感觉不够直观？OK，我们直接撸起袖子写起来。

配置全部页面

首先在入口文件 src/app.jsx 中配置好所有页面：

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

import Index from './pages/index'

import './app.scss'

// 如果需要在 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', 'pages/mine/mine', 'pages/post/post'],

window: {

backgroundTextStyle: 'light',

navigationBarBackgroundColor: '#fff',

navigationBarTitleText: 'WeChat',

navigationBarTextStyle: 'black',

},

tabBar: {

list: [

{

pagePath: 'pages/index/index',

text: '首页',

iconPath: './images/home.png',

selectedIconPath: './images/homeSelected.png',

},

{

pagePath: 'pages/mine/mine',

text: '我的',

iconPath: './images/mine.png',

selectedIconPath: './images/mineSelected.png',

},

],

},

}

// 在 App 类中的 render() 函数没有实际作用

// 请勿修改此函数

render() {

return

}

}

Taro.render(, document.getElementById('app'))

注意到我们还在 config 中注册了导航栏 tabBar，用来在底部切换 index 页面和 mine 页面。

在 PostCard 中添加跳转逻辑

我们首先在 PostCard 组件中添加跳转逻辑，使得它被点击后将进入该帖子的详情页面。将 src/components/PostCard/index.jsx 按如下代码进行修改：

import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

import './index.scss'