电商小程序使用的组件 第1篇
小程序组件可用的全部生命周期如下表所示：
在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点如下：
1.组件实例刚被创建好的时候，created 生命周期函数会被触发
2.在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
3.在组件离开页面节点树后， detached 生命周期函数会被触发
在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：
如果同时存在新旧两种方式的时候，以新方式为主，旧方式会被覆盖
电商小程序使用的组件 第2篇
在正式实现它之前，先来思考一个问题，我们直接将布局写在中是否好？
当然不好，因为咱们这个首页的业务是比较多的，随着业务的不断深入这里面的代码会越来越多，wxml代码一多，其它连带的像.js，.wxss都会相应的进行膨胀的，那么有什么方式能解决这样的问题么，将它自定义成一个组件既可，就像我们集成的lin-ui一样，所以有了这层的思考，接下来则将九宫格分类以组件的方式来进行实现。
咱们接下来则来学会如何在小程序中自定义组件，先新建一个文件夹：
然后再建一个具体跟咱们这个组件相关的文件夹：
然后像新建页面一样，还是回到小程序的IDE上来，因为会一次性为我们生成关联的所有文件，比较方便，如下：
这里则有一个比较好的约定给组件文件命名的方式，就是统一叫index既可，如下：
这里打开瞅一眼，可以看到它跟Page是有区别的：
而页面的根结点是Page。
引入组件：
其中一行的个数的配置可以使用它：
其实对于这个开源组件的核心是用到了小程序的这个特性来实现的：
其中这里会涉及到如下几个重要的生命周期函数：
上面仅做一个了解，回到正题上来，开始定义一下六宫格，既然要引用LinUi的宫格组件，则应该将它引入到咱们的组件来，在小程序中可以在这里进行引入：
那假如有N多个页面都需要引用同一个组件是不是每一个页面上都得重新用这句话来引用一遍，有没有一种全局的引入方式呢？当然，可以在这，所以也是咱们采用的方式：
而引用的语句跟在单个组件中的是一样的：
那是如何引用的呢？采用key-value的方式，如下：
而value则是我们所要使用三方开源的组件的绝对路径：
编写wxml：
约定俗成，先用view套一下，而这个view的class也一般用container来进行命名，当然叫其它名也可以，只是尽量用一个统一个习惯来命名会比较好，接下来则在里面套grid控件：
根据官方的使用示例，接下来则需要使用grid-item：
而它又是一个组件：
所以此时则需要将它也引入进来：
此时咱们则可以来使用它了：
而这个item应该是需要遍历生成的，所以：
接下来每个grid-item的是一个上下的结构：
所以此时又是一个插槽的理念，如下：
在目前的布局编写中：
都是需要进行数据绑定的地方。
思考：
接下来则需要绑定数据了，而要绑定数据则需要有数据嘛，所以接下来则来弄这些数据，当然也就是请求API接口喽， 这里又得进行一个思考了，目前组件里面的数据请求有两种写法：
1、直接写在组件的.js中进行：
2、还可以写在调用组件的那一个.js文件中，回到咱们这个场景也就是：
那哪种方式更加的合适呢？其实应该是第二种，也就是将数据的请求逻辑写在调用方那，而不应该写在组件本身的里面，为啥？因为这样能保证组件的通用性，因为数据来源不一定就是从网络上获取，也有可能还有其它的数据源，如果将数据的请求写在了组件本身，那么这样就降低了它的灵活性了，对于组件本身而言只需要有数据展示既可，不应该让它关心数据的来源的，所以，咱们下面则开始来编写数据的请求。
API的mock搭建：
还是上中先来mock一下九宫格的数据：
其返回的JSON为：
API的封装：
接下来则按之前的约定，新建一个js文件：
API调用及数据绑定：
这里需要注意，如果数据是一个数组，在定义时最好不要初始化为null，而是它：
另外其实我们在setData的属性也可以不在data中进行定义，但是这样会造成这个setData的属性可以在任意的代码逻辑中进行修改，不利于代码的维护，所以一般好的习惯是定义：
好，接下来问题来了，咱们在调用方请求的数据怎么来传递给咱们的grid的组件呢？ 这样搞：
对于上面的而言，由于它只是赋值了个初始值，对于只有初始值的属性还可以简写成这样：
此时咱们就可以通过home页面通过这个属性来将咱们的数据传递给组件了，具体做法是先在home页面中先将咱们的这个九宫格分类组件引进来，引入方式跟咱们组件中引用三方的LinUi的宫格组件一样，既可以在中又可以在中，不过由于咱们的这个九宫格组件只会在home页面使用到，所以就不放全局了，下面先在中引入一下它：
此时则可以在中来使用了，然后通过在页面中就可以将数据通过组件的属性进行数据传递了，如下：
此时则可以在组件中来使用API的数据了，如下：
此时编译运行看一下效果：
此时数据正常绑定了，只是目前的样式还没调，没有看出grid九宫格的效果而已。
container样式：
看效果图上是有padding的，如下：
所以先编写它的样式：
grid-item：
这里就有一个技巧性了，这里试想一下，假如它就是实际Grid项的宽高：
所以，这里的样式应该设置大一点，大概是这样子：
所以咱们定义一下：
设置图片的尺寸：
接下来则需要定义一下图片的大小了，所以：
此时预览下效果：
貌似完全木有看出九宫格的效果呀,这个其实在官网上已经说明了：
所以咱们定义一下：
此时再运行看一下：
增加虚线框：
嗯，有一个大概的样子了，不过还得细化，先来给增加一个虚线框：
此时运行发现木有看到有虚线呀，其实这里有一个关于自定义组件样式的一个规则：“不能直接对一个自定义的组件设置class，而要用它的外部样式”，啥意思？
此时需要使用外部样式类，啥叫外部样式类呢，看一下组件的官方说明：
它的外部样式类是叫_l-class_， 对于LinUi的外部样式类基本都是它，当然实际可能有些组件会有多个外部样式类，具体用哪个到时根据实际组件的说明来，其实关于外部样式类在小程序的官网也有说明的：
当然在组件上使用class也是能让它生效的，像小程序的官网的这一个说明：
，只是。。不推荐这样做，所以咱们来使用一下外部样式再试一下：
再运行看一眼：
居中调整：
但是发现咱们的内容木有居中，所以再调整一下：
边框居中了，但是grid-item项木有居中：
所以同样的，也用flex布局设置一下：
运行看一下：
发现此时还是有问题，貌似感觉这个高度有点高：
其实吧不用设置高度，LinUI的宫格组件已经为我们动态计算了，所以：
再运行看一下：
文本与文本的间距：
这个比较简单，直接贴出来：
最后运行看一下：
下面来聊一聊小程序组件设计的几个重要原则，它对于我们未来用好LinUI提供的组件能够更加的得心应手。
但是！！！咱们的这个易用性反而不够通用了，也就是说咱们封装的这个九宫格只适合首页这种样式的分类，如果换其它形态的则就不通用的。
如果没有明确理由，不要固定高和宽：回到咱们的九宫格，对于grid-item咱们是可以不设置高度的，所以就不要设置：
关注个人公众号，获得实时推送
电商小程序使用的组件 第3篇
behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 中的 “mixins”。
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用：
在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下：
组件和它引用的 behavior 中可以包含同名的字段，此时可以参考如下 3 种同名时的处理规则：
关于详细的覆盖和组合规则，大家可以参考微信小程序官方文档给出的说明：
电商小程序使用的组件 第4篇
在自定义组件的 wxml 结构中，可以提供一个节点（插槽），用于承载组件使用者提供的 wxml 结构。
在小程序中，默认每个自定义组件中只允许使用一个
组件的封装者：
组件的使用者：
在小程序的自定义组件中，需要使用多
可以在组件的 .wxml 中使用多个
效果如下：