微信小程序交互性組件如何自定義?

小程序基礎(chǔ)庫(kù)已經(jīng)包含與自定義組件相關(guān)的支持，決定對(duì)這些特性開(kāi)放公測(cè)。有了這些特性之后，我們可以：將一些復(fù)用性強(qiáng)的代碼抽象成“自定義組件”，它們的使用方法與基礎(chǔ)庫(kù)內(nèi)置的 view 、 button 等組件非常相似。

一、如何編寫(xiě)一個(gè)自定義組件?

每個(gè)自定義組件由四個(gè)代碼文件組成：

json 文件：用于放置一些最基本的組件配置。

wxml 文件：組件模版。

wxss 文件：組件的樣式，只在組件內(nèi)部節(jié)點(diǎn)上生效(這個(gè)文件是可選的)。

js 文件：組件的js代碼，承載組件的主要邏輯。

這四個(gè)文件與編寫(xiě)一個(gè)頁(yè)面時(shí)用到的四個(gè)文件非常類(lèi)似，但也有區(qū)別。

二、如何利用這四個(gè)文件編寫(xiě)一個(gè)簡(jiǎn)單的自定義組件?

**組件配置******

編寫(xiě)一個(gè)自定義組件，首先應(yīng)在小程序代碼目錄中合適的位置創(chuàng)建一個(gè) json 文件。這里我們把文件放置在小程序的 components 目錄下，名為 custom-checkbox.json 。

**組件模版******

在同一目錄下，創(chuàng)建一個(gè)模版文件 custom-checkbox.wxml 。這個(gè)文件的寫(xiě)法與頁(yè)面模版很類(lèi)似：

這個(gè)模版將在組件中渲染出一個(gè) checkbox 和一個(gè) label 。

**組件樣式******

同樣類(lèi)似于頁(yè)面， wxss 文件中可以指定組件節(jié)點(diǎn)的樣式。其中的樣式僅在組件內(nèi)部生效。需要注意的是，樣式只能通過(guò)類(lèi)選擇器(如 .the-class-name )來(lái)指定：

**組件定義******

組件的js文件中必須包含組件定義。定義時(shí)使用 Component 構(gòu)造器：

簡(jiǎn)單的 Component 構(gòu)造器調(diào)用包含3個(gè)定義段： methods 中的方法可以用來(lái)包含組件的事件回調(diào)函數(shù); data 是組件的內(nèi)部數(shù)據(jù)，可以用 this.setData 方法來(lái)改變; properties 中聲明這個(gè)組件的屬性，上例中聲明了 title 屬性，這樣，組件外部在使用組件時(shí)就可以指定這個(gè)屬性的值。

在小豬CMS小程序V2.0中，我們新增了三大交互性組件：圖片、圖集、表單。

1) 圖片組件：

為了幫助商家更好地展示商品，小程序V2.0中新增圖片組件。商家只需拖拽圖片組件到需要添加的位置，并上傳宣傳圖片即可。圖片組件支持圖片單列、雙列、三列排版，商家可以自定義邊框樣式。

點(diǎn)擊功能庫(kù)添加，還可以為圖片添加不同的小程序頁(yè)面。比如餐飲商家可以在某一道特色菜品圖片的功能庫(kù)添加上菜品介紹的文章，用戶點(diǎn)擊菜品圖片，即可進(jìn)入介紹菜品的文章頁(yè)面。

2)圖集組件：

與圖片組件相比，圖集組件則更像是一個(gè)分類(lèi)的相冊(cè)，比如餐飲商家可以添加一個(gè)飲品圖集、一個(gè)甜品圖集等等。商家在后臺(tái)添加圖集組件，并對(duì)圖集的樣式風(fēng)格進(jìn)行個(gè)性化設(shè)置，如橫版或豎版展示圖片、圖片大小、邊框樣式、顏色等等。

添加并保存成功后，用戶在手機(jī)上可以滑屏瀏覽圖集中的圖片。同樣，圖集組件中的圖片也支持功能庫(kù)添加。

用戶端可以滑屏瀏覽

3)表單組件：

拖拽表單組件到需要添加的位置，并對(duì)表單的樣式、按鈕的樣式進(jìn)行自定義。

比如：餐飲商家想做一次試吃體驗(yàn)活動(dòng)，即可使用表單組件，在小程序中新增一個(gè)試吃報(bào)名表。用戶在小程序上即可直接報(bào)名參加試吃活動(dòng)。

用戶在手機(jī)端填寫(xiě)

如何查看用戶填寫(xiě)的表單信息?

當(dāng)商家把鼠標(biāo)移到小程序模板上，將會(huì)顯示查看表單數(shù)據(jù)按鈕和刪除模板按鈕。商家點(diǎn)擊第一個(gè)按鈕，即可查看用戶提交的表單數(shù)據(jù)。

點(diǎn)擊查看表單數(shù)據(jù)按鈕

查看用戶提交的數(shù)據(jù)

小豬CMS是國(guó)內(nèi)知名的微信生態(tài)研發(fā)商和服務(wù)商，國(guó)家高新技術(shù)企業(yè)，雙軟認(rèn)證企業(yè)，創(chuàng)業(yè)板上市籌備企業(yè)。主營(yíng)微信電商分銷(xiāo)、微信營(yíng)銷(xiāo)、O2O、智慧店鋪(大數(shù)據(jù)智能會(huì)員營(yíng)銷(xiāo))、小程序系統(tǒng)等微信生態(tài)下產(chǎn)品。

小豬CMS擁有完善的公眾號(hào)+小程序方案，面向零售電商、餐飲、酒店、美業(yè)、健身瑜伽、酒吧、KTV、康體SPA等行業(yè)，深度功能支撐，不做流于表面的小程序。傻瓜化拖拽制作自己想要的小程序，100+海量模板供您選擇，具有支付、預(yù)約、移動(dòng)CRM、大數(shù)據(jù)營(yíng)銷(xiāo)等功能，全球數(shù)十萬(wàn)家平臺(tái)客戶的支持 遍布全國(guó)各地的案例。

(更多精彩開(kāi)發(fā)動(dòng)態(tài)，敬請(qǐng)關(guān)注小豬CMS*更新，服務(wù)熱線：400-893-5552 /0551-63474223 企業(yè)QQ800033550;800022936 微信號(hào)：pigcms)