第3章-用微信小程序組件構(gòu)建UI界面課件

微信小程序簡(jiǎn)明開(kāi)發(fā)教程第3章用微信小程序組件構(gòu)建UI界面3.1視圖容器組件3.2基礎(chǔ)內(nèi)容組件3.3豐富的表單組件3.4導(dǎo)航組件微信小程序簡(jiǎn)明開(kāi)發(fā)教程第3章用微信小程序組件構(gòu)建UI界面3.5媒體組件3.6地圖組件3.7畫(huà)布組件3.8實(shí)戰(zhàn)：表單登錄注冊(cè)微信小程序微信小程序簡(jiǎn)明開(kāi)發(fā)教程

view組件：視圖容器；scroll-view組件：可滾動(dòng)視圖區(qū)域；swiper組件：滑塊視圖容器；

movable-view組件：可移動(dòng)視圖容器；

cover-view組件：覆蓋原生組件的視圖容器；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

view組件：視圖容器；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程scroll-view組件：可滾動(dòng)視圖區(qū)域；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程swiper組件：滑塊視圖容器；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程movable-view組件：可移動(dòng)視圖容器；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程cover-view組件：覆蓋原生組件的視圖容器；3.1視圖容器組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

icon組件：圖標(biāo)；text組件：文本,支持轉(zhuǎn)義符“\“；progress組件：進(jìn)度條；rich-text組件：富文本；3.2基礎(chǔ)內(nèi)容組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

icon組件：圖標(biāo)；3.2基礎(chǔ)內(nèi)容組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程text組件：文本,支持轉(zhuǎn)義符“\“；3.2基礎(chǔ)內(nèi)容組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程progress組件：進(jìn)度條；3.2基礎(chǔ)內(nèi)容組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程rich-text組件：富文本；

rich-text富文本組件，通過(guò)這個(gè)組件可以在WXML頁(yè)面文件顯示一些富文本內(nèi)容，比如HTML一些元素內(nèi)容顯示3.2基礎(chǔ)內(nèi)容組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程button組件：按鈕；checkbox組件：多選選擇器，checkbox-group由多個(gè)checkbox組成；radio組件：?jiǎn)雾?xiàng)選擇器，radio-group由多個(gè)radio組成；form組件：表單；input組件：輸入框；

textarea組件：多行輸入框;

label組件：改進(jìn)表單可用性；

picker組件：滾動(dòng)選擇器；

slider組件：滑動(dòng)選擇器；

switch組件：開(kāi)關(guān)選擇器；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程button組件：按鈕；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程checkbox組件：多選選擇器，checkbox-group由多個(gè)checkbox組成；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程radio組件：?jiǎn)雾?xiàng)選擇器，radio-group由多個(gè)radio組成；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程form組件：表單，將組件內(nèi)的用戶(hù)輸入的<switch/><input/><checkbox/><slider/><radio/>提交;3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程input組件：輸入框；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程textarea組件：多行輸入框;

textarea多行輸入框是與input單行輸入框?qū)?yīng)的一個(gè)組件，它是可以輸入多行文本內(nèi)容；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程label組件：改進(jìn)表單可用性；label組件它是用來(lái)改進(jìn)表單可用性，目前可以用來(lái)改進(jìn)的組件有：<button/>、<checkbox/>、<radio/>、<switch/>。它只有一個(gè)屬性for，是用來(lái)綁定控件的id。

它的使用有兩種方式：一種是定義for屬性，一種是沒(méi)有定義for屬性。3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程picker組件：滾動(dòng)選擇器；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程slider組件：滑動(dòng)選擇器；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程switch組件：開(kāi)關(guān)選擇器；3.3豐富的表單組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程navigator頁(yè)面鏈接組件

wx.navigateTo保留當(dāng)前頁(yè)跳轉(zhuǎn)

wx.redirectTo關(guān)閉當(dāng)前頁(yè)跳轉(zhuǎn)

wx.switchTab跳轉(zhuǎn)到tabBar頁(yè)面

wx.navigateBack返回上一頁(yè)設(shè)置導(dǎo)航條3.4導(dǎo)航組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程audio音頻

image圖片

video視頻

camera相機(jī)

live-player實(shí)時(shí)音視頻播放live-pusher實(shí)時(shí)音視頻錄制3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程audio音頻3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程image圖片3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程video視頻3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程camera相機(jī)camera相機(jī)組件，在使用的時(shí)候需要用戶(hù)授權(quán)scope.camera，camera相機(jī)組件是由客戶(hù)端創(chuàng)建的原生組件，它的層級(jí)是最高的，不能通過(guò)z-index控制層級(jí)，可使用cover-viewcover-image覆蓋在上面，同一頁(yè)面只能插入一個(gè)camera組件，不能再scroll-view、swiper、picker-view、movable-view中使用camera組件。3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程live-player實(shí)時(shí)音視頻播放live-player實(shí)時(shí)音視頻播放組件，它的使用是針對(duì)特定類(lèi)目開(kāi)放的，需要先通過(guò)類(lèi)目審核，再在小程序管理后臺(tái)，“設(shè)置”-“接口設(shè)置”中自助開(kāi)通該組件權(quán)限。

現(xiàn)在支持的類(lèi)目：社交（直播）、教育（在線教育）、醫(yī)療（互聯(lián)網(wǎng)醫(yī)院，公立醫(yī)院）、政務(wù)民生（所有二級(jí)類(lèi)目）、金融（基金、信托、保險(xiǎn)、銀行、證券/期貨、非金融機(jī)構(gòu)自營(yíng)小額貸款、征信業(yè)務(wù)、消費(fèi)金融）。3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程live-pusher實(shí)時(shí)音視頻錄制live-pusher實(shí)時(shí)音視頻錄制組件，它的使用是需要取得用戶(hù)授權(quán)scope.camera、scope.record，針對(duì)特定類(lèi)目開(kāi)放的，需要先通過(guò)類(lèi)目審核，再在小程序管理后臺(tái)，“設(shè)置”-“接口設(shè)置”中自助開(kāi)通該組件權(quán)限。

現(xiàn)在支持的類(lèi)目：社交（直播）、教育（在線教育）、醫(yī)療（互聯(lián)網(wǎng)醫(yī)院，公立醫(yī)院）、政務(wù)民生（所有二級(jí)類(lèi)目）、金融（基金、信托、保險(xiǎn)、銀行、證券/期貨、非金融機(jī)構(gòu)自營(yíng)小額貸款、征信業(yè)務(wù)、消費(fèi)金融）。3.5媒體組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

map組件：地圖；3.6地圖組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

canvas組件：畫(huà)布；3.7畫(huà)布UI組件第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程3.8實(shí)戰(zhàn)：表單登錄注冊(cè)微信小程序第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程

視圖容器組件基礎(chǔ)內(nèi)容組件豐富的表單組件導(dǎo)航組件

媒體組件

地圖組件

畫(huà)布組件

實(shí)戰(zhàn)：表單登錄注冊(cè)微信小程序總結(jié)第3章用微信小程序組件構(gòu)建UI界面微信小程序簡(jiǎn)明開(kāi)發(fā)教程經(jīng)常不斷地學(xué)習(xí),你就什么都知道。你知道得越多,你就越有力量StudyConstantl