# 百度小程序--配置
*****
## 一、公用文件
```php
1 project.swan.json 软件配置文件
2 app.json 公用配置文件
3 app.js js启动文件
4 前后台定义
5 小程序销毁
6 .json 页面配置文件
7 .css 页面样式文件
8 .js 页面逻辑文件
9 .swan 页面效果文件
```
*****
### 1、 `project.config.json` 软件配置文件
* 此文件是配置开发者工具的，我们使用工具，无需去手动修改此文件
*****
### 2、 `app.json` 公用配置文件
* 可以通过配置 app.json 文件，设置 SWAN 的界面、路径、多 TAB 等。
| **属性** | **类型** | **必填** | **描述** |
| --- | --- | --- | --- |
| pages | string | 是 | 页面路径列表 |
| window | Object | 否 | 全局的默认窗口 |
| tabBar | Object | 否 | 底部 tab 栏 |
>[warning] 代码示例：
```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.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('我是自定义函数');
}
})
```
*****
### 4、前后台定义
* 当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有直接销毁，而是进入了后台状态；
* 当用户再次进入百度APP或再次打开小程序，小程序又会从后台进入前台。
*****
### 5、小程序销毁
* 只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。
* 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）小程序会被微信主动销毁。
* 当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。
*****
### 6、`.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
}
```
### 7、`.css` 页面样式文件
* 此文件写法跟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 作为视觉稿的标准。
*****
### 8、`.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: '你们好'
}
})
```
*****
### 9、`.swan` 页面效果文件
* 此文件是显示页面的，可以理解为跟HTML页面一样。
* 此文件不需要html标签、body标签、head标签。
* 此文件不需要引入样式文件和js文件。
* 直接写小程序支持的组件即可。
*****
>[danger] ps：一个小程序页面，有4个后缀名文件：.json、.css、.js、.swan，每个文件有不同的作用。
> 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依赖管理工具