1. 程式人生 > >微信小程序開發-筆記

微信小程序開發-筆記

指向 tro bool tab 文件 應用程序級別 一個數 ble pos

一、開發文件結構

1.根目錄下有三個文件:app.js,app.json和app.wxss。一個小程序項目必須有的三個描述App的文件。這三個文件是應用程序級別的文件。這3個文件的意義:

表1.1 app.js,app.json和app.wxss文件的含義
文件 必填 作用
app.js 小程序邏輯文件
app.json 小程序配置文件
app.wxss 全局公共樣式文件

2.和這三個應用程序級別文件平行的pages文件夾。一個小程序由若幹個頁面文件構成。每個頁面由4個文件構成,分別是:.js,.json,.wxml和.wxss文件。這4個文件意義:

表1.2 .js,.wxml,.wxss和.json文件的含義
文件 必填 作用
.js 頁面邏輯
.json 頁面配置
.wxml 頁面結構
.wxss 頁面樣式表

二、配置程序:

1.app.json文件是小程序最基本的全局配置文件,它決定頁面文件的路徑(路由)、窗口表現、設置網絡超時時間、設置多Tab等。對於app.json的具體配置如下表:

表2.1 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

表2.2 window屬性及配置
屬性 類型 默認值
描述
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

表2.3 tabBar屬性配置
屬性 類型 必填 默認值 描述
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

表2.4 list屬性
屬性 類型 必填 說明
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

表2.5 networkTimeout屬性
屬性 類型 必填 說明
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

表2.6 page.json的配置屬性
屬性 類型 默認值 描述
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,則頁面整體不能上下滾動

僅是自己在學微信小程序的筆記。

微信小程序開發-筆記