(一)尺寸單位

當設計稿page的(de)寬度未知時(shí)，假設page内的(de)一個(gè)元素的(de)寬度爲(wéi / wèi)100px，那麽元素的(de)寬度height應該爲(wéi / wèi)：

height rpx=750 rpx*100 px/page px

但是(shì)頁面中這(zhè)樣的(de)寫法肯定有問題，因此使用calc屬性

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

(二)樣式導入

微信小程序支持外部樣式的(de)導入，但有兩個(gè)注意點：
1、通過@import來(lái)導入
2、路徑隻能寫相對路徑

(三)選擇器

小程序中不(bù)支持通配符*，因此初始化時(shí)可以(yǐ)寫上(shàng)所有标簽
但是(shì)例如：.class,#id,element,element,element,nth-child(n),::after,::before等可以(yǐ)使用

(四)小程序中使用less

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

3、在(zài)vs code的(de)設置中進行如下配置：

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

4、在(zài)編寫樣式的(de)地(dì / de)方，新建less文件，然後正常編輯

(五)view和(hé / huò)text标簽

view标簽代替了(le／liǎo)原來(lái)的(de)div标簽，但又多了(le／liǎo)一些新的(de)屬性

text标簽的(de)特點：
1、文本标簽
2、隻能嵌套text
3、長按文字可以(yǐ)複制(隻有該标簽具有此功能) selectable="{{true}}"
4、可以(yǐ)對空格、回車進行編碼 decode="{{true}}"


(六)image圖片标簽

1、src 指定要(yào / yāo)加載的(de)圖片的(de)路徑
圖片存在(zài)默認寬度和(hé / huò)高度 320*240
2、mode 決定圖片和(hé / huò)圖片标簽的(de)寬高做适配
scaleToFill 默認值 不(bù)保持縱橫比縮放圖片，使圖片寬高被拉伸至填滿 image元素
aspectFit 保持寬高比 确保圖片的(de)長邊 顯示出(chū)來(lái)，輪播圖常用
3、小程序中支持用lazy-load進行懶加載
當圖片出(chū)現在(zài)視口上(shàng)下高度三屏的(de)時(shí)候，自己開始加載圖片

(七)swiper輪播組件

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

swiper常用屬性

(八)navigator導航标簽

1、url是(shì)要(yào / yāo)跳轉的(de)頁面路徑，可以(yǐ)相對路徑，可以(yǐ)絕對路徑

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

2、target可以(yǐ)選擇跳轉當前小程序或其他(tā)小程序，屬性隻有self和(hé / huò)minProgram,默認self
3、open-type:跳轉方式
navigator标簽常用屬性

(九)rich-text富文本标簽