微信小程序開發之電影預告
阿新 • • 發佈:2019-01-11
開發 作用 app.js ber 自定義 頁面 日期和時間 hat code 一、小程序支持的標簽
1、view:
div和view都是盒模型,默認display:block。
盒模型在布局過程中,一般推薦display:flex的寫法,配合justify-content:center;align-items:center;
的定義實現盒模型在橫向和縱向的居中。
2、text:
除了text文本節點以外的其他節點都無法長按選中
3、icon
icon可以直接用微信組件默認的圖標,默認是iconfont格式的
4、input
input 的類型,有效值:text, number, idcard, digit, time, date 。
5、picker
picker默認支持普通、日期和時間三種選擇器
6、navigator
navigator支持相對路徑和絕對路徑的跳轉,默認是打開新頁面,當前頁面打開需要加redirect;
7、image
小程序的image與HTML5的img最大的區別在於:小程序的image是按照background-image來實現的。
默認image的高寬是320x240。必須通過樣式定義去覆蓋這個默認高寬,auto在這裏不生效
8、button
小程序不支持button:active這種樣式的寫法,button的點擊態通過.button-hover{}的樣式覆蓋,也可修改hover-class為自定義的樣式名。
9、<swiper><swiper> 圖片輪播 樣式和屬性作用在 swiper標簽上
二、文件類型說明
app.json
1、view:
div和view都是盒模型,默認display:block。
盒模型在布局過程中,一般推薦display:flex的寫法,配合justify-content:center;align-items:center;
的定義實現盒模型在橫向和縱向的居中。
2、text:
除了text文本節點以外的其他節點都無法長按選中
3、icon
icon可以直接用微信組件默認的圖標,默認是iconfont格式的
4、input
input 的類型,有效值:text, number, idcard, digit, time, date 。
5、picker
picker默認支持普通、日期和時間三種選擇器
navigator支持相對路徑和絕對路徑的跳轉,默認是打開新頁面,當前頁面打開需要加redirect;
7、image
小程序的image與HTML5的img最大的區別在於:小程序的image是按照background-image來實現的。
默認image的高寬是320x240。必須通過樣式定義去覆蓋這個默認高寬,auto在這裏不生效
8、button
小程序不支持button:active這種樣式的寫法,button的點擊態通過.button-hover{}的樣式覆蓋,也可修改hover-class為自定義的樣式名。
9、<swiper><swiper> 圖片輪播 樣式和屬性作用在 swiper標簽上
app.json
{ "pages":[ //哪個寫在第一位,哪個就是入口文件 "pages/index/index", "pages/user/user", "pages/subject/subject" ], "window":{ //配置小程序頭部的樣式及標題等等 "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "tabBar": { //配置小程序底部tab切換,最少包含2項,且"pagePath" 需在 pages 數組中 "list": [ { "pagePath": "pages/index/index", //這裏的路徑必須和上面pages裏面的路徑一樣 "text": "text", //tab切換的名字 "iconPath": "iconPath", //tab切換名字上面的圖標 "selectedIconPath": "selectedIconPath" //選中時候tab的圖標 }, { "pagePath": "pages/user/user", "text": "user" "iconPath": "iconPath", "selectedIconPath": "selectedIconPath" } ] } }
三、創建文件,在pages上右鍵,新建目錄 -> 新建Page -> 輸入名稱,如user,即可自動創建4種格式的wx文件
微信小程序開發之電影預告