小程序學習：第一波初識小程序-官方案例

    閒來無事研究研究小程序,畢竟如今辣麼火的一個產品,可是做爲前端盲的我不得不一步一步的跟隨去學習,沒有大神的那種快速入口,跟着官方文檔循序漸進的走吧,本想在小程序中針對每個字段進行註釋描述方便本身去定義學習,可是在小程序裏面的json中不支持,我的又懶得每次登錄微信官方去查看,因此在這裏就進行偷師註釋下,也算是記錄下本身的學習過程了。

  第一步咱們必定是須要一個微信開發者工具：開發者工具下載地址請移步 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 進行工具下載,你可能還須要一個開發者帳號若是你想把你所開發的小程序發佈出來供你們使用的話,小程序帳號註冊請移步https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=1528300445 進行帳號註冊.更詳細的請百度下吧,度娘很強大的說.（其實官方文檔講的很細緻了）

  廢話很少說了,跟着官方所提供的案例進行實現下吧

  這個就是按照官方步驟所實現後的效果,此篇幅主要記錄一些參數的含義

 app.json配置項列表

屬性	類型	必填	描述
pages	String Array	是	設置頁面路徑
window	Object	否	設置默認頁面的窗口表現
tabBar	Object	否	設置底部tab的表現
networkTimeout	Object	否	設置網絡超時時間
debug	Boolean	否	設置是否開啓debug模式

 

pages:用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。

window 參數描述(用於設置小程序的狀態欄,導航條,標題串口背景色等等)

屬性	類型	默認值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如"#000000"
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
navigationStyle	String	default	導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕	微信版本 6.6.0
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
backgroundColorTop	String	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信版本 6.5.16
backgroundColorBottom	String	#ffffff	底部窗口的背景色，僅 iOS 支持
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新	微信版本 6.5.16
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px

 

tabBar:若是小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄能夠切換頁面），能夠經過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面

Tip:

當設置 position 爲 top 時，將不會顯示 icon
tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。

Tip參數描述

屬性	類型	必填	默認值	描述
color	HexColor	是		tab 上的文字默認顏色
selectedColor	HexColor	是		tab 上的文字選中時的顏色
backgroundColor	HexColor	是		tab 的背景色
borderStyle	String	否	black	tabbar上邊框的顏色， 僅支持 black/white
list	Array	是		tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position	String	否	bottom	可選值 bottom、top

其中 list 接受一個數組，數組中的每一個項都是一個對象，其屬性值以下：

屬性	類型	必填	說明
pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字
iconPath	String	否	圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px，當 postion 爲 top 時，此參數無效，不支持網絡圖片
selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px ，當 postion 爲 top 時，此參數無效

networkTimeout

能夠設置各類網絡請求的超時時間。

屬性說明：

屬性	類型	必填	說明
request	Number	否	wx.request的超時時間，單位毫秒，默認爲：60000
connectSocket	Number	否	wx.connectSocket的超時時間，單位毫秒，默認爲：60000
uploadFile	Number	否	wx.uploadFile的超時時間，單位毫秒，默認爲：60000
downloadFile	Number	否	wx.downloadFile的超時時間，單位毫秒，默認爲：60000

debug

能夠在開發者工具中開啓 debug 模式，在開發者工具的控制檯面板，調試信息以 info 的形式給出，其信息有Page的註冊，頁面路由，數據更新，事件觸發 。 能夠幫助開發者快速定位一些常見的問題。

page.json

每個小程序頁面也可使用.json文件來對本頁面的窗口表現進行配置。 頁面的配置比app.json全局配置簡單得多，只是設置 app.json 中的 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

頁面的.json只能設置 window 相關的配置項，以決定本頁面的窗口表現，因此無需寫 window 這個鍵，如：

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如"#000000"
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black/white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark/light
enablePullDownRefresh	Boolean	false	是否開啓下拉刷新，詳見頁面相關事件處理函數。
disableScroll	Boolean	false	設置爲 true 則頁面總體不能上下滾動；只在 page.json 中有效，沒法在 app.json 中設置該項
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位爲px

 

先這樣記錄下吧