(一)尺寸單位

當(dāng)設(shè)計稿page的寬度未知時，假設(shè)page內(nèi)的一個元素的寬度為100px，那么元素的寬度height應(yīng)該為：

height rpx=750 rpx*100 px/page px

但是頁面中這樣的寫法肯定有問題，因此使用calc屬性

/* 
  calc屬性 css 和 wxss 都支持
    注意：1、750和rpx中間無空格
          2、運算符的兩邊無空格
*/
view{
    width:calc(750rpx*100/375);
}

(二)樣式導(dǎo)入

微信小程序支持外部樣式的導(dǎo)入，但有兩個注意點：
1、通過@import來導(dǎo)入
2、路徑只能寫相對路徑

(三)選擇器

小程序中不支持通配符*，因此初始化時可以寫上所有標(biāo)簽
但是例如：.class,#id,element,element,element,nth-child(n),::after,::before等可以使用

(四)小程序中使用less

原生的小程序并不支持less，但可以通過以下方式實現(xiàn)：
1、打開編輯器vs code
2、安裝插件 easy less

3、在vs code的設(shè)置中進(jìn)行如下配置：

 "less.compile": {
        "outExt": ".wxss"
    }

4、在編寫樣式的地方，新建less文件，然后正常編輯

(五)view和text標(biāo)簽

view標(biāo)簽代替了原來的div標(biāo)簽，但又多了一些新的屬性

text標(biāo)簽的特點：
1、文本標(biāo)簽
2、只能嵌套text
3、長按文字可以復(fù)制(只有該標(biāo)簽具有此功能) selectable="{{true}}"
4、可以對空格、回車進(jìn)行編碼 decode="{{true}}"


(六)image圖片標(biāo)簽

1、src 指定要加載的圖片的路徑
圖片存在默認(rèn)寬度和高度 320*240
2、mode 決定圖片和圖片標(biāo)簽的寬高做適配
scaleToFill 默認(rèn)值 不保持縱橫比縮放圖片，使圖片寬高被拉伸至填滿 image元素
aspectFit 保持寬高比 確保圖片的長邊 顯示出來，輪播圖常用
3、小程序中支持用lazy-load進(jìn)行懶加載
當(dāng)圖片出現(xiàn)在視口上下高度三屏的時候，自己開始加載圖片

(七)swiper輪播組件

1、輪播圖外層容器swiper
2、每一個輪播項swiper-item
3、swiper標(biāo)簽存在默認(rèn)樣式，width:100%;height:150px
4、swiper高度無法實現(xiàn)由內(nèi)容撐開

swiper常用屬性

(八)navigator導(dǎo)航標(biāo)簽

1、url是要跳轉(zhuǎn)的頁面路徑，可以相對路徑，可以絕對路徑

<navigator url="/pages/index/index">輪播圖</navigator>

2、target可以選擇跳轉(zhuǎn)當(dāng)前小程序或其他小程序，屬性只有self和minProgram,默認(rèn)self
3、open-type:跳轉(zhuǎn)方式
navigator標(biāo)簽常用屬性

(九)rich-text富文本標(biāo)簽