1.4【微信小程序全栈开发课程】原生小程序框架介绍

傷城~ 2023-06-07 13:28 27阅读 0赞

#### 1、打开小程序目录 ####

打开微信开发者工具，我们上一节新建的项目，我圈出来的这个地方就是小程序的目录结构（如果你那里没有显示，可以点击左上方的编辑器来显示）  
![format_png][]

#### 2、原生小程序框架介绍 ####

给大家画了一张图，重要的都在这了~  
![format_png 1][]

#### 3、app.json页面配置文件介绍 ####

> 参考文档，建议大家收藏一下这个小程序文档，后面我们会经常用到~  
> [https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html][https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]

咱们在微信开发者工具中点击app.json文件，先看一下文件中的代码

{ 
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle": "black"
      }
    }

###### （1）pages页面路径列表 ######

pages数组中第一个元素是进入小程序的默认显示页面，在这里，默认显示页面是pages/index/index。

如果我们将pages/logs/logs放在第一个，在微信开发者工具中直接编辑，像下面代码这样，保存代码后（按ctrl+s或者command+s），小程序的默认显示页面就变成了pages/logs/logs

"pages": [
      "pages/logs/logs",
      "pages/index/index"
    ]

![format_png 2][]

###### （2）window全局的默认窗口表现 ######

window里面包含的几项分别代表的是：

*  backgroundTextStyle，下拉 loading 的样式
 *  navigationBarBackgroundColor，导航栏背景颜色
 *  navigationBarTitleText，导航栏标题文字内容
 *  navigationBarTextStyle，导航栏标题颜色

我们来修改一下导航栏背景颜色和导航栏标题颜色，修改后的代码如下：

"window": { 
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "#000000",
      "navigationBarTitleText": "WeChat",
      "navigationBarTextStyle": "white"
    }

保存代码后，模拟器里面的导航栏就变成了黑底白字。  
![format_png 3][]

###### （3）tabBar底部 tab 栏的表现 ######

在我们创建的项目示例中，没有tabBar，需要自己添加，在代码中添加tabBar

{ 
      "pages": [
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window": { 
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTitleText": "Wechat",
        "navigationBarTextStyle": "white"
      },
      "tabBar": { 
        "list": [
          { 
            "pagePath": "pages/index/index",
            "text": "首页"
          },
          { 
            "pagePath": "pages/logs/logs",
            "text": "日志"
          }
        ]
      }
    }

保存代码后，页面中出现了底部tab栏  
![format_png 4][]

其他文件我们先不介绍了，因为后面我们会用mpvue框架，不会直接操作这些文件，我们先了解一下每个文件的功能就可以了~

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 5][]

[format_png]: /images/20230601/b650d54c93a54858b5aa30fb1ad3819a.png
[format_png 1]: /images/20230601/24ff63faf9e547758be2eb2c4b3b381d.png
[https_developers.weixin.qq.com_miniprogram_dev_reference_configuration_app.html]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[format_png 2]: /images/20230601/b4e7a59b3b3a4a459382fa8bf84f6aed.png
[format_png 3]: /images/20230601/ba7a2b5e228d4aa1977464c82237fec9.png
[format_png 4]: /images/20230601/9427e3ec102e468699136f6f0f92b914.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 5]: /images/20230601/30db39cd6d02459295817f77edde5355.png