微信小程式02
阿新 • • 發佈：2022-04-06
六、檢視結構 wxml
6.1、wxml概述
從事過網頁程式設計的人知道， HTML 是用來描述當前這個頁面的結構，同樣道理，在小程式中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。
小程式提倡把渲染(頁面展示)和邏輯分離，簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要負責資料的處理，然後再通過一種模板語法來進行介面結構展示。
在檢視層中通過 {{}}語法把一個變數繫結到檢視介面上，稱為資料繫結
<view>{{變數}}</view>
當然僅僅通過資料繫結還不夠的，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用wx:開頭的屬性來表達。wx:if wx:for
邏輯層重新整理資料到檢視層
this.setData({key:value})
一定要手動觸發
js邏輯 wxml
6.2、列表渲染 for 語法：wx:for 迴圈
●wx:for-index可以指定陣列當前下標的變數名 預設名為 index
●wx:for-item 可以指定陣列當前元素的變數名 預設名為 item
●wx:key 可以定義也可以不定義 唯一的識別符號 提高效能
js邏輯 wxml迴圈 1000 測試資料 12--大米手機--2000 測試資料 23--紅米手機--3000 測試資料 6.3、條件渲染
語法：wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該程式碼塊：
6.4、引用(包含)
把模板定義到外部，然後多個頁面間可以共用使用定義的模板WXML結構顯示。
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
WXML 提供兩種檔案引用方式import和include 6.4.1、模板
import 相當於PHP中公共函式 tp common.php
定義用 template
<template name=”名稱”>
wxml語法
呼叫
<template is=”模板定義時name名稱” [data=”{{傳給模板的資料引數}}”] />
import和include區別
○定義方式不一樣
○引用的方式不一樣，include 相當於複製程式碼過來，import相當於呼叫函式
○資料的傳遞不一樣 include 直接獲取js中的資料，import必須通過template data屬性獲取
import定義的外部模板 include定義的名部模板 wxml中呼叫 七、小程式的樣式
7.1、概述
WXSS 用來決定 WXML 的元件應該怎麼顯示。說白了就是樣式
為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程式，WXSS 對 CSS 進行了擴充以及修改。
●新增了尺寸單位
WXSS 在底層支援新的尺寸單位 rpx 響應式尺寸單位
小程式中全屏尺寸數值是 :750rpx
●提供了全域性的樣式和區域性樣式
app.wxss 作為全域性樣式
區域性頁面樣式 page.wxss 僅對當前頁面生效 app.wxss<page.wxss<行級
●此外 WXSS 僅支援部分 CSS 選擇器
7.2、選擇器
目前支援的選擇器有： 7.3、樣式匯入
使用 @import語句可以匯入外聯樣式表，@import 後跟需要匯入的外聯樣式表的絕對對路徑，用 ; 表示語句結束。
在樣式中引入@import 路徑;
第1步：定義外部樣式 第2步：在需要引用樣式的檔案中引入
@import 絕對地址 八、flex
8.1、概述
彈性佈局
w3c在2009年提出來一個新的佈局標準，也是現在目前主流的佈局標準。
Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
8.2、容器
主軸和交叉軸 預設是以水平(x軸)為主軸，垂直(Y軸)為交叉軸
注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
定位是不受影響 flex+position
8.2.1、flex-direction屬性 8.2.2、主軸和交叉軸對齊方式
###### 主軸
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（預設值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
###### 交叉軸
align-items: flex-start | flex-end | center
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
wxss wxml
6.1、wxml概述
從事過網頁程式設計的人知道， HTML 是用來描述當前這個頁面的結構，同樣道理，在小程式中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。
小程式提倡把渲染(頁面展示)和邏輯分離，簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要負責資料的處理，然後再通過一種模板語法來進行介面結構展示。
在檢視層中通過 {{}}語法把一個變數繫結到檢視介面上，稱為資料繫結
<view>{{變數}}</view>
當然僅僅通過資料繫結還不夠的，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用wx:開頭的屬性來表達。wx:if wx:for
邏輯層重新整理資料到檢視層
this.setData({key:value})
一定要手動觸發
js邏輯 wxml
6.2、列表渲染 for 語法：wx:for 迴圈
●wx:for-index可以指定陣列當前下標的變數名 預設名為 index
●wx:for-item 可以指定陣列當前元素的變數名 預設名為 item
●wx:key 可以定義也可以不定義 唯一的識別符號 提高效能
js邏輯 wxml迴圈 1000 測試資料 12--大米手機--2000 測試資料 23--紅米手機--3000 測試資料 6.3、條件渲染
語法：wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該程式碼塊：
6.4、引用(包含)
把模板定義到外部，然後多個頁面間可以共用使用定義的模板WXML結構顯示。
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
WXML 提供兩種檔案引用方式import和include 6.4.1、模板
import 相當於PHP中公共函式 tp common.php
定義用 template
<template name=”名稱”>
wxml語法
呼叫
<template is=”模板定義時name名稱” [data=”{{傳給模板的資料引數}}”] />
import和include區別
○定義方式不一樣
○引用的方式不一樣，include 相當於複製程式碼過來，import相當於呼叫函式
○資料的傳遞不一樣 include 直接獲取js中的資料，import必須通過template data屬性獲取
import定義的外部模板 include定義的名部模板 wxml中呼叫 七、小程式的樣式
7.1、概述
WXSS 用來決定 WXML 的元件應該怎麼顯示。說白了就是樣式
為了適應廣大的前端開發者，WXSS 具有 CSS 大部分特性。同時為了更適合開發微信小程式，WXSS 對 CSS 進行了擴充以及修改。
●新增了尺寸單位
WXSS 在底層支援新的尺寸單位 rpx 響應式尺寸單位
小程式中全屏尺寸數值是 :750rpx
●提供了全域性的樣式和區域性樣式
app.wxss 作為全域性樣式
區域性頁面樣式 page.wxss 僅對當前頁面生效 app.wxss<page.wxss<行級
●此外 WXSS 僅支援部分 CSS 選擇器
7.2、選擇器
目前支援的選擇器有： 7.3、樣式匯入
使用 @import語句可以匯入外聯樣式表，@import 後跟需要匯入的外聯樣式表的絕對對路徑，用 ; 表示語句結束。
在樣式中引入@import 路徑;
第1步：定義外部樣式 第2步：在需要引用樣式的檔案中引入
@import 絕對地址 八、flex
8.1、概述
彈性佈局
w3c在2009年提出來一個新的佈局標準，也是現在目前主流的佈局標準。
Flex 佈局，可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支援，這意味著，現在就能很安全地使用這項功能。
8.2、容器
主軸和交叉軸 預設是以水平(x軸)為主軸，垂直(Y軸)為交叉軸
注意，設為 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
定位是不受影響 flex+position
8.2.1、flex-direction屬性 8.2.2、主軸和交叉軸對齊方式
###### 主軸
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（預設值）：左對齊
flex-end：右對齊
center：居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
###### 交叉軸
align-items: flex-start | flex-end | center
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
wxss wxml