微信小程序一些常用標(biāo)簽與html的對(duì)應(yīng)關(guān)系

html小程序<div></div><view></view><h1></h1>...<h6></h6><p></p><span></span><view></view><i class="icon"><icon></icon><iput type="text"><input/><iput type="checkbox"><checkbox/><iput type="radio"><radio/><iput type="file"><view bindtab="chooseImage"><a href="#"></a><navigator url="#" redirect></navigator ><img src=""><image src="" ></image >

1、view

div和view都是盒模型，默認(rèn)display:block。

盒模型在布局過程中，一般推薦display:flex的寫法，配合justify-content:center;align-items:center;的定義實(shí)現(xiàn)盒模型在橫向和縱向的居中。

2、text

除了text文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長(zhǎng)按選中。。

截止到0.10.102800的開發(fā)者工具text支持嵌套text，不過有class的text會(huì)被面板過濾，樣式不影響。

* 友情提示!

3、 icon

icon可以直接用微信組件默認(rèn)的圖標(biāo)，默認(rèn)是iconfont格式的，從WeUI那邊沿襲過來的一種做法。

自定義的icon推薦svg sprite格式或者iconfont。

目前來看，市面上還沒有很好的自動(dòng)合并單個(gè)svg為svg sprite的工具，需要手動(dòng)拼圖。

4、input

input 的類型，有效值：text, number, idcard, digit, time, date 。

input不需要設(shè)置line-height或padding來縱向居中，默認(rèn)placeholder的文字是居中的。

小程序把checkbox和radio都單獨(dú)做成了組件，默認(rèn)的input只支持輸入文本。

上傳文件在小程序里需要調(diào)用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默認(rèn)支持普通、日期和時(shí)間三種選擇器。

picker通過bindchange事件來調(diào)取range中自定義的數(shù)據(jù)數(shù)據(jù)，并展示到頁面中，調(diào)用的是系統(tǒng)原生的select。

這里小程序廢棄了select組件，考慮到的是這個(gè)組件的交互不適合移動(dòng)場(chǎng)景，最終用picker代替了。

選擇 北京 上海

{{area[index]}}

Page({

data: {

area: ['中國(guó)', '美國(guó)', '巴西', '日本'],

}

})

6、 navigator

navigator支持相對(duì)路徑和絕對(duì)路徑的跳轉(zhuǎn)，默認(rèn)是打開新頁面，當(dāng)前頁面打開需要加redirect;

navigator僅支持5級(jí)頁面的跳轉(zhuǎn);

navigator不可跳轉(zhuǎn)到小程序外的鏈接地址;

登錄頁

在小程序開發(fā)工具里，默認(rèn)打開新頁面，工具左上角有返回按鈕。加上redirect，當(dāng)前頁打開，不出現(xiàn)返回按鈕。

7、image

小程序的image與HTML5的img最大的區(qū)別在于：小程序的image是按照background-image來實(shí)現(xiàn)的。

默認(rèn)image的高寬是320*240。必須通過樣式定義去覆蓋這個(gè)默認(rèn)高寬，auto在這里不生效。(開發(fā)者說這樣設(shè)置的原因是：如果設(shè)置 auto ，頁面布局會(huì)因?yàn)閳D片加載的過程有一個(gè)閃的現(xiàn)象(例如高度從 0 到 height )，所以要求一定要設(shè)置一個(gè)寬度和高度。)

最新的api支持獲取圖片的高寬。不過這里返回的高寬是px單位，不支持屏幕自適應(yīng);

圖片包括三種縮放模式scaleToFill、aspectFit、aspectFill和9種裁剪模式，三種縮放模式的實(shí)現(xiàn)原理對(duì)應(yīng)如下：

scaleToFill{

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

}

aspectFit{

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

}

aspectFill{

background-size:cover;//保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。

}

8、button

額外補(bǔ)充下button的實(shí)現(xiàn)方式，button的邊框是用:after方式實(shí)現(xiàn)的，用戶如果在button上定義邊框會(huì)出現(xiàn)兩條線，需用:after的方式去覆蓋默認(rèn)值。不過這個(gè)應(yīng)該會(huì)在最近的開發(fā)者工具中修復(fù)。

button::after {

content:" ";

width:200%;

height:200%;

border:1px solid rgba(0, 0, 0, 0.2);

}

小程序不支持button:active這種樣式的寫法，button的點(diǎn)擊態(tài)通過.button-hover{}的樣式覆蓋，也可修改hover-class為自定義的樣式名。

9、css3動(dòng)畫

最新版的開發(fā)工具已經(jīng)支持transition和keyframes動(dòng)畫，不用js苦哈哈的寫動(dòng)畫隊(duì)列了。

除了官方公布的小程序的組件之外，有一些標(biāo)簽比如，span、em、strong、b也是支持的，只是官方并不推薦使用。

瀏覽器內(nèi)核

在iOS平臺(tái)上，微信的瀏覽器渲染內(nèi)核是wkwebview;

而在Android平臺(tái)上，微信則采用了騰訊QQ瀏覽器2016年4月份發(fā)布的X5內(nèi)核(blink內(nèi)核)作為渲染引擎。

在小程序的開發(fā)工具上，小程序的JavaScript是運(yùn)行在chrome內(nèi)核(nwjs)中。