欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 微信小程序模板与配置(三)app.json对小程序进行全局性配置

微信小程序模板与配置(三)app.json对小程序进行全局性配置

2024/10/25 0:36:40 来源:https://blog.csdn.net/qq_54015925/article/details/141352428  浏览:    关键词:微信小程序模板与配置(三)app.json对小程序进行全局性配置

全局配置文件及常用的配置项

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:

  • pages 记录当前小程序所有页面的存放路径
  • window 全局设置小程序窗口的外观
  • tabBar 设置小程序底部的tabBar效果
  • style 是否启用新版的组件样式

一、全局配置-window

1、小程序窗口的组成部分

navigationBar 导航栏区域;

background 背景区域,默认不可见,下拉才显示;

页面的主题区域,用来显示wxml中的布局。

2、了解window节点常用的配置项

3、设置导航栏的标题

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

4、设置导航栏的背景色

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

默认是纯白色,#fff,只支持十六进制的颜色,不支持red等普通文本这样的颜色。

5、设置导航栏的标题颜色

设置步骤:app.json-window-navigationBarTextStyle,默认是黑色,

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

6、全局开启下拉刷新功能

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

设置步骤:app.json-window-wnablePullDownRefresh的值设置为true。默认未开启。

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

模拟器不能100%还原效果,有时可能需要发送到手机预览效果。

7、设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:app.json-window-backgroundColor指定16进制的颜色值#efefef(浅灰色)。效果如下:

8、设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后。默认窗口的loading样式为白色,如果要更改loading样式的效果,设置步骤如下:app.json-window-为backgroundTextStyle指定light值。效果如下:

注意:backgroundTextStyle的可选值只有light和dark。默认为light,可能有的默认是dark(比如我的)

9、设置上拉触底的距离

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

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

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

"onReachBottomDistance": 50

二、全局配置-tabBar

1、什么是tabBar

tabBar是移动端应用常见的页面效果,用于实现页面的快速切换。小程序中通常将其分为:

底部tabBar、顶部tabBar

注意:tabBar中只能配置最少2个、最多5个tab页签

当渲染顶部tabBar时,不显示icon,只显示文本

2、tabBar的6个组成部分

3、tabBar节点的配置项

4、每个tab项的配置选项

代码如下:

"tabBar": {"list": [{"pagePath": "pages/index/index","text": "index"},{"pagePath": "pages/test2/test2","text": "test" }]},

注意:pagePath中路径不要以/开头。比如“ "pagePath": "/pages/test2/test2",会报错.

三、全局配置-案例:配置tabBar

可参考视频:14.全局配置 - tabBar_哔哩哔哩_bilibili

步骤:

1、获取图标

iconfont-阿里巴巴矢量图标库,需要登录下载。

其他网址:https://www.iconfinder.com/,大部分免费,无需登录就可下载。

需要相同的,一张有颜色,一张没有颜色。为了演示效果,我选择不同的图标。

2、放在项目image文件夹下

3、代码实现

 "tabBar": {"list": [{"pagePath": "pages/test2/test2","text": "拼团","iconPath": "pages/image/list.png","selectedIconPath": "pages/image/list1.png"},{"pagePath": "pages/index/index","text": "首页" ,"iconPath": "pages/image/index.png","selectedIconPath": "pages/image/shopping.png"},{"pagePath": "pages/test/test","text": "分类" ,"iconPath": "pages/image/list.png"}]},

4、效果

如果没有定义selectedIconPath属性,选中的时候显示空白:

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com