微信小程序開發(fā)圖解案例教程第3章-用微信小程序組件構(gòu)建UI界面課件

1、微信小程序開發(fā)圖解案例教程（附精講視頻）（第2版）劉剛著視圖容器組件 基礎(chǔ)內(nèi)容組件 豐富的表單組件 導(dǎo)航組件 媒體組件 地圖組件 畫布組件 沙場大練兵：表單登錄注冊微信小程序 小結(jié) 第3章 用微信小程序組件構(gòu)建UI界面 視圖容器組件共有5種：view視圖容器、scroll-view可滾動視圖區(qū)域、swiper滑塊視圖容器、movable-view可移動視圖容器、cover-view覆蓋原生組件的視圖容器。3.1視圖容器組件 view視圖容器是WXML界面布局的基礎(chǔ)組件，它的使用和HTML里的DIV類似，主要用于界面的布局。 view視圖容器也有自己的屬性，如表3.1所示。3.1.1view視圖

2、容器表3.1view屬性 在WXML界面里使用view布局，渲染出界面內(nèi)容，如圖3.1所示。圖3.1view布局 scroll-view可滾動視圖區(qū)域允許視圖區(qū)域內(nèi)容橫向滾動或者縱向滾動，類似于瀏覽器的橫向滾動條和垂直滾動條，scroll-view擁有自己的屬性和事件，如表3.2所示。3.1.2scroll-view可滾動視圖區(qū)域表3.2scroll-view屬性1縱向滾動 允許內(nèi)容縱向滾動，需要給一個(gè)固定高度，可以綁定滾動到頂部/左邊（bindscrolltoupper）、滾動到底部/右邊（bindscrolltolower）、滾動時(shí)（bindscroll）觸發(fā)的事件，也可以滾動到指定的id

3、區(qū)域（scroll-into-view）。 下面實(shí)現(xiàn)縱向滾動，如圖3.2所示。圖3.2縱向滾動（1）在wxml文件里使用scroll-view進(jìn)行布局，設(shè)置scroll-y=“true”縱向滾動，綁定bindscrolltoupper、bindscrolltolower、bindscroll、scroll-into-view、scroll-top事件。（2）在js文件里設(shè)置顏色的數(shù)組，綁定toView和scrollTop數(shù)據(jù)值，提供bindscrolltoupper、bindscrolltolower、bindscroll、scroll-into-view、scroll-top事件函數(shù)。2橫向

4、滾動 在使用“今日頭條”或“騰訊新聞”時(shí)，在新聞列表的上方都會有新聞?lì)l道供我們選擇，可以向左滑動和向右滑動來查看相應(yīng)類別的新聞，可以采用scroll-view來實(shí)現(xiàn)這些新聞?lì)l道的橫向滾動，如圖3.3所示。圖3.3今日頭條新聞?lì)l道 swiper滑塊視圖容器用來在指定區(qū)域內(nèi)切換顯示內(nèi)容，常用來制作海報(bào)輪播效果和頁簽內(nèi)容切換效果，它的屬性如表3.3所示。3.1.3swiper滑塊視圖容器表3.3swiper屬性1海報(bào)輪播效果 海報(bào)輪播效果常用來展示商品圖片信息或者廣告信息，是很多網(wǎng)站或者App軟件都會采用的一種布局方式，如圖3.4、圖3.5所示。圖3.4海報(bào)1圖3.5海報(bào)2（1）在wxml文件里，采

5、用swiper滑塊視圖容器組件進(jìn)行海報(bào)輪播區(qū)域的布局。 （2）在js文件里，提供海報(bào)輪播的圖片，設(shè)置是否自動播放，提供輪播的時(shí)長等數(shù)據(jù)，通過數(shù)據(jù)綁定的方式渲染到頁面上。 2頁簽內(nèi)容切換效果 swiper滑塊視圖容器除了可以用來實(shí)現(xiàn)海報(bào)輪播效果，還可以實(shí)現(xiàn)頁簽切換效果。 頁簽切換效果常用于多種方式的登錄或者多種類別的切換，如圖3.6所示。圖3.6頁簽切換效果（1）進(jìn)入到wxml文件里，進(jìn)行賬號密碼登錄和手機(jī)快捷登錄的界面布局設(shè)計(jì)。 （2）進(jìn)入到wxss文件里，給頁面文件添加樣式。（3）進(jìn)入到j(luò)s文件里，提供窗口的寬度、高度、當(dāng)前面板的索引值，提供頁簽切換函數(shù)。 movable-view是一個(gè)可移

6、動視圖容器，在頁面中可以做拖曳滑動。 在使用這個(gè)組件的時(shí)候，需要先定義可移動區(qū)域movable-area，然后定義直接子節(jié)點(diǎn)movable-view，否則不能移動。 movable-area必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px；movable-view必須設(shè)置width和height屬性，不設(shè)置默認(rèn)為10px，movable-view默認(rèn)為絕對定位，top和left屬性為0px。 movable-view可移動視圖容器的屬性如表3.4所示。3.1.4movable-view可移動視圖容器表3.4movable-view屬性 movable-view提供了兩個(gè)特殊事件：ht

7、ouchmove事件，指初次手指觸摸后的移動為橫向移動，如果catch此事件，則意味著touchmove事件也被catch；vtouchmove事件，指初次手指觸摸后的移動為縱向移動，如果catch此事件，則意味著touchmove事件也被catch。 下面使用movable-view可移動視圖容器組件來進(jìn)行滑動，黃色區(qū)域代表可以移動的區(qū)域，紅色方塊代表可以移動的組件，如圖3.7所示。圖3.7可移動視圖容器（1）在wxml文件里，使用movable-area和movable-view視圖容器組件進(jìn)行布局。 （2）在js文件里，提供拖動函數(shù)、縮放函數(shù)，通過數(shù)據(jù)綁定的方式渲染到頁面上。 cover

8、-view、cover-image這兩個(gè)是覆蓋原生組件的視圖容器。 比如在使用地圖組件時(shí)，地圖組件本身的功能很有局限，但是想放置一些特殊的內(nèi)容或圖片，這時(shí)就需要使用覆蓋地圖組件的視圖容器。 cover-view是指覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。 cover-image是指覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view一樣，支持嵌套cover-view。3.1.5cover-view覆蓋原生組件的視圖容器 下面使用cover-view、cover-im

9、age覆蓋原生組件的視圖容器組件，在video視頻播放組件上放置播放、暫停兩個(gè)圖片，同時(shí)放置一個(gè)時(shí)間內(nèi)容顯示區(qū)域，如圖3.8、圖3.9所示。圖3.8視頻播放圖3.9覆蓋視頻播放組件（1）在wxml文件里使用cover-view、cover-image覆蓋原生組件的視圖容器組件進(jìn)行布局。 （2）在wxss文件里添加樣式。 （3）在js文件里，提供視頻播放、暫停函數(shù)，初始化視頻播放組件。 基礎(chǔ)內(nèi)容組件包括icon圖標(biāo)組件、text文本組件、progree進(jìn)度條組件、rich-text富文本組件。3.2.1icon圖標(biāo) 微信小程序提供了豐富的圖標(biāo)組件，這些圖標(biāo)組件應(yīng)用于不同的場景，有成功、警告、提示

10、、取消、下載等不同含義，如圖3.10所示。3.2基礎(chǔ)內(nèi)容組件圖3.10圖標(biāo) icon圖標(biāo)組件有3個(gè)屬性：圖標(biāo)的類型type、圖標(biāo)的大小size和圖標(biāo)的顏色color，如表3.5所示。表3.5圖標(biāo)屬性 text文本組件支持轉(zhuǎn)義符，比如換行n、空格t。 組件內(nèi)只支持嵌套，除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無法長按選中。3.2.2text文本 下面我們來看轉(zhuǎn)義符的使用，具體代碼如下：我愛北京t我愛中國我愛北京n我愛中國 界面效果如圖3.11所示。 從圖3.11中可以看出，t具有空格功能，n具有換行功能，同時(shí)也可以看出text文本組件是放置在同一行里，這一點(diǎn)不同于view組件，每個(gè)view組件都是單獨(dú)一行。

11、圖3.11轉(zhuǎn)義符效果 Progress進(jìn)度條組件是一種提高用戶體驗(yàn)度的組件，可以通過進(jìn)度條看到完整視頻的長度、當(dāng)前播放的進(jìn)度，這樣讓用戶能合理地安排自己的時(shí)間，提高用戶體驗(yàn)度。 微信小程序也提供了progress進(jìn)度條組件，它的屬性如表3.6所示。3.2.3progress進(jìn)度條表3.6進(jìn)度條屬性 示例代碼如下： 界面效果如圖3.12所示。圖3.12進(jìn)度條效果 rich-text富文本組件，可以在WXML頁面文件顯示一些富文本內(nèi)容，比如顯示HTML的一些元素內(nèi)容。它有一個(gè)nodes節(jié)點(diǎn)列表屬性，nodes屬性推薦使用Array類型，由于組件會將String類型轉(zhuǎn)換為Array類型，因而性能會有

12、所下降。 nodes支持兩種節(jié)點(diǎn)，通過type來區(qū)分，分別是元素節(jié)點(diǎn)和文本節(jié)點(diǎn)，如表3.7和表3.8所示，它默認(rèn)的是元素節(jié)點(diǎn)，即在富文本區(qū)域里顯示的HTML節(jié)點(diǎn)。3.2.4rich-text富文本1元素節(jié)點(diǎn)：type= node表3.7元素節(jié)點(diǎn)2文本節(jié)點(diǎn)：type= text表3.8文本節(jié)點(diǎn) 微信小程序提供了豐富的表單組件：button按鈕組件、checkbox多項(xiàng)選擇器組件、radio單項(xiàng)選擇器組件、input單行輸入框組件、textarea多行輸入框組件、label改進(jìn)表單可用性組件、picker滾動選擇器組件、slider滑動選擇器組件、switch開關(guān)選擇器組件、form表單組件10種

13、表單組件。3.3豐富的表單組件 button按鈕組件提供3種類型按鈕：基本類型按鈕、默認(rèn)類型按鈕和警告類型按鈕。 同時(shí)提供兩種大小形狀的按鈕：默認(rèn)和mini兩種大小按鈕，如圖3.13所示。 button按鈕組件有很多屬性，每個(gè)屬性有不同的作用，如表3.9所示。3.3.1button按鈕圖3.13按鈕類型和大小表3.9按鈕屬性 從按鈕屬性中可以看出按鈕可以設(shè)置不同大小、不同類型、是否鏤空、是否禁用、按鈕名稱前是否帶loading圖標(biāo)。 針對form表單組件，按鈕組件提供了提交表單和重置表單兩個(gè)功能。 界面效果如圖3.14所示。圖3.14按鈕效果 checkbox多項(xiàng)選擇器組件，也就是我們常說的復(fù)

14、選框，它用來進(jìn)行多項(xiàng)選擇，它的屬性如表3.10所示。3.3.2checkbox多項(xiàng)選擇器表3.10多項(xiàng)選擇器屬性 checkbox-group是用來容納多個(gè)checkbox多項(xiàng)選擇器的容器，它有一個(gè)綁定事件bindchange，中選中項(xiàng)發(fā)生改變時(shí)觸發(fā)change事件，detail=value:選中的checkbox的value的數(shù)組。 下面演示一下checkbox多項(xiàng)選擇器的使用，以及如何獲取選中的value值。（1）在wxml文件里使用checkbox進(jìn)行界面布局，具體代碼如下所示。美國中國巴西日本英國（2）在js文件里，添加checkboxChange事件函數(shù)，獲取復(fù)選框選中的值，將其打印

15、出來，具體代碼如下所示。Page(checkboxChange:function(e)console.log(e.detail.value) 界面效果如圖3.15所示。 從圖3.15中可以看出，被禁用的復(fù)選框是不能使用的，在checkbox-group上面綁定bindchange事件，每次勾選時(shí)，會把所有勾選的復(fù)選框的值以數(shù)組的形式存在detail里。圖3.15復(fù)選框value值 radio單項(xiàng)選擇器是與checkbox多項(xiàng)選擇器對立的一個(gè)組件，每次只能選中一個(gè)radio單項(xiàng)選擇器，選項(xiàng)間是一種互斥關(guān)系，它的屬性如表3.11所示。3.3.3radio單項(xiàng)選擇器表3.11單項(xiàng)選擇器屬性 radi

16、o-group是用來容納多個(gè)radio單項(xiàng)選擇器的容器，它有一個(gè)綁定事件bindchange，中的選中項(xiàng)發(fā)生變化時(shí)觸發(fā)bindchange事件，event.detail=value:選中項(xiàng)radio的value。下面演示一下radio單項(xiàng)選擇器的使用。（1）在wxml文件里使用radio單項(xiàng)選擇器進(jìn)行界面布局，具體代碼如下所示。美國中國巴西日本英國（2）在js文件里，添加radioChange事件函數(shù)，獲取單項(xiàng)選中的值，將其打印出來，具體代碼如下所示。Page(radioChange:function(e)console.log(radio發(fā)生change事件，攜帶value值為：,e.det

17、ail.value) 界面效果如圖3.16所示。 從圖3.16中可以看出，被禁用的單項(xiàng)選擇器是不能使用的，在radio-group上面綁定bindchange事件，每次勾選時(shí)，只能使一個(gè)選項(xiàng)呈現(xiàn)為選中狀態(tài)，同時(shí)會把相應(yīng)的值存在detail里。圖3.16單項(xiàng)選擇器value值 input單行輸入框，用來輸入單行文本內(nèi)容，它的屬性如表3.12所示。3.3.4input單行輸入框表3.12單行輸入框?qū)傩岳m(xù)表 從表3.12單行輸入框?qū)傩岳锟梢钥闯觯海?）可以設(shè)置input輸入框的類型有text、number、idcard、digit；（2）可以設(shè)置輸入框是否為密碼類型，如果是密碼類型，則會用點(diǎn)號代替具

18、體值顯示；（3）通過placeholder來給輸入框添加類似于“請輸入手機(jī)號/用戶名/郵箱”這樣友好的提示信息，placeholder-style設(shè)置提示信息的樣式，placeholder-class設(shè)置提示信息的class，然后再針對這個(gè)class添加樣式；（4）可以設(shè)置input輸入框禁用、最大長度和獲取焦點(diǎn)；（5）input輸入框有3個(gè)常用的事件：輸入時(shí)（bindinput）、光標(biāo)聚焦時(shí)（bindfocus）、光標(biāo)離開時(shí)（bindblur）。 textarea多行輸入框是與input單行輸入框?qū)?yīng)的一個(gè)組件，它可以輸入多行文本內(nèi)容，它的屬性如表3.13所示。3.3.5textarea多行

19、輸入框表3.13多行輸入框?qū)傩岳m(xù)表 從表3.13多行輸入框?qū)傩岳锟梢钥闯觯海?）通過placeholder來給輸入框添加類似于“請輸入手機(jī)號/用戶名/郵箱”這樣友好的提示信息，placeholder-style設(shè)置提示信息的樣式，placeholder-class設(shè)置提示信息的類，然后再針對這個(gè)類添加樣式；（2）可以設(shè)置textarea輸入框禁用和最大長度、獲取焦點(diǎn)、自動調(diào)整行高；（3）input輸入框有4個(gè)常用的事件：輸入時(shí)（bindinput）、光標(biāo)聚焦時(shí)（bindfocus）、光標(biāo)離開時(shí)（bindblur）、行數(shù)變化時(shí)（bindlinechange）。 label組件是用來改進(jìn)表單可用性

20、的，目前可以用來改進(jìn)的組件有：、 、。 它只有一個(gè)屬性for，屬性for用來綁定控件的id。 它有兩種使用方式：一種是沒有定義for屬性，另一種是定義for屬性。3.3.6label改進(jìn)表單可用性1label組件沒有定義for屬性 label組件沒有定義for屬性時(shí)，在label內(nèi)包含、這些組件，當(dāng)單擊label組件時(shí)，會觸發(fā)label內(nèi)包含的第一個(gè)控件，假如在第一個(gè)位置，就會觸發(fā)對應(yīng)的事件，假如在第一個(gè)位置，就會觸發(fā)radio對應(yīng)的事件。 下面演示一下它的使用。（1）在wxml文件里利用label組件布局，把第一個(gè)組件隱藏起來。（2）在js文件里添加clickBtn、checkboxChan

21、ge、radioChange3個(gè)事件函數(shù)，分別打印不同的信息。（3）在wxml界面里可以看到按鈕組件是隱藏起來的，但是單擊“我是label組件內(nèi)的內(nèi)容”，可以看到打印信息是按鈕事件函數(shù)打印的信息，如圖3.18所示。圖3.18沒有定義for屬性2label組件定義for屬性 label組件定義for屬性后，它會根據(jù)for屬性的值找到與組件id一樣的值，然后觸發(fā)這個(gè)組件的相應(yīng)事件。 下面演示一下它的使用：（1）在wxml文件里利用label組件布局，把第一個(gè)組件隱藏起來，給label定義for等于man，讓它找到id值等于man組件，然后觸發(fā)該組件的事件。（2）在js文件里添加clickBtn、c

22、heckboxChange、radioChange3個(gè)事件函數(shù)，分別打印不同的信息。（3）在wxml界面里可以看到按鈕組件是隱藏起來的，但是單擊“我是label組件內(nèi)的內(nèi)容”，可以看到id值等于man的單項(xiàng)選擇器程序?yàn)檫x中狀態(tài)，同時(shí)觸發(fā)事件，打印信息，如圖3.19所示。 從這里可以看出，如果label定義for屬性，就會根據(jù)for屬性的值找到組件id等于for屬性值，然后觸發(fā)相應(yīng)事件；如果label沒有定義for屬性，它會找到label組件內(nèi)的第一個(gè)組件，然后觸發(fā)相應(yīng)事件。圖3.19定義for屬性 picker滾動選擇器，支持3種滾動選擇器：普通選擇器、時(shí)間選擇器、日期選擇器。 默認(rèn)的是普通選

23、擇器，如圖3.20、圖3.21和圖3.22所示。3.3.7picker滾動選擇器圖3.20普通選擇器圖3.21時(shí)間選擇器圖3.22日期選擇器 這3種選擇器是通過mode來區(qū)分的，普通選擇器mode=selector，時(shí)間選擇器mode=time，日期選擇器mode=date，每種類型選擇器的屬性不同，如表3.14、表3.15、表3.16所示。1普通選擇器：mode = selector表3.14普通選擇器屬性 界面效果如圖3.23所示。圖3.23普通選擇器2時(shí)間選擇器：mode = time表3.15時(shí)間選擇器屬性 界面效果如圖3.24所示。圖3.24時(shí)間選擇器3日期選擇器：mode = da

24、te表3.16日期選擇器屬性 界面效果如圖3.25所示。圖3.25日期選擇器4picker-view嵌入頁面滾動選擇器 除了普通選擇器、時(shí)間選擇器、日期選擇器3種滾動選擇器之外，還有一種嵌入頁面的滾動選擇器，它使用picker-view組件在頁面里的布局，如圖3.26所示。圖3.26嵌入頁面滾動選擇器 picker-view嵌入頁面滾動選擇器組件里面只能顯示組件，不會顯示其他節(jié)點(diǎn)，picker-view有3個(gè)屬性，如表3.17所示。表3.17嵌入頁面滾動選擇器屬性 slider滑動選擇器組件，經(jīng)常用于控制聲音的大小、屏幕的亮度等場景，它可以設(shè)置滑動步長、顯示當(dāng)前值以及設(shè)置最小值、最大值，如圖3

25、.27所示。3.3.8slider滑動選擇器圖3.27滑動選擇器 slider滑動選擇器組件的屬性如表3.18所示。表3.18slider滑動選擇器屬性 界面效果如圖3.28所示。圖3.28滑動選擇器使用 switch開關(guān)選擇器應(yīng)用得十分普遍，它有兩個(gè)狀態(tài)：開和關(guān)。在很多場景都會用到開關(guān)這個(gè)功能，比如微信設(shè)置里的新消息提醒界面，它通過開關(guān)來設(shè)置是否接收消息、是否顯示消息、是否有聲音、是否振動等功能，如圖3.29所示。3.3.9switch開關(guān)選擇器圖3.29微信新消息提醒設(shè)置 switch開關(guān)選擇器的屬性可以設(shè)置為是否選中、開關(guān)類型、綁定事件和顏色，如表3.19所示。表3.19switch開關(guān)

26、選擇器屬性 界面效果如圖3.30所示。圖3.30開關(guān)選擇器應(yīng)用 form表單組件將表單里組件的值提交給js文件進(jìn)行處理，可以提交、這些組件的值。 提交表單的時(shí)候，會借助于button組件的formType為submit的屬性，將表單組件中的value值進(jìn)行提交，需要在表單組件中加上name來作為key。 form表單組件的屬性如表3.20所示。3.3.10form表單表3.20form表單屬性 界面效果如圖3.31、圖3.32所示。圖3.31未填寫表單圖3.32填寫表單 單擊Reset按鈕可以重置表單，單擊Submit按鈕組件，就可以把表單數(shù)據(jù)提交到j(luò)s文件里進(jìn)行處理，提交數(shù)據(jù)如圖3.33所示

27、。圖3.33表單提交數(shù)據(jù) 微信小程序可以在頁面中設(shè)置導(dǎo)航，可以使用navigator頁面鏈接組件，也可以在js文件里設(shè)置導(dǎo)航進(jìn)行頁面跳轉(zhuǎn)，同時(shí)可以設(shè)置導(dǎo)航條標(biāo)題和顯示動畫效果。3.4導(dǎo)航組件 navigator頁面鏈接組件用來在WXML頁面中實(shí)現(xiàn)跳轉(zhuǎn)，它有3種類型：第1種是保留當(dāng)前頁跳轉(zhuǎn)，跳轉(zhuǎn)后可以返回當(dāng)前頁，它與wx.navigateTo跳轉(zhuǎn)效果是一樣的；第2種是關(guān)閉當(dāng)前頁跳轉(zhuǎn)，無法返回當(dāng)前頁，它與wx.redirectTo跳轉(zhuǎn)效果是一樣的；第3種是跳轉(zhuǎn)到底部標(biāo)簽導(dǎo)航指定的頁面，它與wx.switchTab跳轉(zhuǎn)效果是一樣的。 navigator頁面鏈接組件的這些跳轉(zhuǎn)效果都是通過open-ty

28、pe屬性來控制的，具體屬性如表3.21所示。3.4.1navigator頁面鏈接組件表3.21navigato頁面鏈接屬性 下面來演示一下open-type不同導(dǎo)航類型的跳轉(zhuǎn)效果。（1）新建一個(gè)navigator項(xiàng)目，進(jìn)入到app.json文件中，在pages屬性里設(shè)置頁面路徑“pages/index/index”“pages/navigator/navigator” “pages/redirect/redirect”。（2）進(jìn)入到pages/index/index.wxml文件里，設(shè)置導(dǎo)航的3種跳轉(zhuǎn)方式：保留當(dāng)前頁跳轉(zhuǎn)、關(guān)閉當(dāng)前頁跳轉(zhuǎn)、跳轉(zhuǎn)到tabBar頁面。（3）進(jìn)入到pages/navi

29、gator/navigator.wxml文件里，進(jìn)行界面布局，具體代碼如下所示。保留當(dāng)前頁進(jìn)行跳轉(zhuǎn)，單擊左上角可以返回到當(dāng)前頁（4）進(jìn)入到pages/redirect/redirect.wxml文件里，進(jìn)行界面布局，具體代碼如下所示。關(guān)閉當(dāng)前頁進(jìn)行跳轉(zhuǎn)，跳轉(zhuǎn)后無法返回到當(dāng)前頁（5）wx.navigateTo保留當(dāng)前頁跳轉(zhuǎn)、wx.redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn)這兩種方式可以正常跳轉(zhuǎn)，但是wx.switchTab跳轉(zhuǎn)到tabBar頁面這種方式是無法正常跳轉(zhuǎn)的，它需要在app.json文件的tabBar屬性里設(shè)置底部標(biāo)簽導(dǎo)航。（6）使用wx.switchTab跳轉(zhuǎn)到tabBar頁面這種方式可以正

30、常跳轉(zhuǎn)到指定的底部標(biāo)簽導(dǎo)航頁面里，但是wx.navigateTo保留當(dāng)前頁跳轉(zhuǎn)、wx.redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn)這兩種方式無法跳轉(zhuǎn)，這是因?yàn)樵赼pp.json中配置的tabBar屬性里設(shè)置了底部標(biāo)簽導(dǎo)航。（7）navigator頁面鏈接組件設(shè)置的跳轉(zhuǎn)路徑，如果帶參數(shù)，像url=./navigator/navigator title=navigator，獲取title的值，可以在跳轉(zhuǎn)頁面里js文件的onLoad函數(shù)里獲得，具體代碼如下所示。Page(data:,onLoad:function(options)console.log(title=+options);) wx.navigat

31、eTo保留當(dāng)前頁面跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面，具體屬性如表3.22所示。3.4.2wx.navigateTo保留當(dāng)前頁跳轉(zhuǎn)表3.22wx.navigateTo屬性（1）進(jìn)入到pages/index/index.wxml文件里，添加一個(gè)跳轉(zhuǎn)按鈕，保留當(dāng)前頁進(jìn)行跳轉(zhuǎn)。 （2）進(jìn)入到pages/index/index.js文件里，添加一個(gè)navigateBtn事件函數(shù)，保留當(dāng)前頁跳轉(zhuǎn)到pages/navigator/navigator.wxml頁面里。 wx.redirectTo關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，具體屬性如表3.23所示。3.4.3

32、wx.redirectTo關(guān)閉當(dāng)前頁跳轉(zhuǎn)表3.23wx.redirectTo屬性續(xù)表（1）進(jìn)入到pages/index/index.wxml文件里，添加一個(gè)跳轉(zhuǎn)按鈕，關(guān)閉當(dāng)前頁進(jìn)行跳轉(zhuǎn)。 （2）進(jìn)入到pages/index/index.js文件里，添加一個(gè)redirectBtn事件函數(shù)，保留當(dāng)前頁跳轉(zhuǎn)到pages/navigator/navigator.wxml頁面里。 wx.switchTab跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面，具體屬性如表3.24所示。3.4.4跳轉(zhuǎn)到tabBar頁面表3.24wx.switchTab屬性（1）進(jìn)入到pages/index/index.

33、wxml文件里，添加一個(gè)跳轉(zhuǎn)按鈕，跳轉(zhuǎn)到tabBar頁面。 （2）進(jìn)入到pages/index/index.js文件里，添加一個(gè)navigateBtn事件函數(shù)，保留當(dāng)前頁跳轉(zhuǎn)到pages/redirect/redirect.wxml頁面里。 wx.navigateTo和wx.redirectTo不允許跳轉(zhuǎn)到tabBar頁面，只能用wx.switchTab跳轉(zhuǎn)到tabBar頁面。 wx.navigateBack關(guān)閉當(dāng)前頁面，返回上一頁面或多級頁面?？赏ㄟ^getCurrentPages()獲取當(dāng)前的頁面棧，決定需要返回幾層。具體屬性如表3.25所示。3.4.5wx.navigateBack返回上一

34、頁表3.25wx.navigateBack屬性（1）進(jìn)入到pages/navigator/navigator.wxml文件里，添加一個(gè)返回按鈕，單擊返回按鈕，可以返回到上一級頁面。（2）進(jìn)入到pages/navigator/navigator.js文件里，添加backBtn事件返回函數(shù)。（3）在pages/index/index.wxml文件里，單擊保留當(dāng)前頁跳轉(zhuǎn)按鈕，可以進(jìn)行頁面跳轉(zhuǎn)，在跳轉(zhuǎn)的頁面里單擊返回上一頁按鈕，可以返回到上一級頁面，如圖3.34、圖3.35所示。圖3.34index.wxml頁面圖3.35navigator.wxml頁面 wx.setNavigationBarTitl

35、e(OBJECT)動態(tài)設(shè)置當(dāng)前頁面的標(biāo)題。具體屬性如表3.26所示。3.4.6設(shè)置導(dǎo)航條表3.26wx.setNavigationBarTitle(OBJECT)屬性（1）進(jìn)入到pages/navigator/navigator.js文件里，對頁面窗口標(biāo)題重新設(shè)計(jì)。 （2）在pages/index/index.wxml文件里，單擊保留當(dāng)前頁跳轉(zhuǎn)按鈕，可以進(jìn)行頁面跳轉(zhuǎn)，跳轉(zhuǎn)后標(biāo)題變?yōu)樾马撁?，如圖3.36、圖3.37所示。圖3.36index.wxml頁面圖3.37navigator.wxml頁面（3）在pages/navigator/navigator.js文件里，如果在當(dāng)前頁面顯示導(dǎo)航條加載動

36、畫，可以使用wx.show NavigationBarLoading()函數(shù)。 界面效果如圖3.38所示。圖3.38導(dǎo)航加載效果 媒體組件有audio音頻組件、image圖片組件、video視頻組件，audio音頻組件用來播放音樂，image圖片組件用來顯示圖片，video視頻組件用來播放視頻。3.5.1audio音頻 audio音頻組件需要有唯一的id，根據(jù)id使用wx.createAudioContext (myAudio)創(chuàng)建音頻播放的環(huán)境，src屬性是音頻播放的資源路徑，poster屬性是音頻的播放圖片，name屬性為音頻名稱，綁定播放、暫停等事件，具體屬性如表3.27所示。3.5媒體

37、組件表3.27audio音頻屬性續(xù)表 MediaError.code錯(cuò)誤碼如表3.28所示。表3.28返回錯(cuò)誤碼 示例代碼如下所示：播放暫停設(shè)置當(dāng)前播放時(shí)間為14秒回到開頭 代碼說明如圖3.39所示。圖3.39audio.wxml代碼說明圖3.40audio.js代碼說 界面效果如圖3.41所示。圖3.41音頻播放界面效果 Image圖片組件的屬性如表3.29所示。它有兩類展現(xiàn)模式：一類是縮放模式，在縮放模式里包括4種方式；另一類是裁剪模式，在裁剪模式里包括9種方式。3.5.2image圖片表3.29image圖片屬性 通過mode屬性來設(shè)置4種縮放模式，如表3.30所示。表3.304種縮放模

38、式 通過mode屬性來設(shè)置9種裁剪模式，如表3.31所示。表3.319種裁剪模式 圖片效果如圖3.42圖3.54所示。圖3.42原圖圖3.43scaleToFill縮放模式圖3.44aspectFit縮放模式圖3.45aspectFill縮放模式圖3.46top裁剪模式圖3.47bottom裁剪模式圖3.48center裁剪模式圖3.49left裁剪模式圖3.50right裁剪模式圖3.51top left裁剪模式圖3.52top right裁剪模式圖3.53bottom left裁剪模式圖3.54bottom right裁剪模式 video視頻組件是用來播放視頻的組件，這個(gè)組件可以控制是否顯

39、示默認(rèn)播放控件（播放/暫停按鈕、播放進(jìn)度、時(shí)間），還可以發(fā)送彈幕信息等，video組件默認(rèn)寬度為300px、高度為225px，設(shè)置寬高需要通過wxss設(shè)置width和height，具體屬性如表3.32所示。3.5.3video視頻表3.32video視頻屬性 界面效果如圖3.55所示。圖3.55視頻播放界面 camera相機(jī)組件在使用的時(shí)候需要用戶授權(quán)scope.camera，它是由客戶端創(chuàng)建的原生組件，它的層級是最高的，不能通過z-index控制層級，可使用cover-view、cover-image覆蓋在上面，同一頁面只能插入一個(gè)camera組件，不能在scroll-view、swiper

40、、picker-view、movable-view中使用camera組件。 camera相機(jī)組件的屬性如表3.33所示。3.5.4camera相機(jī)表3.33camera相機(jī)組件屬性 界面效果如圖3.56、圖3.57所示。圖3.56拍照前圖3.57拍照后 live-player實(shí)時(shí)音視頻播放組件的使用是針對特定類目開放的，需要先通過類目審核，然后在小程序管理后臺“設(shè)置”-“接口設(shè)置”中自助開通該組件權(quán)限。 現(xiàn)在支持的類目有：社交（直播）、教育（在線教育）、醫(yī)療（互聯(lián)網(wǎng)醫(yī)院、公立醫(yī)院）、政務(wù)民生（所有二級類目）、金融（基金、信托、保險(xiǎn)、銀行、證券/期貨、非金融機(jī)構(gòu)自營小額貸款、征信業(yè)務(wù)、消費(fèi)金融）

41、。 live-player實(shí)時(shí)音視頻播放組件的屬性如表3.34所示。3.5.5live-player實(shí)時(shí)音視頻播放表3.34live-player實(shí)時(shí)音視頻播放組件屬性續(xù)表 示例代碼如下所示：Page(statechange(e)console.log(live-player?code:,e.detail.code),error(e)console.error(live-player?error:,e.detail.errMsg) live-pusher實(shí)時(shí)音視頻錄制組件的使用需要取得用戶授權(quán)scope. camera、scope.record，它是針對特定類目開放的，需要先通過類目審核，然后

42、在小程序管理后臺“設(shè)置”-“接口設(shè)置”中自助開通該組件權(quán)限。 現(xiàn)在支持的類目有：社交（直播）、教育（在線教育）、醫(yī)療（互聯(lián)網(wǎng)醫(yī)院、公立醫(yī)院）、政務(wù)民生（所有二級類目）、金融（基金、信托、保險(xiǎn)、銀行、證券/期貨、非金融機(jī)構(gòu)自營小額貸款、征信業(yè)務(wù)、消費(fèi)金融）。 live-pusher實(shí)時(shí)音視頻錄制組件的屬性如表3.35所示。3.5.6live-pusher實(shí)時(shí)音視頻錄制表3.35live-pusher實(shí)時(shí)音視頻錄制組件屬性續(xù)表 map地圖組件用來開發(fā)與地圖有關(guān)的應(yīng)用，如地圖導(dǎo)航、打車軟件、京東商城的訂單軌跡等都會用到地圖組件，在地圖上可以標(biāo)記覆蓋物以及指定一系列的坐標(biāo)位置。 京東的倉庫和客戶的收貨

43、地址，如圖3.58所示。3.6地圖組件圖3.58京東訂單軌跡 map地圖組件具體屬性如表3.36所示。表3.36map地圖屬性 markers標(biāo)記點(diǎn)用于在地圖上顯示標(biāo)記的位置，如表3.37所示。表3.37markers地圖標(biāo)記屬性 polyline指定一系列坐標(biāo)點(diǎn)，從數(shù)組第一項(xiàng)連線至最后一項(xiàng)，如表3.38所示。表3.38polyline坐標(biāo)點(diǎn)屬性續(xù)表 circles在地圖上顯示圓，如表3.39所示。表3.39circles顯示圓屬性 controls在地圖上顯示控件，控件不隨著地圖移動，如表3.40所示。表3.40controls顯示控件屬性 position控件的位置是相對地圖的位置，如表3

44、.41所示。表3.41position控件位置屬性 界面效果如圖3.59所示。圖3.59地圖界面效果圖 canvas畫布組件用來繪制正方形、圓形或者一些其他的形狀，如圖3.60所示。3.7畫布組件圖3.60canvas畫布組件繪制的圖形 canvas畫布組件默認(rèn)寬度為300px、高度為225px，在使用的時(shí)候需要有唯一的標(biāo)識，它有手指觸摸動作開始、手指觸摸后移動、手指觸摸動作結(jié)束、手指觸摸動作被打斷等事件，具體屬性如表3.42所示。表3.42canvas畫布屬性續(xù)表 代碼說明如圖3.61所示。圖3.61繪圖代碼說明 微信小程序里有豐富的表單組件，通過這些組件的使用，來完成京東登錄界面、手機(jī)快速

45、注冊界面、企業(yè)用戶注冊界面的微信小程序設(shè)計(jì)，如圖3.62、圖3.63、圖3.64所示。 會用到view視圖容器組件、button按鈕組件、image圖片組件、input輸入框組件、checkbox多項(xiàng)選擇器組件、switch開關(guān)選擇器組件、navigator頁面鏈接組件等組件的使用，將這些組件進(jìn)行界面的布局設(shè)計(jì)來完成表單登錄和注冊設(shè)計(jì)。 3.8沙場大練兵：表單登錄注冊微信小程序圖3.62登錄圖3.63手機(jī)快速注冊圖3.64企業(yè)用戶注冊 在登錄表單里，輸入賬號、密碼進(jìn)行登錄，在賬號、密碼輸入框里都有友好的提示信息；登錄按鈕默認(rèn)是灰色不可用狀態(tài)，只有輸入內(nèi)容后，才會變?yōu)榭捎脿顟B(tài)；在登錄按鈕的下面提供手機(jī)快速注冊、企業(yè)用戶注冊、找回密碼鏈接；界面最下面是微信、QQ第三方登錄方式，如圖3.65所示。3.8.1登錄設(shè)計(jì)圖3.65登錄界面（1）添加一個(gè)form項(xiàng)目，填寫AppID，只有填寫AppID，form微信小程序才能在手機(jī)上瀏覽效果，如圖3.66所示。圖3.66添加form項(xiàng)目（2）在app.json文件里添加“pages/login/login”“pages/mobile/mobile”“pages/company/company”3個(gè)文件目錄，并刪除默認(rèn)的文件目錄以及相應(yīng)的文件夾，如圖3.67所