微信小程式 自己製作小組件例項詳解

2022-09-28 04:24:11 字數 805 閱讀 6305

微信小程式 製作小組件

對於我們日常中一些公共的東西可以封裝成元件,然後在各個頁面使用。對於小程式,我們也可以封裝我們需要的一些公共的東西。

這裡我們講解乙個小外掛程式。

如上圖所示,乙個小外掛程式,單擊是展開,在單擊關閉的時候,按鈕關閉。

頁面的wxml (app.wxml)

首頁whftb class="section2">

class="icon2" src="">

訂單我的

這裡主要是外掛程式的壓麵展示效果,都寫在標籤裡面就可以了。

頁面的js (app.js)

var iconlist = {}; //設定乙個物件名字存放資料

iconlist.wdg= ,

closeallicon: function(e))

},showallicon :function(e))

}};module.exports=iconlist //將介面的進行暴露,方便在外面呼叫

接下來封裝好了,就是該怎麼使用了。

在需要的wxml頁面:

通過 引入斤頁面,再通過

進行使用。whftb

在需要的wxml頁面:

通過var iconlist = require('../wdg/iconlist');引入對應的js

var util= requirewww.cppcns.com('../../util/util');

var page = new util.page();

引入對應檔案。

本文標題: 微信小程式 自己製作小組件例項詳解

本文位址:

微信小程式 首頁製作簡單例項

微信小程式 首頁製作簡單例項 實現效果圖 首先從大的方面來講,就是設定了window的屬性 n igationbarbackgroundcolor afe2e6 bar背景顏色 n igationbartextstyle white bar字型顏色 backgroundcolor white 背景顏...

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...