微信小程序?qū)W習(xí)2--小程序基本布局

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：71

小程序基本布局

wxml 指的是 Wei Xin Markup Language，是微信團(tuán)隊(duì)以 XML 為基礎(chǔ)，而定義的一套用以實(shí)現(xiàn)小程序頁面布局的標(biāo)記語言，與HTML非常類似。

wxml 常用標(biāo)簽

wxml有一套自已的標(biāo)簽（組件）如 form、input、textarea、button、audio、video、view、text等，其含義與html的標(biāo)簽也是一樣的，其中 view、text 可分別與 html 中的 div、span 對(duì)應(yīng)。

view和text標(biāo)簽的基本使用

<!-- wxml文件 -->
<view class="fruits">
  <view class="item">蘋果</view>
  <view class="item">橘子</view>
  <view class="item">檸檬</view>
</view>
<view>
  <!-- text標(biāo)簽可以通過selectable控制文本的長按選中 -->
  <text selectable>測試文本</text>
</view>

/* wxss文件 */
.fruits {
  display: flex;
}
.fruits .item {
  flex: 1;
  background-color: pink;
  text-align: center;
}

輪播圖組件swiper的基本使用

<swiper indicator-dots="true" circular autoplay>
    <swiper-item>
        <image src="/static/uploads/slide_1.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/static/uploads/slide_2.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image src="/static/uploads/slide_3.jpg"></image>
    </swiper-item>
</swiper>

控制頁面跳轉(zhuǎn)navigator標(biāo)簽的基本使用

<!-- 控制頁面跳轉(zhuǎn)（導(dǎo)航） -->
<!-- 小程序中頁面分為兩類：1、菜單頁面；2、非菜單頁面 -->

<!-- open-type的值如果是switchTab,那么可以跳轉(zhuǎn)到菜單頁面 -->
<navigator open-type="switchTab" url="/pages/index/index">跳轉(zhuǎn)到主頁</navigator> 

<!-- open-type的值如果是navigate，那么可以跳轉(zhuǎn)到非菜單頁面 -->
<navigator open-type="navigate" url="/pages/demo/demo">跳轉(zhuǎn)到Demo頁面</navigator>

<!-- open-type的值是redirect,也是跳轉(zhuǎn)到非菜單頁面，但是頁面沒有返回按鈕 -->
<!-- 如果采用redirect，那么打開的頁面沒有回退按鈕，可以自己添加一個(gè)按鈕實(shí)現(xiàn)跳轉(zhuǎn) -->
<navigator open-type="redirect" url="/pages/demo/demo">跳轉(zhuǎn)到Demo頁面</navigator>

wxss 樣式處理

wxss 指的是 Wei Xin Style Sheet，是微信團(tuán)隊(duì)定義的一套用以實(shí)現(xiàn)小程序布局樣式的層疊樣式表，與CSS非常接近?？梢岳斫獬?wxss 是 css 的一個(gè)子集，也包括選擇器、屬性、值部分，同樣具有層疊的特征。

小程序會(huì)自動(dòng)根據(jù) wxml 文件名，自動(dòng)將 wxss 進(jìn)行加載，例如當(dāng)加載 pages/style/index.wxml 時(shí)，會(huì)自動(dòng)將 pages/style/index.wxss 加載。

小程序的選擇器支持有限

選擇器	樣例	樣例描述
.class	`.intro`	選擇所有擁有 class=“intro” 的組件
#id	`#firstname`	選擇擁有 id=“firstname” 的組件
element	`view`	選擇所有 view 組件
element, element	`view, checkbox`	選擇所有文檔的 view 組件和所有的 checkbox 組件
::after	`view::after`	在 view 組件后邊插入內(nèi)容
::before	`view::before`	在 view 組件前邊插入內(nèi)容

小程序樣式分為全局樣式和局部樣式
- 全局樣式：app.wxss
- 局部樣式：每個(gè)頁面有自己的樣式文件 page.wxss
  - 局部樣式優(yōu)先級(jí)高

<!-- 樣式處理 -->
<!-- 基于class的樣式 -->
<view class="active">樣式處理</view>

<!-- 基于style的樣式 -->
<view style='background: pink;'>Style樣式</view>

注意：

在 wxss 中引入本地資源（圖片、字體）時(shí)，會(huì)報(bào)錯(cuò)，原因是小程序中 wxss 不支持本地資源路徑，只支持網(wǎng)絡(luò)路徑(http:// 或 https://)或者 base64 路徑。

在小程序中字體圖標(biāo)所引入的字體文件路徑為網(wǎng)絡(luò)路徑，且必須為 https 協(xié)議。

@font-face {
  font-family: 'icomoon';
  /** 路徑為網(wǎng)絡(luò)路徑，且需要為 https 協(xié)議 **/
  src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut');
  src:  url('https://static.botue.com/paradise/fonts/icomoon.eot?lzaqut#iefix')       format('embedded-opentype'),
  url('https://static.botue.com/paradise/fonts/icomoon.ttf?lzaqut') format('truetype'),
  url('https://static.botue.com/paradise/fonts/icomoon.woff?lzaqut') format('woff'),
  url('https://static.botue.com/paradise/fonts/icomoon.svg?lzaqut#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}