現(xiàn)在前端的組件 大行其道，大家都認(rèn)為組件可以更適合大型項(xiàng)目，更加的便捷，所以我們需要掌握一下。

實(shí)戰(zhàn)一

先做一個(gè)簡(jiǎn)單的，常用的彈框，最終效果：

step 1 創(chuàng)建components

根目錄下創(chuàng)建一個(gè)components文件夾。然后在里邊建一個(gè)子目錄，如exchange,此時(shí)右鍵新建一個(gè)component即可產(chǎn)生需要的子文件

例一

把一個(gè)以前本來在多個(gè)頁(yè)面會(huì)應(yīng)用到的彈框整合到外邊。

step1

根目錄下創(chuàng)建一個(gè)components文件夾。然后在里邊建一個(gè)子目錄，如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)樣式一般是先在其他頁(yè)面寫好某一塊，此時(shí)樣式啊，結(jié)構(gòu)啊，js啊，都已經(jīng)實(shí)現(xiàn)了，然后再整合到組件里，并不是你想寫一個(gè)這樣的組件上來就在這個(gè)組件這一部分寫的，當(dāng)然，如果你能找到一個(gè)頁(yè)面來輔助顯示你當(dāng)前寫的這個(gè)組件的邏輯和樣式那就無所謂啦，程序并沒有一定之規(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文件這里是跟普通頁(yè)面的json是不一樣的：

{
  "component": true,
  "usingComponents": {}
}

接下來就是最重要的邏輯部分的代碼了

// components/exchange/exchange.js
Component({
  options: {
    multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
  },
  /**
   * 組件的屬性列表
   */
  properties: {
    title: {            // 屬性名
      type: String,     // 類型（必填），目前接受的類型包括：String, Number, Boolean, Object, Array, null（表示任意類型）
      value: '標(biāo)題'     // 屬性初始值（可選），如果未指定則會(huì)根據(jù)類型選擇一個(gè)
    },
    // 彈窗內(nèi)容
    content: {
      type: String,
      value: '內(nèi)容'
    },
    // 彈窗取消按鈕文字
    btn_no: {
      type: String,
      value: '取消'
    },
    // 彈窗確認(rèn)按鈕文字
    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 在其他頁(yè)面應(yīng)用

建一個(gè)新的頁(yè)面test，在該頁(yè)面使用這個(gè)組件
wxml

<!--pages/test/test.wxml-->
<view class="container" style='margin-top:200rpx;'>
  <view class="userinfo">
    <button bindtap="showPopup"> 點(diǎn)我 </button>
  </view>
  <popup id='popup' 
      title='小組件' 
      content='學(xué)會(huì)了嗎' 
      btn_no='沒有' 
      btn_ok='學(xué)會(huì)了'
      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('你點(diǎn)擊了取消');
    this.popup.hidePopup();
  },
  //確認(rèn)事件
  _success() {
    console.log('你點(diǎn)擊了確定');
    this.popup.hidePopup();
  }
})

就能實(shí)現(xiàn)效果了。

案例遇到的幾個(gè)問題：

關(guān)于樣式：

只使用類名選擇器，不要使用其他，包括后代選擇器，而且app.wxss里的樣式以及組件所在頁(yè)面的樣式對(duì)組件的樣式?jīng)]有影響/不起作用

兩個(gè)開發(fā)者工具警告的意思：

頁(yè)面沒有處理函數(shù)

這是頁(yè)面沒有相應(yīng)的事件處理函數(shù)。

組件沒有處理函數(shù)

這是組件的methods里邊沒有相應(yīng)的事件處理函數(shù)

不喜歡過長(zhǎng) 的文章，所以決定第二個(gè)實(shí)戰(zhàn)和第三個(gè)實(shí)戰(zhàn)項(xiàng)目寫在下一篇。