微信小程式開發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
以上,就是對微信小程式的各個頁面的功能之間的初步認識了。