【微信小程序】-- 页面配置(十八)

简介: 【微信小程序】-- 页面配置(十八)



一、页面配置

  前面已经介绍完了微信小程序的全局配置,通过栗子学习了全局配置的 window 和 tabBar 配置项,也知道了如何美化其样式。接下来就来讲解一下小程序中另外一个配置–页面配置。话不多说,让我们原文再续,书接上回吧。

1、页面配置文件的作用

  小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。

2、页面配置和全局配置的关系

  小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。通过下面栗子来学习一下:

app.json

  首先对全局配置中的 window 进行设置。

{
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTitleText": "我是夜阑的狗",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
}

  注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

cshPageTab.json

  这里以 cshPageTab 为例:

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#2b4b6b"
}

  这里修改了 cshPageTab 页面的 json 格式,将导航栏背景颜色进行改变,由于前面全局配置也对导航栏背景颜色进行更改,这样页面配置和全局配置会产生冲突,这时候小程序就自动以页面配置为准,可以看一下运行效果:

3、页面配置中常用的配置项

  小程序中页面配置有很多配置项,app.json 中的部分配置,也支持对单个页面进行配置,可以在页面对应的 .json 文件来对本页面的表现进行配置。接下来介绍页面配置经常用到的配置项,如下表所示:

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色,如 #000000
navigationBarTextStyle String white 当前页面导航栏标题颜色,仅支持 black / white
navigationBarTitleText String 当前页面导航栏标题文字内容
backgroundColor HexColor #ffffff 当前页面窗口的背景色
backgroundTextStyle String dark 当前页面下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否为当前页面开启下拉刷新的效果
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px

  一般在实际开发中,并不是所有页面都需要下拉刷新,只有列表页面可能需要下拉刷新的效果,所以不推荐在全局配置开启下拉刷新效果,而是那个页面需要该效果,就在该页面 json 文件单独开启即可。

  接下来通过栗子来学习一下这些配置项,具体代码如下:


app.json

  首先对全局配置中的 window 进行设置,在这里关闭全页面下拉刷新效果。

{
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTitleText": "我是夜阑的狗",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100
  },
}

cshPageButton.json

  这里以 cshPageButton 为例,单独开启下拉刷新效果,对页面的导航栏,下拉效果等进行设置:

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "navigationBarBackgroundColor": "#2b4b6b",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "刺客伍六七",
  "backgroundColor": "#ff0000",
  "backgroundTextStyle": "light"
}

  自此,就完成了整个页面配置,来看一下实际运行效果:


总结

  感谢观看,这里就是页面配置的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
57 1
|
3月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
41 1
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
32 0
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
551 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
672 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
117 7