1、微信小程序開發(fā) (五)第五章 表現(xiàn)層組件小程序組件框架構(gòu)成 (第一部分 )小程序組件框架構(gòu)成 (第二部分 )小 程 序 組 件視圖容view container普通視view滾動(dòng)視scroll-view滑動(dòng)視swiper基礎(chǔ)內(nèi)base content圖標(biāo)icon文字text進(jìn)度progress操作反operation 上拉菜action-sheet模態(tài)窗model自消窗toast頁面導(dǎo)page navigation導(dǎo)航navigator小 程 序 組 件頁面表page form按鈕button表單form輸入input多選checkbox單選radio列表選picker內(nèi)嵌列picker-vi

2、ew滑選slider切換switch標(biāo)簽label多媒體multi media音頻audio視頻video圖片iimage小程序組件框架構(gòu)成 (第三部分 )第1節(jié) 視圖容器 :view container1.普通視圖 :view小 程 序 組 件地圖map地圖map畫布canvas畫布canvas客服會(huì)session客服會(huì)contact-button2.滾動(dòng)視圖 :scroll-view3.滑動(dòng)視圖 :swiper+上下滾動(dòng)+橫向排列第2節(jié) 基礎(chǔ)內(nèi)容 :base content基礎(chǔ)內(nèi)容包括 :圖標(biāo),文本,進(jìn)度條 .以下對(duì)三項(xiàng)內(nèi)容分別進(jìn)行詳解.1. 圖標(biāo):icon2. 文本:text+圖標(biāo)+輪播

3、圖3. 進(jìn)度條 :progress第3節(jié) 頁面表單 :page form+進(jìn)度條20+文本 text add lineremove add lineremove line第4節(jié) 操作反饋 :operation inteation1.上拉菜單action-sheet: 上拉菜單；=表單組件+button+checkbox+radio+input+labellabel:user-name12:512:513:00action-sheet-item: 上拉菜單項(xiàng)目；action-sheet-cancel: 上拉菜單取消按鈕；詳見圖示。2模態(tài)窗口： modalmodal 將被廢棄 ,請(qǐng)使用 wx.sh

4、owmodal來實(shí)現(xiàn) ,不講.3.自消窗口 :toasttoast 將棄,請(qǐng)用 wx.showtoast, 不講.4.正加載 :loading+上拉菜單itm 第5節(jié) 頁面導(dǎo)航 :page navigation第6節(jié) 多媒體 :multi media1. 音頻:audio新頁打開 本頁打新頁打開本頁打開頁簽切換+正加載正加載 正加載2. 視頻:video獲取page(onready :function(e)this.videoctx=wx.createvideocontext(),blur從頭再來劉 歡00:00page(onready: function(e)this.audioctx=wx.createaudiocontext(myaudio),data:poster:img,name:n,author:a,src:s,play3. 圖片:image第7節(jié) 地圖:map第8節(jié) 畫布:canvas+地圖+標(biāo)記結(jié)構(gòu)marker:longitude:lo,latitude:la,name:n,desc:d+圖片詳細(xì)繪圖 api 請(qǐng)參照繪圖一章第9節(jié)客服會(huì)話 :session客服會(huì)話按鈕，用于在頁面上顯示一個(gè)客服會(huì)話按鈕，用戶點(diǎn)