您好,歡迎來(lái)到易龍商務(wù)網(wǎng)!
【廣告】
發(fā)布時(shí)間:2018-03-13 16:13  
微信小程序交互性組件如何自定義?
小程序基礎(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è)文件非常類似,但也有區(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è)面模版很類似:
這個(gè)模版將在組件中渲染出一個(gè) checkbox 和一個(gè) label 。
**組件樣式******
同樣類似于頁(yè)面, wxss 文件中可以指定組件節(jié)點(diǎn)的樣式。其中的樣式僅在組件內(nèi)部生效。需要注意的是,樣式只能通過(guò)類選擇器(如 .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è)分類的相冊(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)微信電商分銷、微信營(yíng)銷、O2O、智慧店鋪(大數(shù)據(jù)智能會(huì)員營(yíng)銷)、小程序系統(tǒng)等微信生態(tài)下產(chǎn)品。
小豬CMS擁有完善的公眾號(hào)+小程序方案,面向零售電商、餐飲、酒店、美業(yè)、健身瑜伽、酒吧、KTV、康體SPA等行業(yè),深度功能支撐,不做流于表面的小程序。傻瓜化拖拽制作自己想要的小程序,100+海量模板供您選擇,具有支付、預(yù)約、移動(dòng)CRM、大數(shù)據(jù)營(yíng)銷等功能,全球數(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)