小程序：前端小白在小程序的路上漸行漸遠

開發自定義組件日曆

微信小程序小白，若是不對之處，請指教，萬分感謝。

目錄

1. 日曆功能開發
2. 改爲組件
3. 踩到的坑

效果圖：

日曆功能開發

主要的功能實現思路是獲取當前的new Data(),
在wxml定義一些屬性，把獲取的時間灌入到這些屬性裏，
在wxml中判斷一下選擇的是年仍是月份，這樣區分是爲了翻頁效果，
剩下的就是在js文件中處理翻頁邏輯，月份就遞減或遞增，而年份我是直接循環了12次，在push到數組中，在解析。

改爲組件

最大的坑在這裏，看開發文檔徹底屬於懵逼的狀態，一邊從網上搜着其餘人寫的例子，一邊對照api。

步驟：

1. 在根目錄下建立一個名爲component文件夾，含義是全部的組件都放到這個文件夾下。
2. 在component文件夾裏在建立一個，你當前要作的功能組件的名稱，例如：我要作的是日曆因此取名calendar。
3. 而後按照開發文檔的說法，在從calendar裏建立4個後綴名分別是wxml、wxss、json、js文件。
4. wxml和wxss文件直接遷移過去就行。

5. 重點說一下組件的js，首先既然要弄成一個組件，就須要把整個代碼放到Component構造器裏，我沒有加，由於用不到。

   options: {
      multipleSlots: true // 在組件定義時的選項中啓用多slot支持
    }

6. 寫了data和methods，他們分別是組件內部數據和方法。內部方法官方建議在開頭加_，寶寶很聽話，把原來寫的全部方法都加了_。
7. 而後在父級的js文件裏，設置什麼週期。onReady加載組件。
8. 編寫事件函數觸發組件裏的事件。

9. 在父級的json文件中

   {
      "usingComponents": { 
          // 此爲你要關聯的組件目錄地址。
          "calendar-box-name":"/component/calendar/time"   
      }
   }

以上就算完成了，若是須要父級頁面和組件數據交互，須要在組件的js文件裏寫上監聽事件。content是我設置的要傳遞的數據變量。calendar父級監聽組件是否觸發。

// 組件js
var myEventDetail = {content}, // detail對象，提供給事件監聽函數
    myEventOption = {}; // 觸發事件的選項
this.triggerEvent("calendar",myEventDetail,myEventOption);
// 父級wxml
// 若是組件觸發事件，執行`onCalendar`事件
<calendar-box-name id="calendar" bind:calendar="onCalendar"></calendar-box-name>
// 父級js
onCalendar:function(e){
    this.setData({
        timeTitle:e.detail.content   //接受組件傳的數據，並賦值到父級變量裏。
    })
  }

踩到的坑

1. 由於沒有dom操做，寫做的思路一直轉不過彎來。例如：給循環出來的元素，添加class效果。最後使用三目判斷弄出來的。
2. 一直沒有分清楚是在組件的json裏寫引用仍是在父級的json中寫引用。
3. 父級和組件間的交互一直沒有轉過來。

建議：

1. 作完忽然開竅了，在wxml和js中設置多個變量，拋出原來的dom的操做習慣，相同的數據，直接用同樣的變量，js針對變量處理，思路就清晰多了。