微信小程序页面配置,基本语法,页面切换,tabbar全局配置
发布时间:2026-09-25 | 浏览:1
在pages文件夹右键建立新的文件夹
哪个page在最上面,默认显示哪页
json要求严格语法,不能有多余的注释和逗号
新建page页之后需要在app.json上注册该页面,该页面才能正常使用
navigationBarBackgroundColor :导航栏背景颜色,支持十六进制颜色值
navigationBarTextStyle :导航栏标题颜色,仅支持"black"或"white"
navigationBarTitleText :导航栏标题文字内容
navigationStyle :导航栏样式,可选"default"或"custom"
backgroundColor :窗口背景色,下拉刷新时可见
backgroundTextStyle :下拉刷新时loading样式,可选"dark"或"light"
enablePullDownRefresh :是否开启下拉刷新,默认false
onReachBottomDistance :页面上拉触底时触发事件的触发距离,单位为px,默认50
disableScroll :设置为true则页面整体不能上下滚动
usingComponents :页面自定义组件配置项
用于提升列表渲染性能,建议使用 唯一且稳定 的字段(如 ID)。
onLaunch : 小程序初始化完成时触发(仅全局触发一次)
onShow : 小程序启动或从后台进入前台时触发
onHide : 小程序隐藏或从前台进入后台时触发
onError : 小程序发生脚本错误或 API 调用失败时触发,并返回错误信息
onLoad : 监听页面加载
onReady : 页面初次渲染完成
onUnload : 页面卸载
当小程序启动后,首先完成小程序的初始化(onLaunch)和显示(onShow),然后页面的加载(onLoad)、显示(onShow)和渲染(onReady')。上面的图形走势
1,< navigator></ navigator >标签(声明式导航)
2,wx.navigateTo(编程式导航)
保留当前页面,跳转到应用内的某个页面,但不能跳到 tabbar 页面(常用),适用于需要保留原页面状态的场景,如从列表页跳转到详情页
3,wx.redirectTo.(编程式导航)
关闭当前页面,跳转到应用内的某个页面,同样不能跳转 tabbar 页面
4,wx.switchTab.(编程式导航)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
5,wx.reLaunch.(编程式导航)
关闭所有页面,打开到应用内的某个页面,适用于需要清空页面栈的场景,如用户退出登录后跳转到登录页。
6, wx.navigateBack .(编程式导航)
wx.navigateBack 用于返回上一页面或多级页面,可通过 delta 参数指定返回的页面数,如果 delta 大于现有页面数,则会返回到首页
7,wx.navigateToMiniProgram.(编程式导航)
wx.navigateToMiniProgram 用于跳转到其他小程序,需要先在当前小程序的 app.json 中声明目标小程序的appId
五,tabbar全局配置及app.json其他配置
必填项,用于指定小程序由哪些页面组成,以数组形式存储页面路径。数组的第一项代表小程序的初始页面,新增或删除页面时都需要修改此数组。
用于设置小程序的状态栏、导航栏、标题和窗口背景色。其子配置项包括:
navigationBarBackgroundColor :导航栏背景颜色,仅支持十六进制值。
navigationBarTextStyle :导航栏标题颜色,仅支持 black/white。
navigationBarTitleText :导航栏标题文字内容。
backgroundColor :窗口的背景色。
backgroundTextStyle :下拉背景字体和 loading 图样式,仅支持 dark/light。
enablePullDownRefresh :是否开启全局下拉刷新。
配置小程序底部的 tab 栏效果。主要子配置项包括 list 数组,用于定义每个 tab 项:
color :设置 tab 上文字的默认(未选中)颜色
selectedColor :设置 tab 上的文字选中时的颜色
backgroundColor :设置 tabBar 的背景色
borderStyle :设置 tabBar 上边框的颜色,仅支持 black 或 white
position :设置 tabBar 的位置,可选值为 bottom(底部)或 top(顶部),默认为 bottom
custom :布尔值,是否开启自定义 tabBar,需在代码包中放入自定义 tabBar 组件
list 数组用于定义每个 tab 按钮,最少 2 个、最多 5 个47。每个 tab 项是一个对象,包含以下属性:
pagePath (必填):页面路径,必须在 pages 数组中预先定义
text (必填):tab 上显示的文字
iconPath (可选):未选中时的图标图片路径。图片大小限制为 40kb,建议尺寸为 81px × 81px34
selectedIconPath (可选):选中时的图标图片路径
需要注意的是,当 position 为 top(顶部 tabBar)时,不会显示图标。如果需要更复杂的自定义样式,可以通过设置 custom 为 true 来使用自定义 tabBar 组件。