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

开发自定义组件日历

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

目录

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