微信小程序案例1——制作猫眼电影底部标签导航栏

文章目录


一、项目步骤

1 新建一个无AppID的movie项目

2将准备好的底部标签导航图标拷贝到movie项目下面(将图标文件夹image放到项目文件夹里)

image图

3 打开App.json配置文件,在pages数组里添加4个页面路径:电影"pages/movie/movie"、影院"pages/cinema/cinema"、发现"pages/find/find"、我的"pages/me/me",保存后会自动生成相应的页面文件夹;删除"pages/index/index""pages/logs/logs"页面路径以及对应的文件夹

4 在window数组里配置窗口导航背景颜色为红色(#D53E37),导航栏文字为电影,字体颜色为白色(white)。

backgroundTextStyle(背景文本样式)有light和dark

navigationBarBackgroundColor:导航栏背景颜色

navigationBarTitleText:导航栏标题文字

navigationBarTextStyle:导航栏文本样式

5 在tabBar对象里配置底部标签导航背景色为灰色(#f5f5f5),文字默认颜色为白色(white),选中时为红色(#D53E37),在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标。

二 tabBar导航栏讲解

tabBar 字段:定义小程序顶部、底部 tab 栏,用以实现页面之间的快速切换,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性 类型 必填 默认值 描述
color HexColor tab 上的文字默认颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
borderStyle string black tabbar 上边框的颜色, 仅支持 black / white
list Array tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab
position string bottom tabBar 的位置,仅支持 bottom / top

其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下

属性 类型 必填 描述
pagePath string 页面路径,必须在 pages 中先定义
text string tab 上按钮文字
iconPath string 图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。
selectedIconPath string 选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。

代码示例app.json

复制代码
{
  "pages":[
    "pages/movie/movie",
    "pages/cinema/cinema",
    "pages/find/find",
    "pages/me/me"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D53E37",
    "navigationBarTitleText": "电影",
    "navigationBarTextStyle":"white"
  },
  "tabBar": {
    "selectedColor": "#D53E37",
    "backgroundColor": "#f5f5f5",
    "borderStyle": "white",
    "list": [{
      "pagePath": "pages/movie/movie",
      "text": "电影",
      "iconPath": "images/bar/movie-0.jpg",
      "selectedIconPath": "images/bar/movie-1.jpg"
    },{
      "pagePath": "pages/cinema/cinema",
      "text": "影院",
      "iconPath": "images/bar/cinema-0.jpg",
      "selectedIconPath": "images/bar/cinema-1.jpg"
    },{
      "pagePath": "pages/find/find",
      "text": "发现",
      "iconPath": "images/bar/find-0.jpg",
      "selectedIconPath": "images/bar/find-1.jpg"
    },{
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "images/bar/me-0.jpg",
      "selectedIconPath": "images/bar/me-1.jpg"
    }]
  }
}

三 页面配置

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是:页面|配置文件的属性和 全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项,页面中配置项 会覆盖全局配置文件中相同的配置项。

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle string white 导航栏标题、状态栏颜色,仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮。
homeButton boolean false 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
backgroundColor HexColor #ffffff 窗口的背景色
backgroundColorContent HexColor #RRGGBBAA 页面容器背景色
backgroundTextStyle string dark 下拉 loading 的样式,仅支持 dark / light
backgroundColorTop string #ffffff 顶部窗口的背景色,仅 iOS 支持
backgroundColorBottom string #ffffff 底部窗口的背景色,仅 iOS 支持
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离,单位为px。
pageOrientation string portrait 屏幕旋转设置,支持 auto / portrait / landscape
disableScroll boolean false 设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置
usingComponents Object 页面自定义组件配置
initialRenderingCache string 页面初始渲染缓存配置,支持 static / dynamic
style string default 启用新版的组件样式
singlePage singlePage 单页模式相关配置
restartStrategy string homePage 重新启动策略配置
handleWebviewPreload string static 控制预加载下个页面的时机。支持 static / manual / auto
visualEffectInBackground string 切入系统后台时,隐藏页面内容,保护用户隐私。支持 hidden / none,若对页面单独设置则会覆盖全局的配置
enablePassiveEvent Object或boolean 事件监听是否为 passive,若对页面单独设置则会覆盖全局的配置
renderer string 渲染后端
rendererOptions Object 渲染后端选项
componentFramework string 组件框架

找到对应模块的.json文件:不带window

全局配置app.json

相关推荐
项目題供诗7 小时前
微信小程序开发教程(八)
微信小程序·小程序
拼图20917 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082851 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
海绵宝宝不喜欢侬1 天前
uniapp微信小程序保存海报到手机相册canvas
智能手机·微信小程序·uni-app·canva可画
海绵宝宝不喜欢侬1 天前
【uniapp微信小程序】扫普通链接二维码打开小程序
微信小程序·小程序·uni-app
亮子AI1 天前
【小程序】微信小程序九宫格抽奖动画(完整版)
微信小程序·小程序
文心快码BaiduComate2 天前
我用Comate搭建「公园找搭子」神器,再也不孤单啦~
前端·后端·微信小程序
CocoaKier2 天前
AI让35岁程序员再次伟大
ios·微信小程序·aigc
ZZHow10242 天前
微信小程序开发笔记(01_小程序基础与配置文件)
笔记·微信小程序·小程序
皮皮冰燃2 天前
微信小程序-1-微信开发者工具环境搭建和初始化创建项目
微信小程序·小程序