從本節(jié)開始，我將逐一為大家介紹微信小程序的基礎(chǔ)組件 。咱們閑言少敘，直奔主題 。
1、小程序基礎(chǔ)組件
小程序基礎(chǔ)組件構(gòu)成如下圖：
共有8種基礎(chǔ)組件：
1）視圖容器：構(gòu)成小程序頁(yè)面的最基本組件 ， 可以勾勒頁(yè)面框架，其中嵌入其他類型的基礎(chǔ)組件 。可細(xì)分為：view（視圖容器）、-view（可滾動(dòng)視圖容器）、 （滑塊視圖容器） 。
2）基礎(chǔ)內(nèi)容：用于展示基本“圖標(biāo)”、“文字”、“進(jìn)度條”等內(nèi)容，可細(xì)分為：icon（圖標(biāo)）、text（文字）、（進(jìn)度條） 。
3）表單：提供了豐富的：按鈕、表單、輸入框、多選框、單選框、列表選擇器、內(nèi)嵌列表選擇器、標(biāo)簽、滾動(dòng)選擇器、開關(guān)選擇器等頁(yè)面常用交互組件 。
4）導(dǎo)航：網(wǎng)絡(luò)鏈接組件 ， 提供了豐富屬性小程序引用地圖，可以建立各種頁(yè)面外鏈效果 。
5）多媒體：支持頁(yè)面上“音頻”、“圖片”、“視頻”的展示組件 。
6）地圖：專用的“地圖”組件，使用方便、功能強(qiáng)大 。我們上一講中的示例就是使用“地圖”組件實(shí)現(xiàn)的 。
7）畫布：高級(jí)圖形編程組件 ?？梢暂p松編程實(shí)現(xiàn)圖形化的交互效果 。
8）客服會(huì)話：簡(jiǎn)單進(jìn)入客服會(huì)話的接口組件
2、視圖容器組件示例
文章插圖
文章插圖
在上講示例基礎(chǔ)上，先在中添加“測(cè)試頁(yè)面2”，修改app.json文件如下圖：
為了區(qū)別不同的測(cè)試頁(yè)面，調(diào)整test2頁(yè)面的導(dǎo)航條title 。修改test2.json文件：
接下來，為大家展示“視圖容器”各個(gè)組件的例子 。
（1）-view組件代碼示例
修改test2.wxml文件 ， 其中添加“-view”組件，然后編譯運(yùn)行，模擬器上顯示出滾動(dòng)條效果，如下圖：
（2）view組件代碼示例
修改test2.wxml文件，在剛才的“-view”組件內(nèi)部嵌入“view”組件，然后編譯運(yùn)行，模擬器上顯示出內(nèi)嵌view組件的顯示效果小程序引用地圖，如下圖：
（3）組件代碼示例
修改test2.wxml文件 ， 添加組件，然后編譯運(yùn)行，模擬器上顯示出組件的效果，可以用鼠標(biāo)查看滑塊效果，如下圖：
“視圖容器”組件的例子就講到這里 。下回講講“基礎(chǔ)內(nèi)容”組件示例 。敬請(qǐng)期待 。
【干貨：微信小程序的正確打開方式之五—小程序組件1“視圖容器”】本文到此結(jié)束，希望對(duì)大家有所幫助 。
- 假期有去處！請(qǐng)并搜索科普走廊地圖小程序
- “IP高精準(zhǔn)定位”小程序現(xiàn)已升級(jí)完成，點(diǎn)擊查看具體使用流程
- 【龍海王】
- 土耳其的地理優(yōu)勢(shì)
- “鬼市”一稱來源
- 泰國(guó)極端天氣爆發(fā)
- 小小“麻雀”帶來的天災(zāi)
- 馬爾代夫的地理概況
- 眩暈凈化優(yōu)點(diǎn)解析
- 第一所：華中科技大學(xué)