微信小程序创建项目配置底部导航栏

目录

微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告

最终效果可扫码查看 遇到问题可通过公众号留言反馈

前置条件

申请微信小程序并认证（略） 下载开发者工具，打开后扫码登录（略）

目标计划

底部使用三个Tab，分别是首页、功能中心、我的，点击后上面显示区域切换变化。

素材来源

从阿里通讯图标库下载，颜色、大小等均可调整。下载地址https://www.iconfont.cn/collections/detail?cid=29 素材下载完毕并修改名称后，小程序项目新建images文件夹，将图片拖拽到文件夹中。

导航栏配置

在app.json文件中直接添加tabBar内容即可。更多属性可以查阅微信文档https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置 图片内容的文字版

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#00bfff",
    "borderStyle": "black",
    "list": [{
        "selectedIconPath": "images/home2.png",
        "iconPath": "images/home1.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/more2.png",
        "iconPath": "images/more1.png",
        "pagePath": "pages/logs/logs",
        "text": "功能中心"
      },
      {
        "selectedIconPath": "images/mine2.png",
        "iconPath": "images/mine1.png",
        "pagePath": "pages/index/index",
        "text": "我的"
      }
    ]
  }

}

其中，点击跳转的目录使用的测试路径，后续开发到对应模板会进行替换。