# 微信小程序--配置 目錄結構 [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：四個文件為一個小程序頁面服務，切記。。。