微信小程序開發---自定義組件
阿新 • • 發佈:2018-12-12
開發 們的 函數 toast com 配置 微信小程序開發 sin efi 的渲染,其中,屬性值是可由組件外部傳入的。
開發者可以將頁面內的功能模塊抽象成自定義組件,以便在不同的頁面中重復使用;也可以將復雜的頁面拆分成多個低耦合的模塊,有助於代碼維護。自定義組件在使用時與基礎組件非常相似。
創建自定義組件
類似於頁面,一個自定義組件由 json
wxml
wxss
js
4個文件組成。要編寫一個自定義組件,首先需要在 json
文件中進行自定義組件聲明(將 component
字段設為 true
可這一組文件設為自定義組件):同時,還要在 wxml
文件中編寫組件模板,在 wxss
文件中加入組件樣式,它們的寫法與頁面的寫法類似。在自定義組件的 js
文件中,需要使用 Component()
來註冊組件,並提供組件的屬性定義、內部數據和自定義方法。組件的屬性值和內部數據將被用於組件 wxml
使用自定義組件
使用已註冊的自定義組件前,首先要在頁面的 json
文件中進行引用聲明。這樣,在頁面的 wxml
中就可以像使用基礎組件一樣使用自定義組件。節點名即自定義組件的標簽名,節點屬性即傳遞給組件的屬性值。
註意:
- 因為 WXML 節點標簽名只能是小寫字母、中劃線和下劃線的組合,所以自定義組件的標簽名也只能包含這些字符。
- 自定義組件也是可以引用自定義組件的,引用方法類似於頁面引用自定義組件的方式(使用
usingComponents
字段)。 - 自定義組件和頁面所在項目根目錄名不能以“wx-”為前綴,否則會報錯。
接下來我們自己創建一個<chw-toast>組件,效果圖如下
第一步:創建自定義組件
- 創建組件chw-toast目錄,存放各個文件
- 配置chw-toast.josn文件
- 創建自定義組件樣式(container控制toast位置,toast-text控制文字格式)
- 修改chw-toast.js文件,其中值得註意的是設置timeout的時候需要獲取當前this(hidden為false時候的)來重新setdata,而不能直接用this(hidden為true時候的)
// page/chw-toast.js Component({ /** * 組件的屬性列表 */ properties: { toastText:{ type:String, value:‘chw‘ } }, /** * 組件的初始數據 */ data: { toastShow:false }, /** * 組件的方法列表 */ methods: { showToast(text,time){ this.setData({ toastShow:!this.data.toastShow, toastText:text }) if(time===undefined) { time=3000 } var that=this setTimeout(function(){ that.setData({ toastShow:!that.data.toastShow }) },time) } } })
第二步:使用組件
- 在index.js中聲明
- 在index.wxml引用
- 配置index.js,在渲染完成後,首先要獲得chw-toast組件,得到該對象後通過綁定修改值,可以設置顯示時間,可以采用默認時間
// page/index/index.js Page({ /** * 頁面的初始數據 */ data: { }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { this.chwtoast=this.selectComponent("#chw-toast") }, showToast:function(){ this.chwtoast.showToast("xixiixixi") }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } })
微信小程序開發---自定義組件