微信小程序開發中使用的標簽及詳解

1、view
view都是盒模型，默認display:block。
盒模型在布局過程中，一般推薦display:flex的寫法，配合justify-content:center;align-items:center;的定義實現盒模型在橫向和縱向的居中。
2、text
除了text文本節點以外的其他節點都無法長按選中
3、 icon
icon可以直接用微信組件默認的圖標，默認是iconfont格式的，從WeUI那邊沿襲過來的一種做法。
自定義的icon推薦svg sprite格式或者iconfont。
目前來看，市面上還沒有很好的自動合並單個svg為svg sprite的工具，需要手動拼圖。
4、input
input 的類型，有效值：text, number, idcard, digit, time, date 。
input不需要設置line-height或padding來縱向居中，默認placeholder的文字是居中的。
小程序把checkbox和radio都單獨做成了組件，默認的input只支持輸入文本。
上傳文件在小程序里需要調用chooseImage事件完成;
5、picker
picker默認支持普通、日期和時間三種選擇器。
picker通過bindchange事件來調取range中自定義的數據數據，並展示到頁面中，調用的是系統原生的select。
這里小程序廢棄了select組件，考慮到的是這個組件的交互不適合移動場景，最終用picker代替了。
6、 navigator
navigator支持相對路徑和絕對路徑的跳轉，默認是打開新頁面，當前頁面打開需要加redirect;
navigator僅支持5級頁面的跳轉;
navigator不可跳轉到小程序外的鏈接地址;
在小程序開發工具里，默認打開新頁面，工具左上角有返回按鈕。加上redirect，當前頁打開，不出現返回按鈕。
7、image
小程序的image與HTML5的img最大的區別在於：小程序的image是按照background-image來實現的。
默認image的高寬是320*240。必須通過樣式定義去覆蓋這個默認高寬，auto在這里不生效。(開發者說這樣設置的原因是：如果設置 auto ，頁面布局會因為圖片加載的過程有一個閃的現象(例如高度從 0 到 height )，所以要求一定要設置一個寬度和高度。)
最新的api支持獲取圖片的高寬。不過這里返回的高寬是px單位，不支持屏幕自適應;
圖片包括三種縮放模式scaleToFill、aspectFit、aspectFill和9種裁剪模式，三種縮放模式的實現原理對應如下：

background-size:100% 100%;//不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素

background-size:contain;//保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。

background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
8、button
button的實現方式，button的邊框是用:after方式實現的，用戶如果在button上定義邊框會出現兩條線，需用:after的方式去覆蓋默認值。
小程序不支持button:active這種樣式的寫法，button的點擊態通過.button-hover{}的樣式覆蓋，也可修改hover-class為自定義的樣式名。