【小程序入门】微信开发者工具及加载项目结构介绍

上一篇文章中https://blog.csdn.net/u014650759/article/details/90701866，我们已经安装好了微信开发者工具，并导入了一个Demo项目，这篇文章，将就开发者工具进行简单的介绍，方便你开发实用编译器，更好的开发小程序。

1.机型选择：小程序以IPhone7的屏幕尺寸为设计标准，让UI以IPhone7屏幕尺寸来切图。
2.预览界面：写好视图布局后点击编译，视图界面刷新显示
3.编译：代码更改后刷新编译。
4.预览界面：查看编译后的效果，仅限于登录开发工具的开发者本人可以扫码并预览，其他人无法扫码预览。
5.真机调试：扫描生成的二维码，真机进行调试。
6.资源文件：对应项目的文件目录，一般可以在这里进行断点调试。
7.数据存储：显示的是本地存储的数据，对应的相关API是wx.setStorageSync(key,data)
8.视图代码：标组件以子父层级结构呈现，方便查看调试。
9.9-1：代码体积，微信限制 2M 以内。  5-2：ES语法转换，开发中一般不校验合法域名信息 。5-3：域名信息：小程序后台要做配置服务器域名，有request 域名，socket 域名以及uploadFile和downloadFile域名。注意：域名小程序要求必须是https
10.项目信息：展示项目所包含的文件，以及进行相关操作
11.代码区域：进行项目下具体文件的代码编辑

接下来，通过上面打开的项目，可以看到小程序框架以及目录结构，下面开始对代码架构目录做简要介绍：app.js、app.json、app.wxss

1. app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的 API。例如上面的界面展示了该代码文件中，数据存储操作，跳转登录页面，以及获取用户信息。
2. ​app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序的窗口、背景色，配置导航条样式，配置默认标题，添加新的页面后也要在此文件中添加新页面申明。注意该文件不可添加任何注释。
3. app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。其格式和写法，类似于css，不过是css的一个子集，也就是说有些css写法是不支持的。
4. project.config.json是小程序的工具配置文件，可以做一些个性化配置，例如界面颜色、编译配置等等。在工具上做的任何配置都会写入到这个文件，当重新安装时，只要载入同一个项目的代码包，开发者工具就会自动配置，通常无需修改。
5. sitemap.json是用来配置小程序及其页面是否允许被微信索引，当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中，通常无需修改。

这里上面讲解了小程序的项目文件，而小程序的交互是通过页面来进行的，所以同时我们也需要知道，小程序的页面组成，查看page文件夹下的页面文件，可以发现

总结，至此，我们已经大概知道了小程序的开发工具内部区域功能布局，及其项目结构文件介绍。