小程序：前端小白在小程序的路上渐行渐远

开发自定义组件日历

微信小程序小白，若是不对之处，请指教，万分感谢。

目录

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针对变量处理，思路就清晰多了。