在進行微信小程序開發過程中，遇到了不少問題，現在總結一下，剛開始寫小程序頁面時經常會使用h5中的一些標籤導致頁面有問題，現在總結一下小程序中的標籤和標籤對應的屬性。
標籤
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事件完成;
小程序CSS裏的 :focus 不生效，需要修改placehoder的樣式，通過placeholder-class=”class”來定義。
.login .input-group input::-webkit-input-placeholder {
color: #c0c0c0;
}
.login .input-group input:focus::-webkit-input-placeholder {
color: transparent;
}
5、picker
picker默認支持普通、日期和時間三種選擇器。
picker通過bindchange事件來調取range中自定義的數據數據，並展示到頁面中，調用的是系統原生的select。
這裏小程序廢棄了select組件，考慮到的是這個組件的交互不適合移動場景，最終用picker代替了。
{{area[index]}}
Page({
data: {
area: ['aa', 'bb', 'cc', 'dd'],
}
})
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種裁剪模式，三種縮放模式的實現原理對應如下：
scaleToFill{
background-size:100% 100%;//不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
}
aspectFit{
background-size:contain;//保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
}
aspectFill{
background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
}
8、button
額外補充下button的實現方式，button的邊框是用:after方式實現的，用戶如果在button上定義邊框會出現兩條線，需用:after的方式去覆蓋默認值。不過這個應該會在最近的開發者工具中修復。
button::after {
content:" ";
width:200%;
height:200%;
border:1px solid rgba(0, 0, 0, 0.2);
}
小程序不支持button:active這種樣式的寫法，button的點擊態通過.button-hover{}的樣式覆蓋，也可修改hover-class爲自定義的樣式名。
9、css3動畫
最新版的開發工具已經支持transition和keyframes動畫。
除了官方公佈的小程序的組件之外，有一些標籤比如，span、em、strong、b也是支持的，只是官方並不推薦使用。
微信小程序的支持平臺
微信小程序的運行環境有 3 個平臺，iOS 的 WebKit（蘋果開源的瀏覽器內核），Android 的 X5 (QQ 瀏覽器內核)，開發時用的 nw.js
| 平臺 | 渲染 | js 運行環境 |
|---|---|---|
| iOS | WKWebView | JavaScriptCore |
| Android | X5 基於 Mobile Chrome 37 內核 | X5 JSCore |
| 開發工具 | Chrome WebView | nw.js |