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

本文是Taro小程序开发系列的第二部分,介绍了如何使用Taro的路由功能实现多页面跳转,以及如何引入Taro UI组件库提升界面体验。具体操作包括配置页面、在PostCard组件中添加跳转逻辑、创建帖子详情和个人主页页面,并展示了升级后的DEMO。同时,文章讲解了如何通过Taro.navigateTo进行页面跳转,以及使用Taro UI的AtButton和AtFloatLayout组件优化表单提交和创建新帖子的流程。
摘要由CSDN通过智能技术生成

在上一篇教程中,我们用熟悉的 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'

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值