小程序(五)[app全局配置和引入vant组件]

全局配置

在小程序 app.json 下进行全局的一个配置。

页面路径配置

在参数 pages 里写页面路径才可以,参数下的第一个就是首页每次小程序打开的时候首先显示的就是第一个,不需要写文件后缀如:

"pages": [
	"pages/index/index.js",
	"pages/index/index.json",
	"pages/index/index.wxml",
	"pages/index/index.wxss"  
]

小程序框架会自动去寻找你的页面文件,只需这样一句即可:

"pages": [
    "pages/index/index"
]

每次新建页面或删除页面都需要到pages数组进行删除或者增加。

窗口表现

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。一般常用的导航栏颜色,标题颜色和标题内容。
在这里插入图片描述
navigationBarBackgroundColor:导航颜色可以自定义所有颜色。
navigationBarTextStyle :标题颜色只支持黑白两色 black / white
navigationBarTitleText :这是标题内容,如首页,团队页面,购物页等等。但是这里配置是全局的,单页面的还要在每个页面内的json文件进行设置,不然每个页面都是首页的标题。
navigationStyle:导航样式默认即可。
在这里插入图片描述

设置底部tab页面

tab导航栏 可以设置底部导航,包括默认和选中后,背景颜色边框颜色,导航位置等等。
color :tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor :tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor : tab 的背景色,仅支持十六进制颜色
borderStyle :tabbar 上边框的颜色, 仅支持 black / white
position : tabBar 的位置,仅支持 bottom / top
在这里插入图片描述
在这里插入图片描述

list

list参数可以设置底部的文字和图标还有选中他们后的样式。最少两个最多五个,就是底部导航的数量。
pagePath:页面路径,必须在 pages 中先定义
text : tab 上按钮文字
iconPath :图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片
selectedIconPath : 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
在这里插入图片描述

自定义组件

usingComponents 可以引入组件进行全局使用,不用在每个页面进行再次声明。
如引入vant组件库,在vant的github上进行下载。
在这里插入图片描述
我们只需要一个dist文件即可,把他复制到我们的小程序项目中。
在这里插入图片描述
在这里插入图片描述
使用usingComponents 进行引用vant的按钮组件,在vant官网也进行了引入介绍,我们只需把路径修改即可使用:

"usingComponents": {
	"van-button": "/dist/button/index"
}

在这里插入图片描述
在index页面使用按钮:
在这里插入图片描述

发布了16 篇原创文章 · 获赞 6 · 访问量 584

猜你喜欢

转载自blog.csdn.net/weixin_44893500/article/details/105418296