asp按钮跳转页面代码_Taro 小程序开发大型实战（二）：多页面跳转和 Taro UI 组件库...

最新推荐文章于 2024-04-28 15:57:31 发布

weixin_39615257

最新推荐文章于 2024-04-28 15:57:31 发布

阅读量152

点赞数

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

具体有三个页面：

主页：展示了所有帖子，以及添加新帖子的按钮。
帖子详情：展示单个帖子的全部内容。
个人主页：展示当前用户的个人信息。

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

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

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

来一打页面

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

帖子详情 post：进入单篇帖子的详情页面
我的 mine：显示当前用户的个人信息(在后面的步骤中将实现登录注册哦)

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

提示

项目中所需用到的图片可以从这个链接^[3]下载，下载后解压并将所有图片放到 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 <Index />  }}Taro.render(<App />, 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'export default function PostCard(props) {  const handleClick = () => {    // 如果是列表，那么就响应点击事件，跳转到帖子详情    if (props.isList) {      const { title, content } = this.props      Taro.navigateTo({        url: `/pages/post/post?title=${title}&content=${content}`,      })    }  }  return (    <View className="postcard" onClick={handleClick}>      <View className="post-title">{props.title}View>      <View className="post-content">{props.content}View>    View>  )}

可以看到，我们在 PostCard 中注册了 handleClick 用于响应点击事件。在 handleClick 函数中，我们通过新引入的 isList 属性判断这个组件是否展示在首页列表中。如果是的话，就通过 Taro.navigateTo 进行跳转。

提示

眼尖的你一定发现了我们在调用 navigateTo 时还加上了查询字符串用于传递参数。在接下来实现帖子详情页面时，我们就可以接收到传递进来的 title 和 content 的值啦。

接着我们需要在首页模块中给 PostCard 组件加上 isList。修改 src/pages/index/index.jsx，代码如下：

// import 语句 ...export default function Index() {  // 定义状态和 handleSubmit 函数 ...  return (          {posts.map((post, index) => (                  key={index}          title={post.title}          content={post.content}          isList        />      ))}              formTitle={formTitle}        formContent={formContent}        handleSubmit={e => handleSubmit(e)}        handleTitleInput={e => setFormTitle(e.target.value)}        handleContentInput={e => setFormContent(e.target.value)}      />      )}// ...

实现“帖子详情”页面

在 src/pages 中创建 post 目录，然后在其中创建 post.jsx 和 post.scss，分别为页面模块和样式文件。post.jsx 代码如下：

import Taro, { useRouter } from '@tarojs/taro'import { View } from '@tarojs/components'import { PostCard } from '../../components'import './post.scss'export default function Post() {  const router = useRouter()  const { params } = router  return (    <View className="post">      <PostCard title={params.title} content={params.content} />    View>  )}Post.config = {  navigationBarTitleText: '帖子详情',}

注意到我们用了 useRouter 这个 Hook(Taro 专有)，它用来在函数组件中获取 router，等同于之前类组件中的 this.$router。有了 router，我们就可以获取到在刚才 PostCard 组件跳转时传进来的 title 和 content 参数了。

post.scss 的代码如下：

.mine {  margin: 30px;  border: 1px solid #ddd;  text-align: center;  height: 90vh;  padding-top: 40px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;}.mine-avatar {  width: 200px;  height: 200px;  border-radius: 50%;}.mine-nickName {  font-size: 40;  margin-top: 20px;}.mine-username {  font-size: 32px;  margin-top: 16px;  color: #777;}.mine-footer {  font-size: 28px;  color: #777;  margin-bottom: 20px;}

实现“我的”页面

接着我们实现“我的”页面。创建 src/pages/mine 目录，在其中创建 mine.jsx 和 mine.scss。页面组件 mine.jsx 代码如下：

import Taro from '@tarojs/taro'import { View, Image } from '@tarojs/components'import './mine.scss'import avatar from '../../images/avatar.png'export default function Mine() {  return (    <View className="mine">      <View>        <Image src={avatar} className="mine-avatar" />        <View className="mine-nickName">图雀酱View>        <View className="mine-username">tutureView>      View>      <View className="mine-footer">From 图雀社区 with Love ❤View>    View>  )}Mine.config = {  navigationBarTitleText: '我的',}

样式文件 mine.scss 代码如下：

.mine {  margin: 30px;  border: 1px solid #ddd;  text-align: center;  height: 90vh;  padding-top: 40px;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;}.mine-avatar {  width: 200px;  height: 200px;  border-radius: 50%;}.mine-nickName {  font-size: 40;  margin-top: 20px;}.mine-username {  font-size: 32px;  margin-top: 16px;  color: #777;}.mine-footer {  font-size: 28px;  color: #777;  margin-bottom: 20px;}

查看效果

又到了激动人心的验收环节。我们应该能看到下面所示的效果：

加速开发，Taro UI 帮帮忙

在编写用户界面时，如果每次都要自己编写组件逻辑、调整组件样式，对于学习来说是完全可以的，但是对于实际开发任务就显得很麻烦了。在 React 社区，我们有诸如 Ant Design^[4] 这样的组件库，能够让我们快速搭建一套专业美观的界面。而 Taro 也提供了 Taro UI^[5] 组件库，为我们提供了能够适应多端的成熟组件。在这一步中，我们将用 Taro UI 升级界面，让它看上去更像一个成熟的小程序。

我们先贴出升级后的 demo 展示：

可以看到我们做了三点改进：

通过点击一个浮动按钮(Fab)^[6]来触发创建新文章的浮动弹层(FloatLayout)^[7]
发布成功后，会显示一条温馨的消息提示(Message)^[8]
帖子详情页面中 PostCard 组件去掉了边框，让它看上去更像正文展示

配置 Taro UI

首先安装 Taro UI 的 npm 包：

npm install taro-ui

为了后续能在 H5 中使用 taro-ui，我们需要在 config/index.js 中添加如下配置：

h5: {  esnextModules: ['taro-ui']}

升级 PostForm

首先让我们升级 PostForm 组件。我们先尝鲜 Taro UI 的 AtButton 组件，替换掉之前 Taro 自带的 Taro 组件：

import Taro from '@tarojs/taro'import { View, Form, Input, Textarea, Button } from '@tarojs/components'import { AtButton } from 'taro-ui'import './index.scss'export default function PostForm(props) {  return (                            标题                      className="input-title"            type="text"            placeholder="点击输入标题"            value={props.formTitle}            onInput={props.handleTitleInput}          />          正文                      placeholder="点击输入正文"            className="input-content"            value={props.formContent}            onInput={props.handleContentInput}          />                      提交                              )}

注意到我们还把之前 添加新的帖子 去掉了，因为接下来我们会把表单放在浮动弹层 FloatLayout 里面，所以就不需要这行提示啦。

提示

你也许会好奇为啥 Taro UI 的组件都以 At 开头？一个是为了与普通的 Taro 组件区分，另一个则是因为开发 Taro 团队正是 Aotu.io 凹凸实验室^[9]。

调整 PostForm 组件的样式，代码如下：

.post-form {  margin: 0 30px;  padding: 30px;}.input-title {  border: 1px solid #eee;  padding: 10px;  font-size: medium;  width: 100%;}.input-content {  border: 1px solid #eee;  padding: 10px;  width: 100%;  height: 200px;  font-size: medium;  margin-bottom: 40px;}.form-hint {  font-size: small;  color: gray;  margin-top: 20px;  margin-bottom: 10px;}

正如之前所说，我们打算把创建新帖子的表单放在浮动弹层 FloatLayout 中。在首页模块 src/pages/index/index.jsx 中导入相关组件，代码如下：

import Taro, { useState } from '@tarojs/taro'import { View } from '@tarojs/components'import { AtFab, AtFloatLayout, AtMessage } from 'taro-ui'import { PostCard, PostForm } from '../../components'import './index.scss'export default function Index() {  const [posts, setPosts] = useState([    {      title: '泰罗奥特曼',      content: '泰罗是奥特之父和奥特之母唯一的亲生儿子。',    },  ])  const [formTitle, setFormTitle] = useState('')  const [formContent, setFormContent] = useState('')  const [isOpened, setIsOpened] = useState(false)  function handleSubmit(e) {    e.preventDefault()    const newPosts = posts.concat({ title: formTitle, content: formContent })    setPosts(newPosts)    setFormTitle('')    setFormContent('')    setIsOpened(false)    Taro.atMessage({      message: '发表文章成功',      type: 'success',    })  }  return (                {posts.map((post, index) => (                  key={index}          title={post.title}          content={post.content}          isList        />      ))}              isOpened={isOpened}                onClose={() => setIsOpened(false)}      >                  formTitle={formTitle}          formContent={formContent}          handleSubmit={e => handleSubmit(e)}          handleTitleInput={e => setFormTitle(e.target.value)}          handleContentInput={e => setFormContent(e.target.value)}        />                     setIsOpened(true)}>                              )}Index.config = {  navigationBarTitleText: '首页',}

我们来逐一分析新添加的代码：

首先从 taro-ui 导入所需的 AtFab、AtFloatLayout 和 AtMessage 组件
使用 useState Hook 创建新的状态 isOpened(用于记录浮动弹层是否打开)和用于修改状态的 setIsOpened
在 handleSubmit 中，用 setIsOpened(false) 关闭浮动弹层，并用 Taro.atMessage 弹出提示消息
在 return JSX 代码时，添加组件，并在之前的 PostForm 组件外层包裹 AtFloatLayout 组件，最后添加浮动按钮 AtFab

在首页样式文件 src/pages/index/index.scss 中添加样式如下：

.post-button {  position: fixed;  right: 60px;  bottom: 80px;}

升级 PostCard

接着我们来调整 PostCard 在不同页面的样式。classnames^[10] 是最常用的 CSS 类组合库，可以让你用 JavaScript 表达式灵活地进行 CSS 类的组合。例如我们有三个 CSS 类 foo、bar 和 foo-bar，可以通过 classNames 函数进行条件式组合：

import classNames from 'classnames`;classNames('foo', 'bar'); // => 'foo bar'classNames('foo', { bar: true }); // => 'foo bar'classNames({ 'foo-bar': true }); // => 'foo-bar'classNames({ 'foo-bar': false }); // => ''classNames({ foo: true }, { bar: true }); // => 'foo bar'classNames({ foo: true, bar: true }); // => 'foo bar'

我们也新增加一个 CSS 类 postcard__isList，用于表示在帖子列表中的样式。修改 src/components/PostCard/index.jsx 代码如下：

import Taro from '@tarojs/taro'import { View } from '@tarojs/components'import classNames from 'classnames'import './index.scss'export default function PostCard(props) {  const handleClick = () => {    // ...  }  return (    <View      className={classNames('postcard', { postcard__isList: props.isList })}      onClick={handleClick}    >      <View className="post-title">{props.title}View>      <View className="post-content">{props.content}View>    View>  )}PostCard.defaultProps = {  isList: '',}

修改 PostCard 组件的样式，代码如下：

.postcard {  margin: 30px;  padding: 20px;}.postcard__isList {  border: 1px solid #ddd;}.post-title {  font-weight: bolder;  margin-bottom: 10px;}.post-content {  font-size: medium;  color: #666;}

定制主题颜色

Taro UI 支持一定程度的主题定制^[11]，这里我们采用最简单却也十分有效的 SCSS 变量覆盖。我们创建 src/custom-theme.scss，代码如下：

/* Custom Theme */$color-brand: #02b875;$color-brand-light: #41ca98;$color-brand-dark: #02935e;

可以看到，我们定义了三个 SCSS 变量 $color-brand、$color-brand-light 和 $color-brand-dark，覆盖了 Taro UI 的默认主题色。

提示

欲查看所有可以覆盖的 SCSS 变量，请参考 Taro UI 的默认样式文件^[12]。如果不熟悉 SCSS 变量，这份指南^[13]是不错的资料。

紧接着我们需要在项目的全局样式文件 src/app.scss 中导入自定义颜色主题文件，代码如下：

@import './custom-theme.scss';@import '~taro-ui/dist/style/components/button.scss';@import '~taro-ui/dist/style/components/fab.scss';@import '~taro-ui/dist/style/components/icon.scss';@import '~taro-ui/dist/style/components/float-layout.scss';@import '~taro-ui/dist/style/components/textarea.scss';@import '~taro-ui/dist/style/components/message.scss';@import '~taro-ui/dist/style/components/avatar.scss';

可以看到，除了导入了刚刚创建的 custom-theme.scss，我们还按需引入了 Taro UI 中所用到组件的样式，这样可以有效减少打包后应用体积的大小哦。

完成这一步的代码后，记得在模拟器里面看看运行起来是不是跟开头的 GIF demo 效果完全一致哦！

至此，《Taro 多端小程序开发大型实战》第二篇也就结束啦。明天，我们将手把手带大家用实现如何在 Taro 框架下实现多端登录(微信小程序 + 支付宝小程序 + 普通登录)。