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

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

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

movable-view組件：可移動視圖容器；

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

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

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

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

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

textarea組件：多行輸入框;

label組件：改進表單可用性；

picker組件：滾動選擇器；

slider組件：滑動選擇器；

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

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

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

wx.navigateTo保留當前頁跳轉(zhuǎn)

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

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

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

image圖片

video視頻

camera相機

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

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

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

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

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

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

媒體組件

地圖組件

畫布組件

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