零基础学小程序 —— 全局配置(四)

简介: 零基础学小程序 —— 全局配置(四)

上文我们已经了解了小程序的模板样式,并详细认识了一些基本的语法,新手建议从第一章开始看


零基础学小程序 —— 小程序入门(一)


接下来我们将讲解小程序的全局配置,配置在前面几篇文章中我们在讲解的时候已经简单提过了,这篇文章的目的就是详细讲解一下我们在小程序开发中一些常用或者说是用得上的一些配置。


1.window(全局设置小程序窗口的外观)


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

ded2e880221a4590a9bf45cff4c40bf6.png


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


上面的的图片大概介绍了一下我们的小程序窗口的组成部分,


第一部分是我们的头部导航栏区域;


第二部分就是我们的背景区域,下拉刷新显示;


第三部分就是我们的页面内容


这个三个配置项都在我们的app.json/window里面,想要详细了解可以查看官方文档全局配置 | 微信开放文档

721393860764411dbc4acc55eb9ef6a7.png


1-3 设置导航栏的标题(navigationBarTitleText)


上面我们已经了解了这些配置,接下里这边带领大家来设置一下我们的导航栏标题,


步骤:首先找到app.json -> window -> navigationBarTitleText


4bd434c24ced4df3b824fb6d744cccf7.png


将我们的weixin改成首页


64c7f37954914f97bd9c033ab339ddda.png


1-4 设置导航栏的背景色(navigationBarBackgroundColor)


步骤:首先找到app.json -> window -> navigationBarBackgroundColor


因为我这里上面为了更直观的切图将颜色改成了绿色,现在在改一下改成#5cf


cb0a012f444a46bf817aa20d54c7d9f4.png


1-5 设置导航栏的标题颜色(navigationBarBackgroundColor)


步骤:首先找到app.json -> window -> navigationBarBackgroundColor


这里设置标题颜色跟上面有点不一样,这里有两个参数可以选择,默认是我们的 black


bbb89d7ff075438eb3647ee1c5c71525.png


我们这里可以将它改成white


63398087ddf94d1393b6806caeb4be3e.png


1-6 全局开启下拉刷新功能(enablePullDownRefresh)


下拉刷新我们在我们移动端应该是比较常见的吧,比如我们看朋友圈动态,刷微博都会有我们的下拉刷新,那我们小程序的下拉刷新的实现方式也很简单,


步骤:首先找到app.json -> window -> enablePullDownRefresh


e71c46bd47764703a095350231de58e2.png


我们设置了enablePullDownRefresh为true就可以实现下拉刷新,在实际业务中我们则需要加上对应的事件进行配合。


1-7 设置下拉刷新时窗口的背景色(backgroundColor)


有的同学看见我们下拉的样式可能就会说了,这颜色怎么是白色的,我喜欢粉红色的,颜色可不可以调呀,当然没问题。


步骤:首先找到app.json -> window -> backgroundColor


e42c9bbf90a8498c9228ece5c769d78c.png


这里在使用的时候出现了一点小问题,不知道是什么情况,有时候会出现报错的情况,如果出现


报错我们可以在同级加上这样一段   "miniprogramRoot":"src/",

即可解决


1-8 设置下拉刷新时 loading 的样式(backgroundTextStyle)


那么又有小伙伴会说了,那这个loading可以改变他的样式吗?


没问题。


步骤:首先找到app.json -> window -> backgroundTextStyle


9685385d87e04758b4a9a96eef22913a.png


不过这里的可选值只有 light 和 dark


e2ec2f7c102443f58520722f22d42943.png


1-9 设置上拉触底的距离


到这里可能会有小伙伴又要问了,既然都有下拉刷新了,那我上拉刷新有没有呢?


当然也有了,就像我们刷抖音的时候我们可以上拉看下一条视频,这样的功能在我们小程序肯定是必不可少的啦。


步骤:首先找到app.json -> window -> onReachBottomDistance


默认距离为50px,如果没有特殊需求,使用默认值即可。


到这里我们window下一些常用的基本上已经介绍完了,下面我们介绍一下我们tabBar


2.tabBar(设置小程序底部/顶部的 tabBar 效果)


tabBar 是移动端应用常见的页面效果,用于实现多页面

的快速切换,在我们小程序tabBar一般分为 顶部tabBar和底部tabBar


这里需要注意的是我们的tabBar中只能配置 最少 2 个、最多 5 个 tab 页签,而当渲染顶部 tabBar 时,不显示图标,只会显示文本。


b1a62decdff44d3790e5eb828931bf1f.png


 步骤:首先找到app.json -> tabBar-> list


list的参数


aff97fad440c4ce1b4e4a45279aa1294.png

e0f4c5f4cb624d60bac1112ce9984e51.png


如果想换成顶部呢?


"position":"top"


592971892b6042afbf82b31ec35da772.png


结束


好啦,到这里我们的微信小程序全局配置就讲解完毕了,如果你觉得写的还不错你可以点个关注哦。


相关文章
|
4月前
|
JSON 小程序 数据格式
微信小程序的tabbar怎么配置
微信小程序的tabbar怎么配置
256 2
|
5月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
8天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
5月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
3月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
86 0
|
3月前
|
小程序 开发工具 开发者
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航
48 0
|
5月前
|
JSON 小程序 安全
微信小程序介绍、账号申请、开发者工具目录结构详解及小程序配置
微信小程序介绍、账号申请、开发者工具目录结构详解及小程序配置
|
5月前
|
小程序 Windows
【微信小程序】全局配置和windows节点常用配置
【微信小程序】全局配置和windows节点常用配置
|
5月前
|
JSON 小程序 数据格式
【微信小程序】-- 页面配置(十八)
【微信小程序】-- 页面配置(十八)
【微信小程序】-- 页面配置(十八)
|
5月前
|
小程序
【微信小程序】-- 全局配置 -- tabBar(十七)
【微信小程序】-- 全局配置 -- tabBar(十七)
【微信小程序】-- 全局配置 -- tabBar(十七)
下一篇
无影云桌面