現(xiàn)在前端的組件 大行其道填大，大家都認為組件可以更適合大型項目脊凰，更加的便捷，所以我們需要掌握一下箭券。
實戰(zhàn)一
先做一個簡單的净捅，常用的彈框，最終效果：
step 1 創(chuàng)建components
根目錄下創(chuàng)建一個components文件夾辩块。然后在里邊建一個子目錄蛔六，如exchange,此時右鍵新建一個component即可產(chǎn)生需要的子文件
例一
把一個以前本來在多個頁面會應用到的彈框整合到外邊。
step1
根目錄下創(chuàng)建一個components文件夾废亭。然后在里邊建一個子目錄国章，如convert
step2
wxml
<!--components/exchange/exchange.wxml-->
<view class="wx-popup" hidden="{{flag}}">
<view class='popup-container'>
<view class="wx-popup-title">{{title}}</view>
<view class="wx-popup-con">{{content}}</view>
<view class="wx-popup-btn">
<text class="btn-no" bindtap='_error'>{{btn_no}}</text>
<text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
</view>
</view>
</view>
接下來寫wxss,說明一下，咱們調(diào)樣式一般是先在其他頁面寫好某一塊豆村，此時樣式啊捉腥，結(jié)構(gòu)啊，js啊你画，都已經(jīng)實現(xiàn)了抵碟，然后再整合到組件里，并不是你想寫一個這樣的組件上來就在這個組件這一部分寫的坏匪，當然拟逮，如果你能找到一個頁面來輔助顯示你當前寫的這個組件的邏輯和樣式那就無所謂啦，程序并沒有一定之規(guī)适滓，條條大路通羅馬敦迄。
<!--components/exchange/exchange.wxml-->
<view class="wx-popup" hidden="{{flag}}">
<view class='popup-container'>
<view class="wx-popup-title">{{title}}</view>
<view class="wx-popup-con">{{content}}</view>
<view class="wx-popup-btn">
<text class="btn-no" bindtap='_error'>{{btn_no}}</text>
<text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
</view>
</view>
</view>
json文件這里是跟普通頁面的json是不一樣的：
{
"component": true,
"usingComponents": {}
}
接下來就是最重要的邏輯部分的代碼了
// components/exchange/exchange.js
Component({
options: {
multipleSlots: true // 在組件定義時的選項中啟用多slot支持
},
/**
* 組件的屬性列表
*/
properties: {
title: { // 屬性名
type: String, // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
value: '標題' // 屬性初始值（可選）凭迹，如果未指定則會根據(jù)類型選擇一個
},
// 彈窗內(nèi)容
content: {
type: String,
value: '內(nèi)容'
},
// 彈窗取消按鈕文字
btn_no: {
type: String,
value: '取消'
},
// 彈窗確認按鈕文字
btn_ok: {
type: String,
value: '確定'
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
flag: true,
},
/**
* 組件的方法列表
*/
methods: {
//隱藏彈框
hidePopup: function () {
this.setData({
flag: !this.data.flag
})
},
//展示彈框
showPopup() {
this.setData({
flag: !this.data.flag
})
},
/*
* 內(nèi)部私有方法建議以下劃線開頭
* triggerEvent 用于觸發(fā)事件
*/
_error() {
//觸發(fā)取消回調(diào)
this.triggerEvent("error")
},
_success() {
//觸發(fā)成功回調(diào)
this.triggerEvent("success");
}
}
})
step 3 在其他頁面應用
建一個新的頁面test罚屋，在該頁面使用這個組件
wxml
<!--pages/test/test.wxml-->
<view class="container" style='margin-top:200rpx;'>
<view class="userinfo">
<button bindtap="showPopup"> 點我 </button>
</view>
<popup id='popup'
title='小組件'
content='學會了嗎'
btn_no='沒有'
btn_ok='學會了'
bind:error="_error"
bind:success="_success">
</popup>
</view>
json文件
{
"usingComponents": {
"popup": "/components/exchange/exchange"
}
}
js
const app = getApp()
Page({
onReady: function () {
//獲得popup組件
this.popup = this.selectComponent("#popup");
},
showPopup() {
this.popup.showPopup();
},
//取消事件
_error() {
console.log('你點擊了取消');
this.popup.hidePopup();
},
//確認事件
_success() {
console.log('你點擊了確定');
this.popup.hidePopup();
}
})
就能實現(xiàn)效果了。
案例遇到的幾個問題：
關于樣式：
只使用類名選擇器嗅绸，不要使用其他脾猛，包括后代選擇器，而且app.wxss里的樣式以及組件所在頁面的樣式對組件的樣式?jīng)]有影響/不起作用
兩個開發(fā)者工具警告的意思：
頁面沒有處理函數(shù)
這是頁面沒有相應的事件處理函數(shù)鱼鸠。
組件沒有處理函數(shù)
這是組件的methods里邊沒有相應的事件處理函數(shù)
不喜歡過長 的文章猛拴，所以決定第二個實戰(zhàn)和第三個實戰(zhàn)項目寫在下一篇羹铅。
