微信小程序开发实战(页面配置)

请添加图片描述

@作者 : SYFStrive

 
请添加图片描述

@博客首页 : HomePage

📜: 微信小程序

📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗

📌:觉得文章不错可以点点关注 👉:专栏连接🔗

💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀

请添加图片描述
在这里插入图片描述
相关专栏

👉 微信小程序(🔥)

全局配置文件及常用的配置项😶‍🌫️

小程序根目录下的 app.json 文件是小程序的全局配置文件。

常用的配置项如 👇

在这里插入图片描述 pages

记录当前小程序所有页面的存放路径
在这里插入图片描述 window

全局设置小程序窗口的外观
在这里插入图片描述 tabBar

设置小程序底部的 tabBar 效果
在这里插入图片描述 style

是否启用新版的组件样式

小程序窗口的组成部分😶‍🌫️

如 👇

在这里插入图片描述

了解 window 节点常用的配置项😶‍🌫️

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色,仅支持 black / white
backgroundColorHexColor#ffffff窗口的背景色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为px

设置导航栏的标题😶‍🌫️

设置步骤:app.json 👉 window 👉 navigationBarTitleText

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

在这里插入图片描述

设置导航栏的背景颜色😶‍🌫️

设置步骤:app.json 👉 window 👉 navigationBarBackgroundColor

需求:把导航栏上的标题,修改成 “小白开发小程序”

效果如👇

在这里插入图片描述

设置导航栏的标题颜色😶‍🌫️

设置步骤:app.json 👉 window 👉 navigationBarTextStyle

需求:把导航栏上的标题颜色,从默认的 black 修改为 white

注意❗: navigationBarTextStyle 的可选值只有 black 和 white

效果如👇

在这里插入图片描述

全局配置下拉刷新😶‍🌫️

概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

设置步骤:app. window 👉 把 enablePullDownRefresh 的值设置为 true

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

在这里插入图片描述

全局配置下拉刷新背景颜色😶‍🌫️

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如何自定义下拉刷新窗口背景色,

设置步骤: app.json 👉 window 👉 为 backgroundColor 指定16进制的颜色值 #66ccff。

注意❗:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

效果如👇

在这里插入图片描述

全局开启下拉刷新Loading的样式😶‍🌫️

当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果 👇

设置步骤为 app.json 👉 window 👉 为 backgroundTextStyle 指定 dark 值。
注意: backgroundTextStyle 的可选值只有 light 和 dark

效果如👇

在这里插入图片描述

上拉触底是移动端的专有名词😶‍🌫️

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。

设置步骤: app.json 👉 window 👉 为 onReachBottomDistance 设置新的数值

注意❗:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

最后

在这里插入图片描述
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪

 

                 相关专栏连接🔗

在这里插入图片描述

下篇文章再见ヾ( ̄▽ ̄)ByeBye

在这里插入图片描述

  • 3
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页
评论

打赏作者

SYFStrive

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值