>[success] # 小程序開發配置文件
1. 生成一個小程序項目后會生成如下四類的配置文件

* [**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 時,數組的第一項代表小程序的初始頁面(首頁)**
* 在開發過程中想固定某個頁進來為自己開發頁可以在如圖位置選擇添加編輯模式,在彈窗中進行設置

3. `window`: 全局的默認窗口展示,用戶指定窗口如何展示,包含**小程序的狀態欄、導航條、標題、窗口背景色**

4. `tabBar`: 客戶端窗口的底部或頂部有 tab 欄可以切換頁面展示,點擊后可以觸發顯示的對應頁面。

* 默認在底部顯示

>[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`文件中
* 可視化配置

>[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] ##### 代碼

* 配置`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存儲
- 頁面跳轉
- 小程序登錄