# 百度小程序--配置 ***** ## 一、公用文件 ```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：四個文件為一個小程序頁面服務，切記。。。