# 微信小程序--配置 目录结构
[toc]
---
## 1、`project.config.json` 软件配置文件
* 此文件是配置微信开发者工具的，我们使用工具，无需去手动修改此文件
---
## 2、`app.json` 公用配置文件
* 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。
**属性**|**类型**|**必填**|**描述**
---|---|---|---|---
pages|string|是|页面路径列表
window|Object|否|全局的默认窗口
tabBar|Object|否|底部 tab 栏
> 代码示例：
```js
// 记住：json数据里不允许有备注出现。
// 示例里出现的注释，复制到代码中要删除。
{
// 页面路径列表
"pages": [
// 小程序需要的页面，都要在这里配置
// 在这里输入配置，文件夹里会自动生成文件
// 最后一个配置，不允许出现,号
"pages/index/index",
"pages/list/index",
"pages/car/index",
"pages/my/index"
],
// 全局的默认窗口（顶部、中间窗口）
"window": {
"navigationBarBackgroundColor" : "#000000", // 导航栏背景颜色
"navigationBarTextStyle" : "white", // 导航栏标题颜色，仅支持black / white
"navigationBarTitleText": "欧阳克课件", // 导航栏标题文字内容
"backgroundColor" : "#ffffff", // 窗口的背景色
"backgroundTextStyle" : "dark", // 下拉 loading 的样式，仅支持 dark / light
"enablePullDownRefresh" : "false", // 是否开启全局的下拉刷新，默认false
},
// 底部 tab 栏
"tabBar": {
"color" : "#aa33aa", // tab 上的文字默认颜色，仅支持十六进制颜色
"selectedColor" : "#bb33bb", // tab 上的文字选中时的颜色，仅支持十六进制颜色
"backgroundColor" : "cc33cc", // tab 的背景色，仅支持十六进制颜色
"borderStyle" : "black", // tabbar上边框的颜色， 仅支持 black / white
"position" : "bottom", // tabBar的位置，仅支持 bottom / top
// list 最少2个、最多5个 tab
"list": [
{
"pagePath": "pages/index/index", // 页面路径，必须在 pages 中先定义
"text": "首页", // tab 按钮名称
// icon 大小限制为40kb，建议尺寸为 81px * 81px，不支持网络图片。当 postion 为 top 时，不显示 icon。
"iconPath" : "img/1.jpg", // 图片路径
"selectedIconPath" : "img/2.jpg" // 选中时，图片路径
},
{
"pagePath": "pages/list/index",
"text": "商品",
"iconPath" : "img/3.jpg",
"selectedIconPath" : "img/4.jpg"
},
{
"pagePath": "pages/car/index",
"text": "购物车",
"iconPath" : "img/5.jpg",
"selectedIconPath" : "img/6.jpg"
},
{
"pagePath": "pages/my/index",
"text": "我的",
"iconPath" : "img/7.jpg",
"selectedIconPath" : "img/8.jpg"
}
]
}
}
```
---
## 3、`app.wxss` 公用样式文件
* 此文件写法跟css样式一样
* 此文件的样式，在所有的WXML页面都可以使用
* 此文件优先级最低
> 尺寸单位
>> rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
**设备**|**rpx换算px(屏幕宽度/750)**|**px换算rpx(750/屏幕宽度)**
---|---|---|---
iPhone5|1rpx = 0.42px|1px = 2.34rpx
iPhone6|1rpx = 0.5px|1px = 2rpx
iPhone6 P|1rpx = 0.552px|1px = 1.81rpx
* 建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
---
## 4、`app.js` js启动文件
* App() 在此文件里调用，只能调用一次。
* 此文件可以使用js语法。
* js语法，写在方法中。大部分js语法都支持。
**属性**|**类型**|**必填**|**描述**
---|---|---|---|---
onLaunch|function|否|生命周期回调——监听小程序初始化
onShow|function|否|生命周期回调——监听小程序启动或切前台
onHide|function|否|生命周期回调——监听小程序切后台
onError|function|否|错误监听函数
onPageNotFound|function|否|页面不存在监听函数
其他|function|否|开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问
```js
App({
onLaunch(options) {
// 生命周期回调——监听小程序初始化
},
onShow(options) {
// 生命周期回调——监听小程序启动或切前台
},
onHide() {
// 生命周期回调——监听小程序切后台
},
onError(msg) {
// 错误监听函数
},
onPageNotFound(msg) {
// 页面不存在监听函数
},
globalData: '我是自定义变量',
a(){
console.log('我是自定义函数');
}
})
```
---
## 5、前后台定义
* 当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态；
* 当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。
---
## 6、小程序销毁
* 只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
* 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
* 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
---
## 7、`.json` 页面配置文件
* 每一个小程序页面，都有单独的.json配置文件。
* 如果配置了页面单独配置，会覆盖app.json的配置项
**属性**|**类型**|**描述**
---|---|---
navigationBarBackgroundColor|HexColor|导航栏背景颜色
navigationBarTextStyle|string|导航栏标题颜色，仅支持 black / white
navigationBarTitleText|string|导航栏标题文字内容
navigationStyle|string|导航栏样式 仅支持以下值：default / custom
backgroundColor|HexColor|窗口的背景色
backgroundTextStyle|string|下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh|boolean|是否开启当前页面下拉刷新。
```php
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "欧阳克课件",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh" : true
}
```
## 8、`wxss` 页面样式文件
* 此文件写法跟css样式一样
* 此文件的样式，在同名的wxml页面使用
* 此文件优先级高于app.wxss公用样式文件
---
## 9、`.js` 页面逻辑文件
* Page() 在此文件里调用，只能调用一次。
* 此文件可以使用js语法。
* js语法，写在方法中。大部分js语法都支持。
**属性**|**类型**|**描述**
---|---|---
data|Object|页面的初始数据
onLoad|function|生命周期回调——监听页面加载
onShow|function|生命周期回调——监听页面显示
onReady|function|生命周期回调——听页面初次渲染完成
onHide|function|生命周期回调——监听页面隐藏
onUnload|function|生命周期回调——监听页面卸载
onPullDownRefresh|function|监听用户下拉动作
其他|function|开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
```js
Page({
data: {
text: '自定义初始化数据'
},
onLoad(options) {
// 生命周期回调——监听页面加载
},
onShow() {
// 生命周期回调——监听页面显示
},
onReady() {
// 生命周期回调——听页面初次渲染完成
},
onHide() {
// 生命周期回调——监听页面隐藏
},
onUnload() {
// 生命周期回调——监听页面卸载
},
onPullDownRefresh() {
// 监听用户下拉动作
},
ouyangke() {
// 自定义方法
},
ouyang: {
hi: '你们好'
}
})
```
---
## 10、`.wxml` 页面效果文件
* 此文件是显示页面的，可以理解为跟HTML页面一样。
* 此文件不需要html标签、body标签、head标签。
* 此文件不需要引入样式文件和js文件。
* 直接写小程序支持的组件即可。
---
> ps：一个小程序页面，有4个后缀名文件：.json、.wxss、.js、.wxml，每个文件有不同的作用。
> ps：四个文件为一个小程序页面服务，切记。。。
- 序言
- PHP基础
- 认识PHP
- 环境安装
- PHP语法
- 流程控制
- PHP数组
- PHP函数
- PHP类与对象
- PHP命名空间
- PHP7新特性
- PHP方法库
- PHP交互
- 前后端交互
- 项目常规开发流程
- MySQL数据库
- 会话控制
- Ajax分页技术
- 细说函数
- 类与对象
- 对象进阶
- 类与对象进阶
- OOP面向对象
- 设计模式
- 路由与模板引擎
- 异常类
- PHP爬虫
- PHP抓取函数
- PHP匹配函数
- 正则表达式
- PHP字符串函数
- 抓取实战
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安装
- 架构
- 数据库
- 数据库操作
- 视图
- 模版
- 模型
- 杂项
- 命令行
- 交互
- 微信小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- 百度小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- Linux
- 服务器上线流程
- 安装svn
- MySQL
- 认识MySQL
- MySQL函数
- 杂项
- composer依赖管理工具