微信小程序的文件目录结构
主体文件：以app开头的文件
页面文件：指用来存放页面的文件，小程序中一个页面就对应一个文件夹，所有的页面文件夹都存在在pages文件夹中。需要注意的是，每个页面文件夹中按照之前的js逻辑，DOM结构wxml文件（html改为wxml），css样式（css文件改wxss文件）拆分为三类文件，然后再加上json配置文件，共四种类型文件。其中js和wxml是必须存在的。
其他主要知道的配置知识：
1.如何切换微信渲染模式：webview 还是 Skyline
2.调试工具3.四个主要json配置文件
（1）页面.json - 针对页面级别的配置，例如页面路由或者窗口样式的配置
（2）app.json - 针对项目级别配置，例如配置项目下各个页面的路由或者项目的全局属性
其中，app.json项目配置文件中有几个重要的字段// app.json文件 { "entryPagePath": "pages/index/index", // entryPagePath字段：首页路径配置 "pages": [ // pages字段：用来指定小程序由哪些页面组成，是数组形式，且如果未制定entryPagePath时，则默认数组的第一个路径元素就是小程序的入口路径（首页），路径不需要写文件后缀，系统会自动寻找 "pages/index/index", "pages/list/list", "pages/card/card" ], "window": { // window字段：具体功能见图 1：配置状态栏、导航条、窗口、页面等样式 "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "tabBar": { // touchbar图标 "list": [ { "text": "首页", "pagePath": "pages/index/index", "iconPath": "/style/images/anquanbaozhang.png" // 底座没有被选中时候展示的图标 "selectedIconPath": "/style/images/anquanbaozhang.png" // 底座被选中时候的图标 }, { "text": "list", "pagePath": "pages/list/list", "iconPath": "/style/images/kuaijiezhifu.png" } ] }, "style": "v2", "renderer": "skyline", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", // 配置sitemap.json文件的文件名 "lazyCodeLoading": "requiredComponents" }（3）project.config.json - 针对项目后续保存的配置信息
（4）sitemap.json - 提高小程序在微信索引中的概率，该文件并不是必须的，如果不设置则认为小程序中所有页面都可以被搜索
图1. app.json中window字段可以配置dom区域展示图
注意：这个窗口是下拉才会出现的空白，如果不下拉，页面是直接出现在导航条下方的
1.小程序内部常用组件
需要注意的是，小程序和浏览器不同的点在于，小程序中没有DOM和BOM结构，css也只是部分支持样式选择器，因此要搭建页面DOM结构就需要使用微信自己的html，即wxml。 小程序中常见组件：
| 标题 | |
|---|---|
| view组件 | |
| swiper组件 | |
| image组件 | |
| navigator组件 | |
| text组件 | |
| scroll组件 |
2.小程序中的样式
（1）rpx尺寸：rpx是小程序自己的自适应单位，可以认为是微信的一种rem，小程序默认任何型号手机画布都为750rpx （2）全局样式和局部样式：全局样式和局部样式的设置区别就在于它是在app.wxss文件中还是page.wxss文件中。
未完待续。。。 熟悉html模版语法 & css样式设置 & JS逻辑三板斧 对于html模版语法（包括其他前端框架也是一样），我们需要重点关注几个点：静态数据展示（这个很简单）、动态数据绑定、模版中的逻辑运算(列表渲染，if逻辑渲染)
