taro之--页面组件

页面组件​

页面组件是每一项路由将会渲染的页面，Taro 的页面默认放在 src/pages 中，每一个 Taro 项目至少有一个页面组件。在我们生成的项目中有一个页面组件：src/pages/index/index，细心的朋友可以发现，这个路径恰巧对应的就是我们全局配置的 pages 字段当中的值。一个简单的页面组件如下：

• React
• Vue

src/pages/index/index.vue

<template>
  <view> {{ msg }} </view>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Hello World!',
      }
    },
    onReady() {
      console.log('onReady')
    },
  }
</script>

这不正是我们熟悉的 React 和 Vue 组件吗！但还是有两点细微的差别：

1. onReady 生命周期函数。这是来源于微信小程序规范的生命周期，表示组件首次渲染完毕，准备好与视图交互。Taro 在运行时将大部分小程序规范页面生命周期注入到了页面组件中，同时 React 或 Vue 自带的生命周期也是完全可以正常使用的。
2. View 组件。这是来源于 @tarojs/components 的跨平台组件。相对于我们熟悉的 div、span 元素而言，在 Taro 中我们要全部使用这样的跨平台组件进行开发。

和入口组件一样，每一个页面组件（例如 index.vue）也会有一个页面配置（例如 index.config.js），我们可以在页面配置文件中设置页面的导航栏、背景颜色等参数，一个最简单的页面配置如下：

src/pages/index/index.config.js

export default {
  navigationBarTitleText: '首页',
}