小程式學習記錄（一）——基本樣式介紹
阿新 • • 發佈：2019-01-05
這些天到處跑面試，結果屢屢碰壁。原因除了技術問題、生活上的問題外，遇到的最大的問題就是沒有 小程式 開發經驗了。於是我搜集了一些小程式的資料，結合慕課網、微信開放平臺相關內容進行學習。這個系列將會從我實際學習中出發，去講述我從學習小程式過程中獲得的內容。
詳細安裝、申請小程式開發KEY的可直接看微信公眾平臺，在這裡我是想直接進行中大型的小程式專案開發，所以我直接把該申請的都申請了。而對於一般入門學習的初學者，我建議可以先不申請APPID等，直接下載安裝微信開發者工具即可。
下圖是開發工具的一個樣式。
簡要說一下，微信小程式和傳統web前端組成其實差不多。
小程式專案由 多個 page 元件 + app.js + app.wxss + app.json + app.wxss 組成。其中 app.js 是公用的 js 程式碼塊
而每個 page 元件中是由 wxml、wxss、js、json 四個檔案組成。
前三個檔案對應web專案中的 HTML、css、js 檔案，wxml 進行頁面 DOM 結構編寫， wxss 進行頁面樣式編寫， js 進行頁面邏輯業務編寫。而 json 則負責匯入相關元件的編寫。
介面解析：
開發介面由三部分組成，頂部導航欄、下拉重新整理介面 background、以及內容區域 pages
以下都是轉至官方API，分別是設定程式標題、程式背景、以及 background 顏色 API
wx.setNavigationBarTitle(OBJECT)
動態設定當前頁面的標題。
OBJECT引數說明：
| 引數 | 型別 | 必填 | 說明 |
|---|---|---|---|
| title | String | 是 | 頁面標題 |
| success | Function | 否 | 介面呼叫成功的回撥函式 |
| fail | Function | 否 | 介面呼叫失敗的回撥函式 |
| complete | Function | 否 | 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行） |
wx.setNavigationBarColor(OBJECT)
基礎庫 1.4.0 開始支援，低版本需做
相容處理。
OBJECT引數說明：
| 引數名 | 型別 | 必填 | 說明 |
|---|---|---|---|
| frontColor | String | 是 | 前景顏色值，包括按鈕、標題、狀態列的顏色，僅支援 #ffffff 和 #000000 |
| backgroundColor | String | 是 | 背景顏色值，有效值為十六進位制顏色 |
| animation | Object | 否 | 動畫效果 |
| animation.duration | Number | 否 | 動畫變化時間，預設0，單位：毫秒 |
| animation.timingFunc | String | 否 | 動畫變化方式，預設 linear |
| success | Function | 否 | 介面呼叫成功的回撥函式 |
| fail | Function | 否 | 介面呼叫失敗的回撥函式 |
| complete | Function | 否 | 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行） |
wx.setBackgroundColor(OBJECT)
基礎庫 2.1.0 開始支援，低版本需做相容處理。
動態設定視窗的背景色
OBJECT 引數說明：
| 引數 | 型別 | 說明 |
|---|---|---|
| backgroundColor | HexColor | 視窗的背景色 |
| backgroundColorTop | HexColor | 頂部視窗的背景色，僅 iOS 支援 |
| backgroundColorBottom | HexColor | 底部視窗的背景色，僅 iOS 支援 |
通過上面這些 API 我們就可以設定出我們想要的各種樣式的小程式
