在小程式開發的第30天，整個版本的專案可以說是差不多手工，但是總體的專案大小已經非常接近限度，所以說專案的優化勢在必行，所以我給大家分享關於我在專案實戰中總結的小程式元件的使用：
因為在很多頁面都需要這樣的乙個切換，底部彈框效果，所以說我們需要進行乙個封裝。這裡大家跟緊我
第一步：先建立components資料夾，防止整個專案的所有的元件。
第二步：在component資料夾中右鍵建立元件，名稱為dialog。
目錄如下：
接下來我們就需要對我們的彈出框元件進行設定了。
第三步：在dialog.wxml中寫入彈出框**：
}第四步：在dialog.wxss中寫入樣式**：取消
/* 下拉框的實現 */注：彈出框的出現是從底部劃出所以實現思路是：.drop-bot
.drop-bot .box
.item_list .li.style
.item_list .li
@keyframes slidedown
to }@keyframes slideup
to }.open
.close
.hide
.show
通過css3動畫實現高度從0=》某一高度的變化，通過新增不同類名引用不同的動畫，0-365為出現，365-0為消失，當然我們也可以通過定位，改變其top值也是可以的。
第五步：為元件配置json，預設不用配置如下：
}第六步：配置元件的業務邏輯：
// 彈出框元件至此元件的配置也就結束了，下來我們需要進行呼叫方檔案的配置：component(,
accountname:
},//存放公共資料的地方，可以供呼叫方傳遞資料
/*** 元件的初始資料
*/data: ,//私有屬性的地方，data中的資料只有元件可以訪問，外部無法訪問
/*** 元件的方法列表
*/methods: )
},//點選遮罩層消失
select: function (e) )
this.triggerevent("action",oaccount);//將該方法丟擲
},//選擇下拉的使用者名稱
toggle: function () );
}if (list_state) );
} else );
}},//調出彈出框事件
}//存放事件的地方
})
第七步在pages中建立右鍵建立index目錄，在該目錄中建立page命名為index
第八步：配置index.wxml：
}切換注：給頭部新增點選事件toggle（toggle為dialog元件內方法）
在需要呼叫的頁面中新增摸板，摸板的標籤就是我們在json中配置的template-dialog名稱，
模板中id是在該頁面中給呼叫的摸板起乙個名稱，用於在js中呼叫（只能用id）
account和accountname是我們將index中的資料傳輸到元件中，以供事件的正常執行。
bind:action="selected"是呼叫元件丟擲的方法
為什麼說toggle和action同為元件的方法我們卻只在這裡生命action呢？
因為toggle雖是元件的方法，但我們只需要對他進行呼叫就可以，不需要進行任何的資料的傳輸，而action所代表的select事件則是需要我們在呼叫的時候進行 的資料的傳輸。
第九步：配置index.wxss：
.header第十步：我們配置他的json檔案：
}注："template-dialog"是我們在呼叫摸板時給摸板所起的名稱，後面為其路徑
十一：下來就是我們的業務邏輯：
page(,,,下來我們的乙個彈出框元件的編寫，呼叫就算完成了，實現並不複雜，關鍵時對元件的各個屬性的了解。,],},onready: function (e) ,
toggle: function (e) , //給頭部新增的調出下拉框的事件
switchaccount: function (options) )
}, //元件內部的方法將options傳遞過來的資料使用上
})
各位同路人，記得看思路哦。
小程式開發之元件audio（音訊）
音訊。注意 1.6.0 版本開始，該元件不再維護。建議使用能力更強的 wx.createinneraudiocontext 介面 例如 效果展示 index.wxml audio音訊 進度暫停 index.wxss audio title audio slider button index.js p...
小程式開發之 表單元件（picker）
參考 picker onshow function onhide function globaldata style v2 sitemaplocation sitemap.json picker.js page index 0,multiarray 無脊柱動物 脊柱動物 扁性動物 線形動物 環節動物...
小程式開發 新建元件及使用
pages components bottom index 3 components bottom index.json檔案裡開啟元件 比如我這在 pages index index.wxml中使用元件 1 在 pages index index.json檔案中引用引用元件 2 index.wxml...