使用微信开发者工具新建一个小程序及文件解析及简单微信小程序的页面

在我们下载微信开发者工具后，打开工具，第一次需要扫码登录，登录后，如下图，选择新建一个小程序

我的这个是新建了一个的了，点击加号新建，然后填入信息，项目名称，项目存储的地址，以及注册小程序时的APPID，再选择不使用云服务，语言选择默认的JavaScript

看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图：

---

文件都看过了，接下来就是文件下面的内容了，首先是app.json 全局入口文件 下面是直接生成的代码。
app.json是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部tab等。普通快速启动项⽬⾥边的app.json配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"       
    //该项目的俩个字段表示里面有俩个页面，分别是首页和日志文件，可以在此字段当中添加其目录或者文件。
  ],
  "window": {
    "backgroundTextStyle": "light",   			// 下拉
    "navigationBarBackgroundColor": "#fff",  	//导航栏的背景颜色
    "navigationBarTitleText": "WeChat",  		//导航栏的标题
    "navigationBarTextStyle": "black"  			//文字颜色，只能定义为黑色和白色 black white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

1.pages pages 字段⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序 ⻚⾯定义在哪个⽬录。
2.window window 字段定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等
window的属性挺多的，在该页面浏览：单击跳转
3 tabber属性：定义导航栏属性，页面路径，文字等等，以及color颜色，selectedColor选中后的字体颜色，属性详情：单击跳转

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "主页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    }
    ],
    "color":"#0099ff",
    "selectedColor": "#000000"
  },

在通过使用tabber属性添加导航后，我们可以看到在添加后与很多小程序多差不多了，在下方有一个图片加文字的导航。如下图所示:

---

其次就是页面配置文件 page.json
在其他的.json文件当中，比如在index.json页面当中，在原本的基础上加上属性会对页面外观进行部分改变，代码如下：
除去原有的第一行，给主页面加上了背景色和文字的属性。

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0099aa",
  "navigationBarTitleText": "主页"
}

---

微信索引配置文件 sitemap.json
在该文件下会给出一个网址，该网址会直接指向微信官方的文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

---