其實小程序開發很像vue和react的結合,數據綁定和setData 重新渲染頁面的數據,最近發現連寫組件都是很像,也是醉了,自我認為哈,
因為小程序可以將頁面內的功能模塊抽象成自定義組件,以便在不同的頁面中復用,提高自己代碼的可讀性,降低自己維護代碼的成本
下面看看代碼:
1.我們初始化一個小程序(本示例基礎版本庫為 1.7 ),刪掉里面的示例代碼,並新建一個 components
文件夾,用於存放我們以后開發中的所用組件,今天我們的目的是實現一個 彈框 組件,因此,我們在 components
組件中新建一個 Dialog
文件夾來存放我們的彈窗組件,在 Dialog
下右擊新建 Component
並命名為 dialog
后,會生成對應的 json wxml wxss js
4個文件,也就是一個自定義組件的組成部分,此時你的項目結構應該如下圖所示:
2.組件初始化工作准備完成,接下來就是組件的相關配置,
首先我們需要聲明自定義組件,也就是將 dialog.json
中 component
字段設為 true
:
{
"component": true, // 自定義組件聲明
"usingComponents": {} // 可選項,用於引用別的組件
}
3.其次,我們需要在 dialog.wxml
文件中編寫彈窗組件模版,在 dialog.wxss
文件中加入彈窗組件樣式,
dialog.wxml
:
<!--components/Dialog/dialog.wxml--> <view class='wx_dialog_container' hidden="{{!isShow}}"> <view class='wx-mask'></view> <view class='wx-dialog'> <view class='wx-dialog-title'>{{ title }}</view> <view class='wx-dialog-content'>{{ content }}</view> <view class='wx-dialog-footer'> <view class='wx-dialog-btn' catchtap='_cancelEvent'>{{ cancelText }}</view> <view class='wx-dialog-btn' catchtap='_confirmEvent'>{{ confirmText }}</view> </view> </view> </view>
dialog.wxss:
/* components/Dialog/dialog.wxss */ .wx-mask{ position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); } .wx-dialog{ position: fixed; z-index: 5000; width: 80%; max-width: 600rpx; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #FFFFFF; text-align: center; border-radius: 3px; overflow: hidden; } .wx-dialog-title{ font-size: 18px; padding: 15px 15px 5px; } .wx-dialog-content{ padding: 15px 15px 5px; min-height: 40px; font-size: 16px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #999999; } .wx-dialog-footer{ display: flex; align-items: center; position: relative; line-height: 45px; font-size: 17px; } .wx-dialog-footer::before{ content: ''; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #D5D5D6; color: #D5D5D6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .wx-dialog-btn{ display: block; -webkit-flex: 1; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(1){ color: #353535; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(2){ color: #3CC51F; } .wx-dialog-footer .wx-dialog-btn:nth-of-type(2):after{ content: " "; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #D5D5D6; color: #D5D5D6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }
4.dialog.js
是自定義組件的構造器,是使用小程序中 Component
構造器生成的,
調用 Component
構造器時可以用來指定自定義組件的屬性、數據、方法等
// components/Dialog/dialog.js Component({ options: { multipleSlots: true // 在組件定義時的選項中啟用多slot支持 }, /** * 組件的屬性列表 * 用於組件自定義設置 */ properties: { // 彈窗標題 title: { // 屬性名 type: String, // 類型(必填),目前接受的類型包括:String, Number, Boolean, Object, Array, null(表示任意類型) value: '標題' // 屬性初始值(可選),如果未指定則會根據類型選擇一個 }, // 彈窗內容 content :{ type : String , value : '彈窗內容' }, // 彈窗取消按鈕文字 cancelText :{ type : String , value : '取消' }, // 彈窗確認按鈕文字 confirmText :{ type : String , value : '確定' } }, /** * 私有數據,組件的初始數據 * 可用於模版渲染 */ data: { // 彈窗顯示控制 isShow:false }, /** * 組件的方法列表 * 更新屬性和數據的方法與更新頁面數據的方法類似 */ methods: { /* * 公有方法 */ //隱藏彈框 hideDialog(){ this.setData({ isShow: !this.data.isShow }) }, //展示彈框 showDialog(){ this.setData({ isShow: !this.data.isShow }) }, /* * 內部私有方法建議以下划線開頭 * triggerEvent 用於觸發事件 */ _cancelEvent(){ //觸發取消回調 this.triggerEvent("cancelEvent") }, _confirmEvent(){ //觸發成功回調 this.triggerEvent("confirmEvent"); } } })
5.截至目前為止,你應該完成了一個自定義彈窗組件的大部分,
可是你保存后並沒有發現任何變化,因為我們還需要在 index.wxml
文件中引入它!
{
"usingComponents": {
"dialog": "/components/Dialog/dialog"
}
}
然后我們在 index.wxml
中引入它,並增加我們自定義的一些值,如下
<!--index.wxml--> <view class="container"> <dialog id='dialog' title='我是標題' content='恭喜你,學會了小程序組件' cancelText='知道了' confirm='謝謝你' bind:cancelEvent="_cancelEvent" bind:confirmEvent="_confirmEvent"> </dialog> <button type="primary" bindtap="showDialog"> ClickMe! </button> </view>
嗯哪,還差最后一步,index.js
配置,沒錯,這個也很簡單,我就復制粘貼了
//index.js //獲取應用實例 const app = getApp() Page({ /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { //獲得dialog組件 this.dialog = this.selectComponent("#dialog"); }, showDialog(){ this.dialog.showDialog(); }, //取消事件 _cancelEvent(){ console.log('你點擊了取消'); this.dialog.hideDialog(); }, //確認事件 _confirmEvent(){ console.log('你點擊了確定'); this.dialog.hideDialog(); } })
點擊按鈕會有下面的圖:
有木有發現和react,vue寫法差不多。。。。、
哈哈,突然感覺會vue的來玩小程序簡直很容易上手,小程序目前還是很火的呀