疫情期間學(xué)習(xí)微信小程序開發(fā)蓄勢待發(fā)！疫情期間，有的辦公的企業(yè)都還是在家在線辦公的較多，但是學(xué)習(xí)的時間還是會有的，趁著這時，也可以好好學(xué)習(xí)一下小程序的開發(fā)，為自己充充電，今天長沙小程序開發(fā)公司智企云分享學(xué)習(xí)的是布局，組件，一個例子

　　組件API https://developers.weixin.qq.com/miniprogram/dev/component/

　　把所有組件一個個看一遍。

　　布局：flex布局，

　　采用Flex布局的元素，稱為Flex容器(flex container)，簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項(xiàng)目(flex item)，簡稱"項(xiàng)目"。容器默認(rèn)存在兩根軸：水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框的交叉點(diǎn))叫做main start，結(jié)束位置叫做main end;交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。項(xiàng)目默認(rèn)沿主軸排列。單個項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

　　flex-direction　　容器內(nèi)項(xiàng)目的排列方向(默認(rèn)橫向排列)

　　flex-wrap　　容器內(nèi)項(xiàng)目換行方式

　　flex-flow　　以上兩個屬性的簡寫方式

　　justify-content　　項(xiàng)目在主軸上的對齊方式

　　align-items　　項(xiàng)目在交叉軸上如何對齊

　　align-content　　定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

　　視圖容器：

　　cover-image:覆蓋在原生組件之上的圖片視圖

　　cover-view:覆蓋在原生組件之上的文本視圖

　　movable-area:可移動區(qū)域

　　movable-view:可移動的視圖容器，在頁面中可以拖拽，

　　scroll-view:可滾動視圖區(qū)域，使用豎向滾動時，需要給scroll-view一個固定高度，

　　swiper:滑塊視圖窗口和輪波圖

　　view:最簡的一個容器

　　基礎(chǔ)內(nèi)容組件

　　icon:圖標(biāo)，progress進(jìn)度條，rich-text富文本，text文本，

　　表單組件：button,checkbox,editor,form,input,label,picker,picker-view,radio,radio-group,slider,switch,textarea;

　　操作反饋小工具：action-sheet,modal,toast,loading,在擴(kuò)展能力中，

　　api:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/

　　導(dǎo)航：

　　functional-page-navigator:僅在插件中有效，用于跳轉(zhuǎn)到插件功能頁，

　　navigator:頁面鏈接。

　　媒體：audio,音頻，camera相機(jī)，image,圖片，live-player實(shí)時音視頻播放，

　　live-pusher,實(shí)時音視頻錄制。

　　video:視頻

　　還有一些其它組件 ，大家可以在微信API網(wǎng)上查看，

　　實(shí)例篇：

　　主要內(nèi)容就是應(yīng)用上面的布局，對學(xué)習(xí)的知識進(jìn)行熟悉，長沙小程序開發(fā)公司智企云也會陸續(xù)為大家?guī)?，敬請關(guān)注了！