1、開(kāi)發(fā)工具

? ? ? ?從微信公眾平臺(tái)官方網(wǎng)站下載安裝小程序：開(kāi)發(fā)工具下載。這是是基于微信自己的開(kāi)發(fā)者工具，可以實(shí)現(xiàn)同步本地的文件，進(jìn)行開(kāi)發(fā)調(diào)試，項(xiàng)目管理，編譯，動(dòng)態(tài)預(yù)覽和上傳，發(fā)布等功能。由于是基于原生的系統(tǒng)層開(kāi)發(fā)框架，不需要通過(guò)在瀏覽器中運(yùn)行，這與H5開(kāi)發(fā)是不同的，所以document和window等方法不可以使用。

小程序開(kāi)發(fā)者工具界面

相比

? ? ? H5加載時(shí)，需要按順序加載HTML、CSS、JS。然后從服務(wù)器端返回?cái)?shù)據(jù)，最后動(dòng)態(tài)渲染頁(yè)面顯示到瀏覽器。用戶需要等待時(shí)間，影響體驗(yàn)。

? ? 小程序是基于兩個(gè)進(jìn)程同步執(zhí)行并加載。兩個(gè)線程：Appservice Thread和View Thread是基于service層和view層的。甚至Appservice Thread會(huì)更早執(zhí)行，當(dāng)視圖線程加載完，通知Appservice，Appservice 會(huì)把準(zhǔn)備好的數(shù)據(jù)用setData的方法返回給視圖線程。

? ?小程序的這種優(yōu)化策略，可以減少用戶的等待時(shí)間、加快小程序的響應(yīng)速度。

小程序生命周期執(zhí)行流程圖

2、開(kāi)發(fā)語(yǔ)言

小程序自己開(kāi)發(fā)了一套WXML標(biāo)簽語(yǔ)言和WXSS樣式語(yǔ)言，并非直接使用標(biāo)準(zhǔn)的HTML5+CSS3。

WXML

1）標(biāo)簽

WXML在語(yǔ)法上更接近XML語(yǔ)言，遵循SGML規(guī)范，區(qū)別于HTML語(yǔ)言隨意的標(biāo)簽閉合方式，WXML語(yǔ)言必須包括開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽，以image標(biāo)簽為例，以下2種寫法都支持：

<image src='' ?2333 '' /> ? ?或 <image src='' 2333 ''> ? </image>

注意：所有組件與屬性都是小寫，以連字符-連接。

2）文件引入

WXML提供兩種文件引入方式，import和include。區(qū)別在于：import可以引入定義好的template模板，模板是有作用域的；而include就是拷貝一個(gè)公用的代碼片段到目標(biāo)文件中，適合做公共頁(yè)面片的拆分，文件引入在小程序做模塊化拆分的過(guò)程中非常重要。

文件引入兩種方式

WXSS

1）尺寸單位

WXSS支持的單位有px、rem和rpx，其中rem和rpx可以針對(duì)屏幕容器進(jìn)行適配，px則為固定尺寸。

其中1rpx=0.5px，在WXSS和WXML中定義的rpx單位最終會(huì)轉(zhuǎn)換為在手機(jī)端可以識(shí)別的rem單位。

建議：開(kāi)發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

所以工程師拿到750的設(shè)計(jì)稿，在PS中量取的容器大小，可以直接定義為rpx，不需要進(jìn)行2倍尺寸的換算。

view元素的樣式配置

注意：rpx的單位不光在樣式中會(huì)自適應(yīng)，寫在WXML的style里也會(huì)根據(jù)屏幕自適應(yīng)。

2）樣式引入

? 支持樣式引入，格式如下： import "../../wxss/common.wxss";

使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。

示例代碼：

?/** common.wxss **/.small-p{padding:5px;} **/

/** app.wxss **/@import"common.wxss";.middle-p{padding:15px;} **/

3）選擇器

小程序支持的選擇器在官方公布的文檔中包括.class、#id、 element、element,element、::after(注意是雙冒號(hào))、::before這6種選擇器。

小程序?qū)τ?first-child、:last-child、.class-a .class-b{}，甚至更多層級(jí)的嵌套都是支持的。

幾種選擇器

不過(guò)官方并不推薦級(jí)聯(lián)的這種寫法，因?yàn)榭紤]到后面切Native的擴(kuò)展可能，會(huì)沒(méi)辦法支持級(jí)聯(lián)選擇。

所以保險(xiǎn)起見(jiàn)，不建議.class-a .class-b{}這種級(jí)聯(lián)的寫法，以免后期工具過(guò)濾導(dǎo)致頁(yè)面錯(cuò)亂。

3、開(kāi)發(fā)組件封裝

小程序有許多自己獨(dú)立的開(kāi)發(fā)的原生APP組件，可以直接調(diào)用。

H5和小程序組件標(biāo)簽的區(qū)別對(duì)比

先來(lái)簡(jiǎn)單說(shuō)明下：

1）view

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

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

2）text

文本。text 對(duì)應(yīng) span。<text/>組件內(nèi)只支持<text/>嵌套。除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無(wú)法長(zhǎng)按選中.

3）icon

圖標(biāo)。icon可以直接用微信組件默認(rèn)的圖標(biāo)，默認(rèn)是iconfont格式

icon圖標(biāo)對(duì)應(yīng)屬性

4）表單組件

好多啦。。去查文檔咯。。