基于之前學(xué)過 react 以及 react native，覺得組件化管理真的是很棒休雌，所以在想小程序是否也能用組件化進行管理，查了一下肝断，有很多組件化管理的框架杈曲，例如：wepy ：https://github.com/wepyjs/wepy
但是因為現(xiàn)今的代碼量并不大，并不想加進來一個框架胸懈，看看能不能不用框架也可以組件化担扑，最后找到了這篇文章：https://github.com/yinhaijiao/XcxComponentsDemo
雖然我也是根據(jù)這篇文章的說明走的，但是自己總結(jié)一下可以強化記憶趣钱。
我將第二節(jié)中的輪播圖單獨出去成為一個組件涌献，所以代碼結(jié)構(gòu)有所變化：

圖片.png

其實也就是多增加了一個組件庫，組件庫中就可以放各個組件首有，以便于組件的重用燕垃。
component中的carousel的各個文件基本和之前寫法一樣枢劝，唯一一個不同則是，js文件需要 module.exports 出來卜壕。
carousel.js

module.exports = {
    data:{
    indicatorDots:true,  //顯示面板指示點
    autoplay:true,     //自動切換
    interval:5000,    //自動切換時間間隔
    duration:1000,    //滑動動畫時長
    imgUrls:[
        '../../images/swiper/image1.png',
        '../../images/swiper/image2.png',
        '../../images/swiper/image3.png',
        '../../images/swiper/image4.png',
    ],
  },
}

wxml呈野、wxss都與之前一樣。
我們在pages 的 home 頁面要呈現(xiàn)輪播圖印叁，所以需要將輪播圖導(dǎo)進來。
home.wxml 導(dǎo)入 carousel.wxml

<include src="../../component/carousel/carousel.wxml" />

home.wxss 導(dǎo)入 carousel.wxss

@import "../../component/carousel/carousel.wxss”;

utils/util.js

module.exports = {
       /**
    * 組件共通時把組件中的方法合并到頁面中
    * param
    *          pageObj（第一個參數(shù)）：注冊Page()函數(shù)時傳入的object
    *          compObjArr(后面的參數(shù))：頁面require的共通組件
    **/
     mergeComponents: function() {
          let pageObj = arguments[0];
          let length = arguments.length;
          for (let i = 1; i < length; i++) {
               let compObj = arguments[i];
              for (let compKey in compObj) {
                  if (compKey == 'data') {
                       // 合并頁面中的data
                       let data = compObj[compKey];
                       for(let dataKey in data) {
                            pageObj.data[dataKey] = data[dataKey];
                       }
                   } else {
                       // 合并頁面中的方法
                       pageObj[compKey] = compObj[compKey];
                   }
              }
          }
     }
}

將頁面中的data和方法合同起來军掂。
home.js

var util = require('../../utils/util');
var carousel = require("../../component/carousel/carousel");

var pageObj = {
  data: {
    ...............
  }
}
// 合并子組件data值及方法
util.mergeComponents(pageObj, carousel);
Page(pageObj);

.js 中變化就比較大了：
原來：

Page({
    data:{
………………………….
},
    func:function() {
……………………………….
}
});

現(xiàn)在：

var pageObj = {
    data:{
    ………………………...
},
    func:function() {
    ………………………..
}
};
Page(pageObj);

這樣就可以將菜單欄也移到一個單獨的組件中了轮蜕。
源代碼地址：https://github.com/zouzoutingting1215/wechatApp