「遇见周大侠（网名：程序猿），长沙奥科领航信息技术公司的资深软件开发工程师。他的软件开发系列课件和项目，凝聚了多年的专业积累与热情。每套课件都包含丰富的案例和深入的知识点解析，每一讲都配备了精心设计的课后作业，旨在为热爱编程的你提供最佳编程实践。是教师备课的得力助手，是学生学习的贴心伴侣，亦是毕业设计的灵感源泉。现在，请搜索微信小程序「奥科领航信息技术 」，让我们一起深入代码的世界，探索无限可能！」
本讲内容
- 目录结构
- 配置小程序
一、项目的目录结构
1、主体部分
新建一个小程序项目之后，目录结构如下所示：
红色框所示部分是小程序的主体部分。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
文件 | 是否必需 | 作用 |
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共配置 |
app.wxss | 否 | 小程序公共样式表 |
2、自定义页面
一个小程序通常需要由N个自定义的页面来承载其功能。
页面是在根目录中的app.json中定义的。在app.json中每追加一个页面的声明，开发工具会自动的在/pages目录中创建一个相同名称的子目录，并在子目录中创建四个相关联的文件（但是，如果在app.json中删除一个页面的声明，则开发工具不会自动删除对应的目录和其下的文件，但目录的图标颜色会有所变化）。
pages元素中声明的第一个页面就是首页！！！
一个小程序的页面由四个文件组成，分别是：
文件类型 | 是否必需 | 作用 | 对比 |
js | 是 | 页面逻辑 | 相当于普通Web程序的JavaScript脚本文件。 但是，不能在js文件中使用DOM、BOM。 |
wxml | 是 | 页面结构 | 相当于普通 Web程序的HTML页面。 但是，里面标签和原生的标签有区别，经过了进一步的封装。 |
json | 否 | 页面配置 | 相当于普通 Web程序的JSON文件 |
wxss | 否 | 页面样式表 | 相当于普通 Web程序的CSS样式表。 CSS3中的样式属性几乎都可以全部用在这里！ |
注意：
- 为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名；
- 这四种类型的文件经过编译之后不能被直接访问。
二、配置小程序
- 全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab 等。全局配置会影响到所有的页面！
示例：
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/orders/orders", "pages/cart/cart" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#0000ff", "navigationBarTitleText": "欧柏泰克教务系统", "navigationBarTextStyle":"white" }, "style": "v2", "sitemapLocation": "sitemap.json", "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" },{ "pagePath": "pages/logs/logs", "text": "日志" },{ "pagePath": "pages/orders/orders", "text": "我的订单" },{ "pagePath": "pages/cart/cart", "text": "购物车" }] } } |
在示例代码中，我们改变了顶部导航栏的背景颜色（蓝色）和前景颜色（白色）；创建了底部的导航菜单（首页、日志、我的订单、购物车）。为了不会导致编译错误，需要添加订单和购物车的两个页面（pages/orders/orders、pages/cart/cart）。
预览的效果：
- 页面配置
每一个小程序页面可以使用同名的 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项（即页面配置优先于全局配置）。文件内容为一个 JSON 对象，有以下属性：
属性 | 类型 | 默认值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 导航栏的背景颜色 |
navigationBarTextStyle | string | white | 导航栏标题的文字颜色 |
navigationBarTitleText | string | 导航栏标题文字内容 | |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
enablePullDownRefresh | boolean | false | 是否开启当前页面下拉刷新 |
更多的配置项请见：
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html |
示例：首页页面
index.json：
{ "navigationBarBackgroundColor": "#ff0000", "navigationBarTextStyle": "white", "navigationBarTitleText": "这是首页", "backgroundColor": "#ff0000", "backgroundTextStyle": "light", "enablePullDownRefresh": true } |
index.wxml：
背景不是我们所期望的红色！！！
在这些属性中，特别要指出的是backgroundColor属性。当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中预览时中根本看不到效果。这是因为 backgroundColor 指的是窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。
如果要设置页面背景颜色，得在wxss 中自定义样式，如下：
/*index.wxss*/ page{ background-color: #ff0000; color: white; } |