微信小程序（四） 组件化管理

基于之前学过 react 以及 react native，觉得组件化管理真的是很棒，所以在想小程序是否也能用组件化进行管理，查了一下，有很多组件化管理的框架，例如：wepy ：https://github.com/wepyjs/wepy
但是因为现今的代码量并不大，并不想加进来一个框架，看看能不能不用框架也可以组件化，最后找到了这篇文章：https://github.com/yinhaijiao/XcxComponentsDemo
虽然我也是根据这篇文章的说明走的，但是自己总结一下可以强化记忆。
我将第二节中的轮播图单独出去成为一个组件，所以代码结构有所变化：

图片.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 页面要呈现轮播图，所以需要将轮播图导进来。
home.wxml 导入 carousel.wxml

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

home.wxss 导入 carousel.wxss

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

utils/util.js

module.exports = {
       /**
    * 组件共通时把组件中的方法合并到页面中
    * param
    *          pageObj（第一个参数）：注册Page()函数时传入的object
    *          compObjArr(后面的参数)：页面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() {
……………………………….
}
});

现在：

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

这样就可以将菜单栏也移到一个单独的组件中了。
源代码地址：https://github.com/zouzoutingting1215/wechatApp