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

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

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

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

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

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

wxml 文件：組件模版。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) 圖片組件：

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

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

2)圖集組件：

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

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

用戶端可以滑屏瀏覽

3)表單組件：

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

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

用戶在手機端填寫

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

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

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

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

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

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

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