微信小程序学习笔记②——页面和主体[app.json+模拟QQ的tabBar栏]

一支王同学

已于 2022-02-03 18:45:57 修改

阅读量1.5k

点赞数 8

分类专栏：微信小程序学习笔记文章标签：微信小程序小程序微信小程序学习笔记

于 2022-02-03 10:13:09 首次发布

本文链接：https://blog.csdn.net/Wang_Dou_Dou_/article/details/122758947

版权

微信小程序学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了微信小程序的基础知识，包括页面结构、小程序公共配置及简单首页的创建。讲解了.wxml（结构）、.wxss（样式）、.js（逻辑）文件的作用，并通过实例展示了如何在app.json中配置页面和全局样式。同时，演示了如何设计带有tabBar的首页，包括图标的选择和配置。最后，提供了相关参考资料和后续学习路径。

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

✅ 本以为过年几天我还是能抽出时间来学习学习，太小看亲戚和小孩子们的热情了…

微信小程序开发 🌲

上一篇文章链接: 微信小程序学习笔记①——安装与测试 [输出Hello World]

下一篇文章链接: 微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]

一、页面和主体

● 小程序包含『整体』的 app 文件和多个各自页面的 page。

● 页面：如下图所示，在 “pages” 文件夹里即是编写 “页面” 所在的代码区。我在 pages 文件夹下只建立了一个名为 MyIndex 的 “(页面page)文件夹”。然后这个文件夹里面有 .wxml、.wxss、.js 和 .json 一共 4 样东西。前 3 个东西类似前端的 “三大件”。如下图所示：

在这里插入图片描述

● 如果把写一个 “页面” 比作 “创造一只鸟”，那么 .wxml 的作用就是 “搭建鸟的骨架”，.wxss 的作用是 “给鸟填充肉和毛+上色”，但如果就这样的话，这只鸟只能是一个 “摆设”，所以 .js 登场了，它的作用是在鸟执行 “飞” 这个动作时，它会指示让那几块肌肉动来使得鸟能 “飞”。

● “鸟的三大件” 对应到页面上时，是下图这样子解释的：【『页面』里面的 “.json” 现阶段可以不用管，当涉及到 “父组件和子组件” 的时候会细讲】

文件类型（后缀名）	是否必需添加	作用
.wxml	是	页面结构
.wxss	否	页面样式
.js	是	页面逻辑
.json	否	页面(环境等)配置

● 主体：一般小程序都会有多个页面，那怎么管理这些页面之间的联系呢，就需要最外层的 app 系列文件。如下图所示。

在这里插入图片描述

●『主体结构』控制着整个小程序得到页面布局，如果有 page 页面没有设置样式/结构(即 wxss/json )，将会沿用主体结构里面的样式/结构。

● 和『页面』类似，app 系列文件的功能如下：【注：“app” 这个名字是系统自行取好的】

文件）	是否必需添加	作用
app.wxss	否	小程序公共样式表
app.js	是	小程序逻辑
app.json	是	小程序公共配置

二、小程序公共配置(app.json)

● 在每次运行小程序的时候，编译器都会先去访问并运行 app.json 文件，然后依据里面的内容把整个小程序的公共环境配置好。

在这里插入图片描述

◆ 说明一：页面创建直接在 app.json 文件的 pages 里面添加即可（注意书写格式，如上图所示的①。语法如下面的代码框，注意别用中文）。也可以在资源管理器中右键创建文件。【注意，当创建多个页面时，系统初始展示的界面默认时第一个，即 pages/MyIndex】

"pages": [
    "pages/firstPage/index",
    "pages/secondPage/index",
    "pages/threePage/other"		
  ],

◆ 说明二：app.json 文件里面除了 pages 数组，还有 window 对象。语法如下面的代码框，有点像 Python里面的字典，比如对于 “"navigationBarTitleText": "Weixin"” 而言，前面的 “"navigationBarTitleText"” 是 “键(key)”，后面的 “"Weixin"” 是 “值(value)”，它的意思是 → 上图右边演示框里面的白色的“weixin”这个文本内容。

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff1111",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "white"
  },

● 对于『全局配置(app.json)』的详细内容，可以参考官方文档：《微信小程序全局配置(app.json)》，部分配置信息效果展示如下：

在这里插入图片描述
● JSON 语法的小结：
① 大括号 {} 为对象，大括号包含的内容表示一个对象
② 中括号 [] 为数组，保存一系列的数组元素
③ 数据之间使用英文逗号 , 隔开，最后一个不用加逗号
④ 使用键值对的方式存储值，即 key:value 的形式
⑤ key 的值要用双引号包含""
⑥ .json 文件里面不能写注释。

三、简单的首页

● 今天我们最后来实现一个简单的首页设计。很多小程序的最下面都有一些『首页』、『我的』等一些图标，如下如所示。这些功能就是通过 tabBar 来实现的（也就是上面的右边那张图），而 tabBar下面的 icon 图标大小限制为 40KB。

在这里插入图片描述

◆ 对于 icon 图标，这个网站有很多是免费的，也做的很好：iconfont阿里巴巴矢量图标库

◆ 关于 tabBar 的官方文档：《全局配置——tabBar》

● tabBar 的 list 数组至少要求是 2~5 个。其中 pagePath 表示路径，即我们前面创建的页面，text 是内容，iconPath 是图标存储路径（未选中它时），selectedIconPath 也是图标存储路径（选中它时，如上图里面的 “消息”，是被选中的）。

● 样例：设计和 QQ 类似的 tabBar 栏，要求图标的 “选中” 和 “未选中” 图片不同。素材如下：

● 图片存储位置如下：
在这里插入图片描述

● app.json 的代码如下：【注，最后三行现阶段可以不用管；.wxml、.wxss、.js 等文件可以不用管】

{
  "pages": [
    "pages/MyIndex/index",
    "pages/secondPage/index",
    "pages/threePage/other"		
  ],
  
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff1111",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "white"
  },

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/MyIndex/index",
        "text": "消息",
        "iconPath": "pages/Images/01_消息(未选中).png",
        "selectedIconPath": "pages/Images/01_消息(选中).png"
      },
      {
        "pagePath": "pages/secondPage/index",
        "text": "联系人",
        "iconPath": "pages/Images/02_联系人(未选中).png",
        "selectedIconPath": "pages/Images/02_联系人(选中).png"
      },
      {
        "pagePath": "pages/threePage/other",
        "text": "我的",
        "iconPath": "pages/Images/03_动态(未选中).png",
        "selectedIconPath": "pages/Images/03_动态(选中).png"
      }
    ]
  },
  "style": "v2",    
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}