微信小程序開發-筆記
阿新 • • 發佈:2017-11-10
指向 tro bool tab 文件 應用程序級別 一個數 ble pos
一、開發文件結構
1.根目錄下有三個文件:app.js,app.json和app.wxss。一個小程序項目必須有的三個描述App的文件。這三個文件是應用程序級別的文件。這3個文件的意義:
文件 | 必填 | 作用 |
app.js | 是 | 小程序邏輯文件 |
app.json | 是 | 小程序配置文件 |
app.wxss | 否 | 全局公共樣式文件 |
2.和這三個應用程序級別文件平行的pages文件夾。一個小程序由若幹個頁面文件構成。每個頁面由4個文件構成,分別是:.js,.json,.wxml和.wxss文件。這4個文件意義:
文件 | 必填 | 作用 |
.js | 是 | 頁面邏輯 |
.json | 否 | 頁面配置 |
.wxml | 是 | 頁面結構 |
.wxss | 否 | 頁面樣式表 |
二、配置程序:
1.app.json文件是小程序最基本的全局配置文件,它決定頁面文件的路徑(路由)、窗口表現、設置網絡超時時間、設置多Tab等。對於app.json的具體配置如下表:
屬性 | 類型 | 必填 | 描述 |
pages | String Array | 是 | 設置頁面路徑 |
window | Object | 否 | 設置默認頁面的窗口表現 |
tabBar | Object | 否 | 設置底部tab表現 |
networkTimeout | Object | 否 | 設置網絡超時時間 |
debug | Boolean | 否 | 設置是否開啟debug模式 |
1).pages:
pages接受一個數組,每一項都是字符串,來指定小程序由哪些頁面組成。每一項代表對應頁面的(路徑+文件名)信息,數組的第一項代表小程序的初始頁面。例如:在app.json配置:
{ "pages":[ "pages/index/index" "pages/logs/logs" ] }
2).window
window屬性用於設置小程序的狀態欄、導航條、標題、窗口背景色、具體含義及配置如表2.2
屬性 | 類型 | 默認值 |
描述 |
navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色 |
navigationBarTextStyle | String | white | 導航欄標題顏色,僅支持dark/white |
navigationBarTitleText | String | 無 | 導航欄標題文字內容 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉背景字體、loading圖的樣式、僅支持dark/white |
enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新 |
3).tabBar
tabBar
用於配置小程序的菜單選項。tabBar是一個數組,只能配置最少2個、最多5個tab,tab按數組的順序排序,其具體配置屬性如表2.3
屬性 | 類型 | 必填 | 默認值 | 描述 |
color | HexColor | 是 | tab上的文字默認顏色 | |
selectedColor | HexColor | 是 | tab上的文字選中時顏色 | |
backgroundColor | HexColor | 是 | tab的背景顏色 | |
borderStyle | String | 否 | black | tabBar上邊框的顏色,僅支持black/white |
list | Array | 是 | tab的列表,詳見表2.4 | |
position | String | 否 | bottom | 可選值bottom、top |
tabBar的屬性list是一個數組,數組中的每一項都是一個對象,屬性表如表2.4
屬性 | 類型 | 必填 | 說明 |
pagePath | String | 是 | 頁面路徑,必須在pages中先定義 |
text | String | 是 | tab上按鈕的文字 |
iconPath | String | 是 | 圖片路徑,icon大小限制為40KB,建議尺寸為81px * 81px |
selectediconPath | String | 是 | 選中時的圖片路徑,icon大小限制為40KB,建議尺寸為81px * 81px |
例如:將兩個頁面鏈接指向首頁和日誌頁:
"tabBar":{ "list":[{ "pagePath":"pages/index/index", "text":"首頁" },{ "pagePath":"pages/logs/logs", "text":"日誌" }] }
4).networkTimeout
networkTimeout屬性可以設置各種網絡請求的超時時間,具體屬性如表2.5
屬性 | 類型 | 必填 | 說明 |
request | Number | 否 | wx.request的超時時間,單位毫秒,默認為:60000 |
connectSocket | Number | 否 | wx.connectSocket的超時時間,單位毫秒,默認為:60000 |
uploadFile | Number | 否 | wx.uploadFile的超時時間,單位毫秒,默認為:60000 |
downloadFile | Number | 否 | wx.downloadFile的超時時間,單位毫秒,默認為:60000 |
2.page.json
每一個小程序頁面可以使用.json文件來對本頁面的窗口表現進行配置,頁面中配置項會覆蓋app.json的window中相同的配置項。page.json配置屬性如表2.6
屬性 | 類型 | 默認值 | 描述 |
navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色 |
navigationBarTextStyle | String | white | 導航欄標題顏色,僅支持dark/white |
enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新 |
backgroundTextStyle | String | dark | 下拉背景字體、loading圖的樣式、僅支持dark/white |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
navigationBarTitleText | String | 無 | 導航欄標題文字內容 |
diaableScroll | Boolean | false | 設置為true,則頁面整體不能上下滾動 |
僅是自己在學微信小程序的筆記。
微信小程序開發-筆記