>[success] # 小程序开发配置文件
1. 生成一个小程序项目后会生成如下四类的配置文件
![](https://img.kancloud.cn/7c/92/7c927fba1fe622498b7fa5df4547f3cf_202x418.png)
* [**project.config.json**](https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html):项目配置文件, 比如项目名称、appid等;
* [**sitemap.json**](https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html):小程序搜索相关的;
* **[app.json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)**:全局配置,是当前小程序的全局公共配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等
* **[每个页面文件夹中的 .json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)**:页面配置;每一个小程序页面也可以使用同名`.json`文件来对本页面的窗口表现进行配置,页面中配置项会覆盖`app.json`的`window`中相同的配置项
>[danger] ##### app.json
1. `app.json`配置很多具体可以参考官网,其几个常见为例说明
~~~
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
~~~
| 属性 | 类型 | 必填| 描述|
| --- | --- |--- |--- |
| [pages ](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#pages)|String[] | 是 | 页面路径列表|
| [window ](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window)|Object | 否| 全局的默认窗口表现|
| [tabBar](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar) |Object | 否 | 底部 tab | 栏的表现|
| [style](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#style)| string| 否| 指定使用升级后的 weui 样式|
|[sitemapLocation](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#sitemapLocation)|string|是|指明 sitemap.json 的位置|
2. `pages`: 页面路径列表,用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,**小程序中所有的页面都是必须在pages中进行注册的**,**文件名不需要写文件后缀,框架会自动去寻找对应位置的`.json`,`.js`,`.wxml`,`.wxss`四个文件进行处理**
* 注:**未指定 entryPagePath 时,数组的第一项代表小程序的初始页面(首页)**
* 在开发过程中想固定某个页进来为自己开发页可以在如图位置选择添加编辑模式,在弹窗中进行设置
![](https://img.kancloud.cn/35/6d/356d88b4bb01ff6ce2d197448e5230ee_630x499.png)
3. `window`: 全局的默认窗口展示,用户指定窗口如何展示,包含**小程序的状态栏、导航条、标题、窗口背景色**
![](https://img.kancloud.cn/b8/09/b809f40bc4d74c632cbef06a9f9f5425_1066x291.png)
4. `tabBar`: 客户端窗口的底部或顶部有 tab 栏可以切换页面展示,点击后可以触发显示的对应页面。
![](https://img.kancloud.cn/e5/80/e5801f2d8aee414d6a3435b8ad351920_1333x433.png)
* 默认在底部显示
![](https://img.kancloud.cn/08/9a/089a4b9ad0bf62a2815f5c08c26ae358_1416x770.png)
>[danger] ##### 每个页面文件夹中的 .json
1. 页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。定义属于当前页面自己的展示效果
>[danger] ##### 项目配置文件
1. 项目根目录中的`project.config.json`和`project.private.config.json`文件可以对项目进行配置,`project.private.config.json`中的相同设置优先级高于`project.config.json`,但并不是每个字段都生效例如`appid` 只会以`project.config.json`为准
2. 官网建议在`project.private.config.json`配置个人的配置,可以将`project.private.config.json`写到`.gitignore`,因为往往有时候个人的改动尝试忘记了全局应用配置版本,因此分开
3. 开发阶段相关的设置修改优先同步到`project.private.config.json`中,但与最终编译产物有关的设置无法在`project.private.config.json`中生效,界面上的改动也不会同步到`project.private.config.json`文件中
* 可视化配置
![](https://img.kancloud.cn/ca/1d/ca1d16ba364e22a90c5e5771a64cbfca_607x998.png)
>[danger] ##### sitemap.json
1. 小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
* 允许所有
~~~
{
"rules":[{
"action": "allow",
"page": "*"
}]
}
~~~
* 禁止所有
~~~
{
"rules":[ {
"action": "disallow",
"page": "*"
}]
}
~~~
>[info] ## 刷新案例
1. 页面下拉刷新是需要做配置 **[app.json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)** 或者 **[每个页面文件夹中的 .json](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html)** 中`enablePullDownRefresh` 字段开启配置为 `true`
2. 在对应`Page `对象中使用[onPullDownRefresh](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh) 或者[onReachBottom](https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onReachBottom)来监听页面上拉 和下拉刷新
~~~
// 下拉刷新/上拉加载更多
Page({ onPullDownRefresh, onReachBottom })
~~~
3. `onReachBottomDistance` 属性设置距离底部多少可以刷新
>[danger] ##### 代码
![](https://img.kancloud.cn/c6/31/c6311102700b5a8a83ac6bac494aef51_1229x805.png)
* 配置`home.json` 只开启home 页的下拉
~~~
{
"usingComponents": {},
"enablePullDownRefresh": true,
"onReachBottomDistance": 0
}
~~~
* home.js
~~~
// pages/home/home.js
Page({
data:{
listCount:30,
successTop:1
},
// 监听下拉刷新
onPullDownRefresh(){
console.log('触发上拉刷新')
this.setData({
successTop:this.data.successTop+1
})
// 模拟请求
setTimeout(()=>{
// 监听下拉成功失败
wx.stopPullDownRefresh({
success(res){
console.log("刷新成功",res);
},
fail(err){
console.log("刷新失败",err);
}
})
},1000)
},
// 监听页面滚动到底部
onReachBottom(){
console.log('触底')
this.setData({
listCount:this.data.listCount + 30
})
}
})
~~~
* home.wxml 的页面编写
~~~
<view>
<block>
刷新次数{{successTop}}
<text wx:for="{{listCount}}" wx:key="*this">
{{item}}
</text>
</block>
</view>
~~~
- 小程序了解
- webview 是什么
- Native App、Web App、Hybrid App
- 小程序架构模型
- 小程序配置文件
- app.js -- App函数
- 页面.js -- page
- 生命周期????
- 小程序 -- 页面wxml
- 小程序 -- WXS
- 小程序 -- 事件
- 小程序 -- 样式wxss
- 小程序 -- 组件开发
- 小程序 -- 组件插槽
- 小程序 -- 组件的生命周期
- 组件总结
- 小程序 -- 混入
- 小程序基本组件
- text -- 文本
- view -- 视图容器
- button -- 按钮
- image -- 图片
- scroll-view -- 滚动容器
- input -- 双向绑定
- 通用属性
- 小程序常用Api
- 微信网络请求
- 微信小程序弹窗
- 微信小程序分享
- 获取设备信息 / 获取位置信息
- Storage存储
- 页面跳转
- 小程序登录