微信聊天窗口页面的开发（第一篇：窗口页面底部tab栏）

拾回程序猿的圈圈∞

已于 2024-11-22 09:35:53 修改

阅读量263

点赞数 2

分类专栏：微信小程序开发文章标签：微信

于 2023-11-15 17:29:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_36344652/article/details/134422123

版权

微信小程序开发专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中新建项目，下载并使用阿里巴巴矢量图标库中的图标，设置页面结构以及实现页面间的跳转，通过`tabBar`配置底部导航栏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、新建项目

二、下载并使用图标

1、下载

根据个人喜好在阿里巴巴矢量图标库中下载图标。

iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

2、项目新建文件夹

项目中新建文件名为icon的文件夹。

3、图标放入文件夹中

照片的名字可以结合整个代码和显示界面一起看，代码在第三章会具体讲解。

三、基础页面

1、添加所需的页面

在全局配置文件app.json中写完pages的配置，保存后会自动生成页面及对应的文件夹。

注意：index页面不要放在最前面,即"pages/index/index"不要放在最前面，以免编译时无法显示配置好的页面。

📝可复制粘贴的代码如下：

  "pages":[

    "pages/home/home",

    "pages/index/index",

    "pages/friends/friends",

    "pages/message/message"

  ],

2、点击图标实现页面跳转

在app.json中添加"tabBar"，编辑窗口页面底部tab栏。

📝可复制粘贴的代码如下：

  "tabBar":{

    "color": "black",

    "selectedColor": "#2c3e50",

    "list": [

      {

        "pagePath": "pages/message/message",

        "text": "消息",

        "iconPath": "icon/chat_outlined.png",

        "selectedIconPath": "icon/chat.png"

      },

      {

         "pagePath": "pages/friends/friends",

         "text": "好友",

         "iconPath": "icon/user_outlined.png",

         "selectedIconPath": "icon/user.png"

      },

      {

          "pagePath": "pages/home/home",

          "text": "主页",

          "iconPath": "icon/home_outlined.png",

          "selectedIconPath": "icon/home.png"

      }

    ]

  }