Copy 的痛苦

写小程序一段时间了，总遇到某些模块的复用问题，之前没有接触到组件，每次都是拷贝在粘贴。
虽然动作简单，但是维护极难，特别是在逻辑复杂的地方，每次粘贴后都要思考和验证一下是否能正确运行，总之，耗时耗力，做无用功。

看过 PHP、Python 工程师写代码，了解部分模块都是抽象成独立组件，需要时直接引用即可，在我想来这是不是就是 interface 和实现的关系？我是半吊子别打我。

在复用中总结

我在实际编码过程中，类似于 Loading、当前无数据、出现异常重新载入时需要反复使用，于是 Component 的重要性被我提升了上来，为什么一开始没有使用呢？在我看来“在需要时使用而不是为了实现而实现” 更重要。

官方文档是这样介绍的 https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

独立组件同样是拥有自身的生命周期，当然也可以和引用位置的生命周期配合使用，需要注意的是在组件中无法监听引用位置的 onLoad 状态，是我使用姿势不对吗？欢迎在评论中打脸。

pageLifetimes: {
    load: function(){
        console.log('onLoad 监听')  // 我这里没有输出，不晓得各位大佬的有木有
    },
    show: function(){
    }
    ...
}

slot 插槽

在使用组件过程中，有可能在不同引用位置，部分 UI 或动作不一致，从而需要动态的变更布局。
将其想象的更简单一些，就类似于使用 Sketch 进行 UI 设计时导航位置被设置为了组建，在引用的位置更新 text 即可。

首先，创建一个组建实例，并在 .js 中激活插槽

options: {
    multipleSlots: true
}

在 wxml 中编辑组件样式，类似于

<view>
    <view class='title'>
        <slot name='title'></slot>
    </view>
    <view class='action'></view>
</view>

接下来在引用位置的 .json 中配置并将组件引用进来（ app.json 中同样可以引用，但不推荐），

{
  "usingComponents": {
      "copt-header": "组件路径"
  }
}

在引用位置的 wxml 中编辑组件内容，上方使用的名称是 copt-header

<copt-header>
    <text slot='title'>Title<text>
</copt-header>

插槽允许创建多个，以 name 作为区分，在插入自定义的代码时将 slot 的 name 对应起来即可。

延展

开发完成小程序后总是有很多不仅如此人意的地方，比如说网络异常、无网络等等问题导致体验不佳，程序假死（造成假死大部分是因为我在 wx.showLoading 中将 mask 设为了 true，此时网络出现异常后数据无法得到正确加载并且没有关闭 Loading）
为了应对这种情况，我自定义了 init 组件，将初始化数据、网络判断等异常状况都封装在其中，当准备就绪后则回调引用位置的指定函数，我为我的机智点赞。
当然，我不知道这种做法是否是标准的，是否是受推荐的，如果有更好的解决方案（打脸），一起讨论下吧？

以上，Enjoy !!