Taro - Taro基础 - 《各类框架》

[TOC]

本文目标

上一章节我们已经能成功把项目跑起来了，那这节我们主要了解下页面是由哪些元素组成的、又是如何跳页的。

Taro的入口文件
Taro的各类型组件
Taro的tabbar配置
Taro中路由是如何生效的?

入口组件

入口组件(app.ts)总是伴随着一个全局配置文件(app.config.js, 可在该全局配置文件中设置页面组件的路径、全局窗口、路由等信息)

Tips: 在配置文件中，Taro并不关心框架的区别，Taro CLI会直接在编译时在Node.js环境直接执行全局配置的代码。

Vue最简单的入口组件如下:

import { createApp } from 'vue'
import './app.less'

const App = createApp({
  onShow (options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})

export default App

Vue最简单的全局配置如下:

export default defineAppConfig({
  pages: [
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
})

页面组件

入口文件了解了，那再看看项目启动看到的Hello World是在哪个页面？是怎么展示出来的？

💡Tips：

Taro的页面默认放在src/pages中, 每一个Taro项目至少有一个页面组件。
每一个页面组件也有自己的一个页面配置文件index.config.ts

我们先看看src/pages/index/index.vue文件，包含哪些内容呢?

// view组件来源于@tarojs/components的跨平台组件
<template>
  <view class="index">
    <text>{{ msg }}</text>
  </view>
</template>

<script>
import { ref } from 'vue'
import './index.less'

export default {
  // vue3改动的生命周期钩子, 能正常使用
  setup () {
    const msg = ref('Hello world')
    return {
      msg
    }
  }
}
</script>

就跟我们常用的框架集(vue/react)一样, 我们肯定会基于业务需要封装一些自定义组件的, 那我们接下来看看要怎么封装自定义组件呢?

自定义组件

官网其实有通过一个需求Demo: 把论坛最新的帖子展示出来(个人觉着对于初学者太复杂了，还涉及到request等, 感兴趣的请戳→页面组件。)

下文自定义组件需求背景: 封装组件A, 组件A内文本接受父组件传值。

// 父组件Demo
<template>
  <view class="index">
    <text>{{ msg }}</text>
  </view>
  <comp-a :txt="compATxt"></comp-a>
</template>

<script>
import { ref } from 'vue'
import './index.less'
import compA from '../../../components/compA.vue'

export default {
  components: { 
    'comp-a': compA
   },
  setup () {
    const msg = ref('Hello world')
    const compATxt = '我是组件A内容, 父组件传递过来的'

    // Tips: 子组件要引起UI渲染的属性, 不能在setup中采用this.xxx的方式赋值否则会报错: error:  Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'compATxt') at setup (index.vue?f75a:21:1)
    // this.compATxt = compATxt

    return {
      msg,
      compATxt
    }
  }
}
</script>

<template>
  <view class="index">
    <text>{{ txt }}</text>
  </view>
</template>

<script>
export default {
  setup () { },
  props: {
      txt: {
          type: String,
          default: ''
      }
  }
}
</script>

代码准备就绪, 我们看下页面运行效果图如下:

至此，初步的自定义组件就已经开发完成了。
Tips:

自定义组件的力度是完全由开发者决定的，Taro并没有规定组件一定要放在components文件夹, 也没有规定页面一定要放在pages文件夹，只是建议这么做而已。
不能使用div/span这样的HTML组件，要使用view/text这种跨平台组件。

Tabbar配置

经常游荡于各种小程序的使用者来说，你会发现很多小程序都会有底部Tabbar方便用户更高效地找到入口。

比如下图的穗康小程序(疫情下, 无论如何都要保住我的绿码)，Tabbar有2个选项卡: 首页 + 我的。

接下来我们就看看Taro中要如何实现这两个选项卡。

src-> pages下新建mine文件夹, 包含如下文件信息 ```vue // index.vue

// index.config.ts export default definePageConfig({ navigationBarTitleText: ‘我的’ })


- 新增resources文件夹，添加tabbar的默认图(小图标可从iconfont中下载，感兴趣可戳: [阿里巴巴矢量图标库](https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2))

**       Tips:** iconPath中的图片路径resources必须跟app.configs.ts同层级，不然会报错:  ["tabBar"]["list"][0]["iconPath"]: "resources/home.png" 未找到.<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/1607809/1650422273670-0705c377-d97e-4e3c-bef8-10389d10a509.png#clientId=ufdcd229d-bf1c-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=463&id=u4bf76399&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1196&originWidth=1300&originalType=binary&ratio=1&rotation=0&showTitle=false&size=314195&status=done&style=none&taskId=u988d50ab-09cb-4091-9ef1-b5a0b02d65e&title=&width=503)

- 修改app.config.ts文件，具体改动点如下
```vue
export default defineAppConfig({
    // 新增
    tabBar: {
      list: [
        {
          iconPath: 'resources/home.png',
          selectedIconPath: 'resources/home_selected.png',
          pagePath: 'pages/index/index',
          text: '首页'
        },
        {
          iconPath: 'resources/mine.png',
          selectedIconPath: 'resources/mine_selected.png',
          pagePath: 'pages/mine/index',
          text: '我的'
        }
      ],
      color: '#000',
      selectedColor: '#56abe4',
      backgroundColor: '#fff',
      borderStyle: 'white'
    }
  })

至此配置已经完成，我们看看tabbar切换效果图吧:

功能实现了，但样式有点丑耶，先忽略，哈哈哈哈哈～

Taro路由

多种跳转方式: switcchTab()/reLaunch()/redirectTo/navigateTo/navigateBack

Taro基础 - 图5

演示: 通过navigateTo()跳转的，如何在目标页面中获取参数以及如何返回至上一级页面？

修改pages/index/index.vue文件，新增点击事件支持navigateTo跳转 ```vue


- 新建pages/detail/index页面
```vue
<template>
  <view class="index">
    我是详情页
    <nut-button type="primary" @click="goBack()">点击返回上一级页面</nut-button>
  </view>
</template>

<script>
import { onBeforeMount, onMounted } from 'vue'
import Taro from '@tarojs/taro'

export default {
  name: 'Detail',
  setup(){
    // 页面初始化时把 getCurrentInstance() 的结果保存下来供后面使用, 而不是频繁地调用此 API。
    // But在setup()函数中不能使用this, 因为组件实例尚未被创建, 为了避免我们的错误使用, setup函数中this直接被修改成了undefined.
    const currInstance = Taro.getCurrentInstance()

    onMounted (() =>{
      console.log('路由接收参数', currInstance.router.params)
    })

    const goBack = () =>{
      Taro.navigateBack()
    }

    return {
      goBack
    }
  },
}
</script>

在app.config.ts中配置该页面路径
```
pages: [
  ...,
  'pages/detail/index'
]
```
我们来看下效果:
你会发现页面参数跟我们在跳转的时候带过去的一致，是正确的。
点击详情页的返回上一级页面，成功回到首页，是正确的。

扩展: 若将跳转详情页的api改成是Taro.navigateTo()，你就会发现右上角的返回变成了home键，如下图(因为第一层级是pages/index/index, navigateTo使原有的页面不被保留, 故详情页变成了第一层级页面，故没有上一级的返回了，就是home键)。

写在最后

看到这里，复盘下下面几点是否都已掌握，愉快学习。

:::info

清晰如何封装自定义组件&自定义组件如何通信?
清晰如何配置tabbar
清晰如何实现页面跳转&&如何获取跳转参数 :::