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

一、新建项目

二、下载并使用图标

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"

      }

    ]

  }

四、编译完成

参考链接

微信小程序——聊天小程序（从搭建到结束）_微信小程序聊天_星^0^星的博客-CSDN博客

谢谢星^0^星的分享，让我迈出了开发该功能的第一步。