區別於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
來源:慕課網