微信小程式開發day01——小程式的頁面基本認識和屬性
微信小程式學習筆記（1）
一、申請個人賬號
二、安裝開發者工具
三、申請程式
四、閱讀幫助文件
1.簡單認識基本結構以及頁面
app.json【全域性配置】
頁面路徑、介面表現、網路超時時間、底部 tab 等
摘自微信小程式開發者文件的幫助內容：
app.json 配置項列表
| 屬性 |
型別 |
必填 |
描述 |
支援版本 |
| String Array |
是 |
頁面路徑列表 |
||
| Object |
否 |
全域性的預設視窗表現 |
||
| Object |
否 |
底部 tab 欄的表現 |
||
| Object |
否 |
網路超時時間 |
||
| Boolean |
否 |
是否開啟 debug 模式，預設關閉 |
||
| Boolean |
否 |
是否啟用外掛功能頁，預設關閉 |
||
| Object Array |
否 |
分包結構配置 |
||
| String |
否 |
Worker |
||
| Array |
否 |
需要在後臺使用的能力，如「音樂播放」 |
||
| Object |
否 |
使用到的外掛 |
||
| Object |
否 |
分包預下載規則 |
||
| Boolean |
否 |
iPad 小程式是否支援螢幕旋轉，預設關閉 |
描述小程式的頁面資訊，第一項即紅色細線框中的一項為首頁路徑
window
用於設定小程式的狀態列、導航條、標題、視窗背景色。
| 屬性 |
型別 |
預設值 |
描述 |
最低版本 |
| navigationBarBackgroundColor |
HexColor |
#000000 |
導航欄背景顏色，如 |
|
| navigationBarTextStyle |
String |
white |
導航欄標題顏色，僅支援 |
|
| navigationBarTitleText |
String |
導航欄標題文字內容 |
||
| navigationStyle |
String |
default |
導航欄樣式，僅支援以下值： |
微信版本 6.6.0 |
| backgroundColor |
HexColor |
#ffffff |
視窗的背景色 |
|
| backgroundTextStyle |
String |
dark |
下拉 loading 的樣式，僅支援 |
|
| backgroundColorTop |
String |
#ffffff |
頂部視窗的背景色，僅 iOS 支援 |
微信版本 6.5.16 |
| backgroundColorBottom |
String |
#ffffff |
底部視窗的背景色，僅 iOS 支援 |
微信版本 6.5.16 |
| enablePullDownRefresh |
Boolean |
false |
是否全域性開啟下拉重新整理。 |
|
| onReachBottomDistance |
Number |
50 |
頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 |
|
以上就是json配置的基本資訊。
Wxml模板
類似網頁中的html,由標籤、屬性等組成。將常用的小元件進行打包，供開發者使用，有各種各樣的元件，如<map></map> 、<button></button>等類似的，進行組合使用，大大提高開發效率。這也是微信小程式進行開發時候的簡便性。如下圖所示，就是微信的一個比較簡單的wxml的頁面。
微信參考vue和react框架，優化了部分語法，如下所示，就是進行文字渲染。通過在{{變數}}內設定一個變數，然後js在對這個變數進行賦值。（具體內容接下來會學習）
Wxss樣式
類似css的樣式，不過為開發者省去了有關不同螢幕移動端相容性的問題，提供了一個新的換算單位rpx.
App.wxss樣式作用於所有頁面，而特定頁面的如page.wxss則只作用於page頁面。
JS 互動邏輯
優化了部分功能，同時可以通過js呼叫許多api
以上，就是對微信小程式的各個頁面的功能之間的初步認識了。