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

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

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

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

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

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

wxml 文件：組件模版。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1) 圖片組件：

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

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

2)圖集組件：

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

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

用戶端可以滑屏瀏覽

3)表單組件：

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

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

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

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

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

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

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

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

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

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