微信小程序自定义组件

昨晚学习了一下实现一个简单的自定义组件，虽然官网的文档有四五个小节，但是看不太懂，找了一篇博客写的挺好的：
https://blog.csdn.net/rolan1993/article/details/78801052

这里分享一下大概的步骤，以及官网的一些例子带给项目的启发。

步骤一

在小程序项目中添加一个components文件夹，里面存放自定义的组件，然后在components目录下新建一个customComponent文件夹，文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。
在这个文件夹右键，选择新建组件，输入组件名，一个自定义组件由 json, wxml, wxss, js4个文件组成，此时将自动生成这四个文件。

比如我要新建一个order-item组件，用来显示购物车每一列的内容，包括菜品名称，菜品数量，菜品共计金额，可以通过循环渲染以及数据绑定用购物车List的item给组件属性赋值。

此时生成的目录结构为：

步骤二

接下来进行组件的相关配置：
首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件）：

{
  "component": true,
  //引用其他组件，这里没有引用其他组件
  "usingComponents": {}
}

然后在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

<!--components/orderItem/order-item.wxml-->

<view class='orderItem'>
  <view class="itemName">{
  
  {name}}
    <view class="item-info">
      <i class="iconfont icon-minus minus-icon" bindtap="minusFromCart"></i>
      <text class="orderNum">{
  
  {number}}</text>
      <i class="iconfont icon-add plus-icon" bindtap="addToCart"></i>
      <text class="sum">￥ {
  
  {
  
  sum}}</text>
    </view>
  </view>
</view>


/* components/orderItem/order-item.wxss */

@font-face {
  font-family: 'iconfont';  /* project id 657322 */
  src: url('//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.eot');
  src: url('//at.alicdn.com/t/font_657322_b9fvdsixaa960f6r.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_657322_b9fvdsixaa960