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

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

小程序基礎庫已經包含與自定義組件相關的支持，決定對這些特性開放公測。有了這些特性之后，我們可以：將一些復用性強的代碼抽象成“自定義組件”，它們的使用方法與基礎庫內置的 view 、 button 等組件非常相似。

一、如何編寫一個自定義組件?

每個自定義組件由四個代碼文件組成：

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

wxml 文件：組件模版。

wxss 文件：組件的樣式，只在組件內部節點上生效(這個文件是可選的)。

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

這四個文件與編寫一個頁面時用到的四個文件非常類似，但也有區別。

二、如何利用這四個文件編寫一個簡單的自定義組件?

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

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

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

在同一目錄下，創建一個模版文件 custom-checkbox.wxml 。這個文件的寫法與頁面模版很類似：

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

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

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

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

組件的js文件中必須包含組件定義。定義時使用 Component 構造器：

簡單的 Component 構造器調用包含3個定義段： methods 中的方法可以用來包含組件的事件回調函數; data 是組件的內部數據，可以用 this.setData 方法來改變; properties 中聲明這個組件的屬性，上例中聲明了 title 屬性，這樣，組件外部在使用組件時就可以指定這個屬性的值。

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

1) 圖片組件：

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

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

2)圖集組件：

與圖片組件相比，圖集組件則更像是一個分類的相冊，比如餐飲商家可以添加一個飲品圖集、一個甜品圖集等等。商家在后臺添加圖集組件，并對圖集的樣式風格進行個性化設置，如橫版或豎版展示圖片、圖片大小、邊框樣式、顏色等等。

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

用戶端可以滑屏瀏覽

3)表單組件：

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

比如：餐飲商家想做一次試吃體驗活動，即可使用表單組件，在小程序中新增一個試吃報名表。用戶在小程序上即可直接報名參加試吃活動。

用戶在手機端填寫

如何查看用戶填寫的表單信息?

當商家把鼠標移到小程序模板上，將會顯示查看表單數據按鈕和刪除模板按鈕。商家點擊第一個按鈕，即可查看用戶提交的表單數據。

點擊查看表單數據按鈕

查看用戶提交的數據

小豬CMS是國內知名的微信生態研發商和服務商，國家高新技術企業，雙軟認證企業，創業板上市籌備企業。主營微信電商分銷、微信營銷、O2O、智慧店鋪(大數據智能會員營銷)、小程序系統等微信生態下產品。

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

(更多精彩開發動態，敬請關注小豬CMS*更新，服務熱線：400-893-5552 /0551-63474223 企業QQ800033550;800022936 微信號：pigcms)