页面组件
页面组件是每一项路由将会渲染的页面,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 组件吗!但还是有两点细微的差别:
onReady
生命周期函数。这是来源于微信小程序规范的生命周期,表示组件首次渲染完毕,准备好与视图交互。Taro 在运行时将大部分小程序规范页面生命周期注入到了页面组件中,同时 React 或 Vue 自带的生命周期也是完全可以正常使用的。View
组件。这是来源于@tarojs/components
的跨平台组件。相对于我们熟悉的div
、span
元素而言,在 Taro 中我们要全部使用这样的跨平台组件进行开发。
和入口组件一样,每一个页面组件(例如 index.vue
)也会有一个页面配置(例如 index.config.js
),我们可以在页面配置文件中设置页面的导航栏、背景颜色等参数,一个最简单的页面配置如下:
src/pages/index/index.config.js
export default {
navigationBarTitleText: '首页',
}