Taro 的页面同样是继承自 Component 组件基类,每一个页面都拥有自己配置 config,这个配置是针对当前页面配置,配置规范基于微信小程序的页面配置进行制定,所有平台进行统一。
页面文件中的 config 配置,在编译后将生成全局配置文件 app.json。
页面的配置只能设置 全局配置 中部分 window 配置项的内容,页面中配置项会覆盖 全局配置 的 window 中相同的配置项。
配置示例:
export default class Index extends Component {config = {navigationBarBackgroundColor: '#ffffff',navigationBarTextStyle: 'black',navigationBarTitleText: '首页',backgroundColor: '#eeeeee',backgroundTextStyle: 'light'}render () {return (<View className='index'><Text>1</Text></View>)}}
配置项列表
| 属性 | 类型 | 默认值 | 描述 | 
|---|---|---|---|
| navigationBarBackgroundColor | HexColor(十六进制颜色值) | #000000 | 导航栏背景颜色,如 #000000 | 
| navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black / white | 
| navigationBarTitleText | String | 导航栏标题文字内容 | |
| navigationStyle | String | default | 导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮 | 
| backgroundColor | String | 窗口的背景色 | |
| backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light | 
| backgroundColorTop | String | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 
| backgroundColorBottom | String | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 
| enablePullDownRefresh | boolean | false | 是否开启当前页面的下拉刷新。 | 
| onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px | 
| pageOrientation | String | portrait | 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化 | 
| disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动。 只在页面配置中有效,无法在 app.json 中设置  | 
| disableSwipeBack | Boolean | false | 禁止页面右滑手势返回 | 
| usingComponents | Object | 否 | 页面自定义组件配置 | 
各端支持程度如下
| 属性 | 微信小程序 | 百度小程序 | 字节跳动小程序 | 支付宝小程序 | H5 | RN | 
|---|---|---|---|---|---|---|
| navigationBarBackgroundColor | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | 
| navigationBarTextStyle | ✔️ | ✔️ | ✔️ | ✘ | ✔️ | ✔️ | 
| navigationBarTitleText | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | 
| navigationStyle | ✔️(微信客户端 6.6.0) | ✔️(百度 App 版本 11.1.0) | ✔️ | ✘ | ✘ | ✔️ | 
| backgroundColor | ✔️ | ✔️ | ✔️ | ✘ | ✘ | ✔️ | 
| backgroundTextStyle | ✔️ | ✔️ | ✔️ | ✘ | ✘ | ✔️ | 
| backgroundColorTop | ✔️(微信客户端 6.5.16) | ✘ | ✔️ | ✘ | ✘ | ✘ | 
| backgroundColorBottom | ✔️(微信客户端 6.5.16) | ✘ | ✔️ | ✘ | ✘ | ✘ | 
| enablePullDownRefresh | ✔️ | ✔️ | ✔️ | ✔️ | ✘ | ✘ | 
| onReachBottomDistance | ✔️ | ✔️ | ✔️ | ✘ | ✘ | ✘ | 
| pageOrientation | ✔️2.4.0 (auto) / 2.5.0 (landscape) | ✘ | ✘ | ✘ | ✘ | ✘ | 
| disableScroll | ✔️ | ✘ | ✘ | ✘ | ✘ | ✔️ | 
| disableSwipeBack | ✔️ | ✘ | ✘ | ✘ | ✘ | ✘ | 
| usingComponents | ✔️ | ✔️ | ✔️ | ✔️ | ✘ | ✘ | 
其中,usingComponents 一般不需要配置,只有在需要与引用原生小程序组件的时候才需要配置。
