小程序與HTML5的區別

 

小程序與傳統HTML5仍是有明顯的區別，主要區別在於：

開發工具不一樣：

區別於H5的開發工具+瀏覽器Device Mode預覽的模式，小程序的開發基於本身的開發者工具，能夠實現同步本地文件+開發調試+編譯+預覽+上傳+發佈等一整套流程。

開發語言不一樣：

小程序本身開發了一套WXML標籤語言和WXSS樣式語言，並不是直接使用標準的HTML5+CSS3。

組件封裝不一樣：

小程序獨立出來了不少原生APP的組件，在HTML5須要模擬才能實現的功能，小程序裏能夠直接調用組件。

小程序開發者工具：

微信小程序的開發工具，基於MINA框架(現已取消該名稱)，如今官方公佈的工具名爲微信web開發者工具。小程序開發工具是一種基於Native System系統層的框架，因爲並不是運行在瀏覽器中，因此JavaScript在web中的一些諸如Document、Window等方法沒法使用。

傳統HTML5在加載的時候受限於網絡環境，須要順序加載HTML、CSS、JS，而後返回數據，最後渲染頁面顯示在瀏覽器中。用戶常常須要等待很長時間，體驗會受到影響。

相比之下，小程序的兩個線程：Appservice Thread和View Thread會同時進行、並行加載，甚至Appservice Thread會更早執行，當視圖線程加載完，通知Appservice，Appservice 會把準備好的數據用setData的方法返回給視圖線程。

小程序的這種優化策略，能夠減小用戶的等待時間、加快小程序的響應速度。

WXML

一、標籤

WXML在語法上更接近XML語言，遵循SGML規範，區別於HTML語言隨意的標籤閉合方式，WXML語言必須包括開始標籤和結束標籤，以image標籤爲例，如下2種寫法都支持：

 

 

 

or這裏須要注意的是：全部組件與屬性都是小寫，以連字符-鏈接。

二、wxss 選擇器

HTML5 微信小程序 

div（標籤選擇器） view、text、icon、input、image、navigator（標籤選擇器） 

class(類選擇器) class 

id(id選擇器)（效率最高） id(效率最高) 

element,element(層級選擇器) element,element(層級選擇器) 

：after（僞類選擇器） ：after ：before 

：frist-child等 ：frist-child等(不建議（工具過濾易致使頁面錯亂）) 

.class .class .class .class(不建議（工具過濾易致使頁面錯亂）) 

羣組選擇器 羣組選擇器 

後代選擇器 後代選擇器

三、文件引入

WXML提供兩種文件引入方式，import和include。區別在於：import能夠引入定義好的template模板，模板是有做用域的;而include就是拷貝一個公用的代碼片斷到目標文件中，適合作公共頁面片的拆分。

文件引入在小程序作模塊化拆分的過程當中很是重要。

WXSS

四、尺寸單位

WXSS支持的單位有px、rem和rpx，其中rem和rpx能夠針對屏幕容器進行適配，px則爲固定尺寸。

其中1rpx=0.5px，在WXSS和WXML中定義的rpx單位最終會轉換爲在手機端能夠識別的rem單位。

建議：開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。

因此工程師拿到750的設計稿，在PS中量取的容器大小，能夠直接定義爲rpx，不須要進行2倍尺寸的換算。

view{

font-size:26rpx;

width:400rpx;

height:400rpx;

}

備註：rpx的單位不光在樣式中會自適應，寫在WXML的style裏也會根據屏幕自適應。

1）、樣式引入

看到不少文章說小程序不支持樣式的@import，其實官方公佈的第一個正式開發者工具就已經支持了。

import "../../wxss/common.wxss";

2）、選擇器

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

通過測試，小程序對於:first-child、:last-child、.class-a .class-b{}，甚至更多層級的嵌套都是支持的。

不過官方並不推薦級聯的這種寫法，由於考慮到後面切Native的擴展可能，會沒辦法支持級聯選擇。

因此保險起見，不建議.class-a .class-b{}這種級聯的寫法，以避免後期工具過濾致使頁面錯亂。

組件

小程序在0.10.102800的版本中加入了 textarea，並即將廢棄操做反饋的系列組件。

下面一一來分析下：

一、view

div和view都是盒模型，默認display:block。

盒模型在佈局過程當中，通常推薦display:flex的寫法，配合justify-content:center;align-items:center;的定義實現盒模型在橫向和縱向的居中。

二、text

除了text文本節點之外的其餘節點都沒法長按選中。。

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

三、 icon

icon能夠直接用微信組件默認的圖標，默認是iconfont格式的，從WeUI那邊沿襲過來的一種作法。

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

目前來看，市面上尚未很好的自動合併單個svg爲svg sprite的工具，須要手動拼圖。

四、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;

}

五、picker

picker默認支持普通、日期和時間三種選擇器。

picker經過bindchange事件來調取range中自定義的數據數據，並展現到頁面中，調用的是系統原生的select。

這裏小程序廢棄了select組件，考慮到的是這個組件的交互不適合移動場景，最終用picker代替了。

選擇 北京 上海

{{area[index]}}

Page({

data: {

area: ['中國', '美國', '巴西', '日本'],

}

})

六、 navigator

navigator支持相對路徑和絕對路徑的跳轉，默認是打開新頁面，當前頁面打開須要加redirect;

navigator僅支持5級頁面的跳轉;

navigator不可跳轉到小程序外的連接地址;

登陸頁

在小程序開發工具裏，默認打開新頁面，工具左上角有返回按鈕。加上redirect，當前頁打開，不出現返回按鈕。

七、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;//保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。也就是說，圖片一般只在水平或垂直方向是完整的，另外一個方向將會發生截取。

}

八、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爲自定義的樣式名。

九、css3動畫

最新版的開發工具已經支持transition和keyframes動畫，不用js苦哈哈的寫動畫隊列了。

除了官方公佈的小程序的組件以外，有一些標籤好比，span、em、strong、b也是支持的，只是官方並不推薦使用。

瀏覽器內核

在iOS平臺上，微信的瀏覽器渲染內核是wkwebview;

而在Android平臺上，微信則採用了騰訊QQ瀏覽器2016年4月份發佈的X5內核(blink內核)做爲渲染引擎。

在小程序的開發工具上，小程序的JavaScript是運行在chrome內核(nwjs)中。

autoprefixer

小程序會在接下來的版本中加入自動補全css前綴，使用的插件是postcss的autoprefixer，設置的兼容級別是> ios 8及> android 4.1。

const browserOptions = {

browsers: [

'last 3 versions',

'ios >= 8',

'android >= 4.1',

]

}

也就是說，咱們在寫css的時候只須要寫沒有前綴的寫法。好比：display:flex，工具自動編譯爲display:flex;display:-webkit-flex。

OM小程序實戰

上圖爲OM小程序的開發界面。下面咱們從佈局、智能裁圖和loading動畫幾個方面簡單說下OM小程序具體的UI開發經驗。

一、flex佈局

以上圖om的文章列表爲例，文章的形態包括純文字的和圖文混合的。圖文混合的文字不論是1行仍是2行都須要相對於圖片縱向居中。用flex的佈局，就能夠實現這3種狀態不修改CSS文件，只按需隱藏DOM結構就搞定。

.media {

display: flex;

justify-content:center;//設置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

align-items:center;//定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。

}

.media .content {

flex: 1;

}

在作傳統H5的時候，爲了兼容各類低端設備的機型，一般不太敢輕易嘗試flex，但在小程序裏就能夠大膽的使用了。

二、css3動畫改變默認loading

小程序默認提供的loading是普通的菊花loading，這裏OM使用自定義的keyframes序列幀動畫。

.icon-loading {

animation: loadingWhite 1.2s infinite linear;

animation-timing-function: steps(10);

}

@keyframes loadingWhite {

0% {

background-position:0 0;

}

100%{

background-position:-500rpx 0;

}

}

微信小程序集成了不少原生APP的組件，從體驗和頁面流暢度來講，都會比HTML5要優秀不少