小程序與傳統HTML5的區別

區別於H5的開發工具+瀏覽器Device Mode預覽的模式,小程序的開發基於自己的開發者工具,可以實現同步本地文件+開發調試+編譯+預覽+上傳+發佈等一整套流程。
開發語言不同。小程序自己開發了一套WXML標籤語言和WXSS樣式語言,並非直接使用標準的HTML5+CSS3。組件封裝不同。

小程序獨立出來了很多原生APP的組件,在HTML5需要模擬才能實現的功能,小程序裏可以直接調用組件。

1、標籤

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

or這裏需要注意的是:所有組件與屬性都是小寫,以連字符-連接。2、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(不建議(工具過濾易導致頁面錯亂))
羣組選擇器 羣組選擇器
後代選擇器 後代選擇器

3、文件引入

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

文件引入在小程序做模塊化拆分的過程中非常重要。

WXSS

4、尺寸單位

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裏也會根據屏幕自適應。

2、樣式引入

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

import “…/…/wxss/common.wxss”;

3、選擇器

小程序支持的選擇器在官方公佈的文檔中包括.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,並即將廢棄操作反饋的系列組件。

下面一一來分析下:

1、view

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

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

2、text

除了text文本節點以外的其他節點都無法長按選中。。

截止到0.10.102800的開發者工具text支持嵌套text,不過有class的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: [‘中國’, ‘美國’, ‘巴西’, ‘日本’],

}

})

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);

}

作者:慕工程3455409
鏈接:https://www.imooc.com/article/27529?block_id=tuijian_wz
來源:慕課網

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章