微信小程序之组件的集合（一）

　　小程序中是很强调组件中开发的，我们看到的页面是由许多组件组成的，但是这些组件是如何组合在一起的呢？来学习一下！

 一、组件中数据的获取

接着上一篇文章，继续来优化代码，如何把从服务器上获取的数据显示到组件的页面中？

（1）继续优化代码

创建models文件夹，来将classic.js中的代码继续分离出来，来创建一个classicModel类

进一步进行代码的抽离，代码如下：

// models文件夹下classic.js代码如下
import {
  HTTP
} from '../util/http.js';

// 新建ClassicModel类来从服务器获取数据
class ClassicModel extends HTTP {
  getLatest(sCallBack) {
    this.request({
      url: 'classic/latest',
      success: (res) => {
        //调用回调函数 来传递数据
        sCallBack(res);
      }
    })
  }
}
// 一定不要忘记 export ClassicModel
export {
  ClassicModel
}

// classic文件夹下classic.js文件中代码如下，很简洁，还利于维护
// 这里导入的时候需要写成相对路径
import {
  ClassicModel
} from '../../models/classic.js';

// 实例化HTTP类
var classic = new ClassicModel();

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    classic.getLatest((res) => {
      this.setData({
        classic: res
      })
    })
  },

来看一下页面中调用组件的时候如何将数据传递到组件中：

classic文件夹中classic.wxml页面中调用组件的时候。可以把数据存放到组件的属性中，利用数据绑定来传递数据

<v-like like='{{classic.like_status}}' count='{{classic.fav_nums}}' />

注意：这里面的 this.setData({classic: res}) 这个是用来做数据更新的，当data中的数据改变之后，只有通过setData才能进行数据的更新

二、movie组件的创建

开始创建movie组件，这是新建的第二个组件，还是详细的记录一下这个组件的开发过程

1、movie组件的新建

2、组件代码的开发

index.wxml、index.wxss、index.js文件的代码：

// index.wxml代码
<view class='classic-container'>
  <!--大图暂时用的图片路径是死的-->
  <image class='classic-img' src='images/《饮食男女》@2x.png'/>
  <image class='tag' src='images/movie@tag.png' />
  <text class='content'>{{content}}</text>
</view>

// index.wxss代码
.classic-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.classic-img{
  750rpx;
  height: 500rpx;
}

.tag{
   46rpx;
  height: 142rpx;
  position: relative;
  right: 310rpx;
  bottom: 58rpx;
}

.content{
  font-size: 36rpx;
  max- 550rpx;
}

// index.js代码 主要是设置了两个属性值 大图路径以及文字内容
  /**
   * 组件的属性列表
   */
  properties: {
    img:{
      type:String
    },
    content:String
  },

3、组件在classic页面中使用

需要在classic.json中引入组件。并且在classic.wxml页面中使用组件标签，加入完成之后就OK了！

// classic.json中代码
{
  "usingComponents": {
    "v-like":"/components/like/index",
    "v-movie": "/components/classic/movie/index"
  }
}

// classic.wxml文件中加入组件标签
<v-movie img='{{classic.image}}' content='{{classic.content}}' />

我咋感觉对于老师来说，这些都是信手捏来，很简单，对我来说，难的要死的感觉，加油吧，向前冲！

三、自定义事件

这个主要是在点赞功能的上面进行的进一步的完善的功能，我们是如何将点赞的状态发送给服务端的，在这里最好的解决办法是在组件中进行自定义事件的开发，学习一下自定义事件的开发

官方文档的介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html#%E8%A7%A6%E5%8F%91%E4%BA%8B%E4%BB%B6

代码如下：

// like组件的index.js中写代码
  /**
   * 组件的方法列表
   */
  methods: {
    onLike:function(event){
      var like = this.properties.like;
      var count = this.properties.count;

      count = like?count-1:count+1;
      this.setData({
        count:count,
        like:!like
      })
      // 激活一个自定义事件
      var behaiver = this.properties.like?'like':'cancel';
      this.triggerEvent('like',{
        behaiver:behaiver
      },{});
    }
  }

// 组件的调用方classic中来监听组件中自定义的事件 bind后面是自定义组件的名称
<v-like bind:like='onLike' like='{{classic.like_status}}' count='{{classic.fav_nums}}' />

// 在classic中的classic.js中来实现处理逻辑
// 监听like组件的自定义的like事件
  onLike: function(event) {
    console.log(event);
  },

 完善这个自定义组件中的监听事件的代码：

新建like.js 文件在modules文件夹下面，这个文件主要是创建LikeModel，将数据的更新方法写到这个model中，使得代码更好维护，模块化更加清楚

 

代码如下：models文件夹下的like.js文件中的代码

import {
  HTTP
} from '../util/http.js';


// 创建LikeModel继承HTTP类
class LikeModel extends HTTP {
  like(behavior, artId, category) {
    var url = behavior == 'like' ? 'like' : 'like/cancel'
    this.request({
      url: url,
      type: 'POST',
      data: {
        art_id: artId,
        type: category
      }
    })
  }
}

// 这个是不能忘记的
export {
  LikeModel
}

LIkeModel在classic文件夹下的classic.js中的使用：这个就是讲参数传递到LIkeModel中的方法中去：

// 这里导入的时候需要写成相对路径
import {
  ClassicModel
} from '../../models/classic.js';
import {
  LikeModel
} from '../../models/like.js';

// 实例化HTTP类
var classicModel = new ClassicModel();
var likeModel = new LikeModel();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    classic: null
  },

  // 监听like组件的自定义的like事件
  onLike: function(event) {
    console.log(event);
    var behaiver = event.detail.behaiver;
    likeModel.like(behaiver, this.data.classic.id, this.data.classic.type);
  },

})

四、期刊组件的开发

基本上照着这个样式来开发这个组件，这个其实可以分为两部分的，期刊号和发行日期，这个期刊号是需要接口中获得的，需要定义成属性，来开发这个组件吧

1、首选创建组件component所需文件，先创建epsoide文件夹，再在该文件夹下面创建组件

2、改造js文件，创建属性与内部数据，这里涉及到了组件的声明周期函数，这个在官网上地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

// components/epsoide/index.js
Component({
  /**
   * 组件的属性列表 属性中的变量不能和data中的变量同名
   */
  properties: {
    index: {
      // index属性 显示要求 如果是个位数 需要显示两位 例如 '08' '18'
      type: Number,
      observer: function(newVal, oldVal, changedPath) {
        // console.log(newVal);
        // console.log(oldVal);
        // console.log(changedPath);
        // 不要在observer函数中改变属性的值，有可能造成无限循环调用，因为observer监听的是当属性改变的时候触发的事件，在这里设置属性值，当属性值改变时，还会继续调用
        var value = newVal < 10 ? '0' + newVal : newVal;
        this.setData({
          _index: value
        })
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // data中数据的赋值，不能像properties中那样，直接给初始值就行
    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
    year: 0,
    month: '',
    _index: ''
  },

  // 组件生命周期函数attached 在组件实例进入页面节点树时执行
  attached: function() {
    // console.log(this.properties);
    // console.log(this.data);
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();

    // 将值绑定到data中的变量上
    this.setData({
      year: year,
      month: this.data.months[month]
    })
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

3、创建页面以及css样式

//index.wxml 中代码如下
<view class='container'>
  <view class='index-container'>
    <text class='plain'>No.</text>
    <text class='index'>{{_index}}</text>
    <view class='line'></view>
  </view>
  <view class='date-container'>
    <text class='month'>{{month}}</text>
    <text class='year'>{{year}}</text>
  </view>
</view>
 
// index.wxss样式文件代码 这个我是真的一点都不会
.container {
  height: 60rpx;
  display: inline-flex;
  flex-direction: row;
}

.index-container {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.plain {
  font-size: 32rpx;
}

.index {
  font-size: 60rpx;
  line-height: 60rpx;
  font-weight: 800;
  margin-right: 14rpx;
}

.line {
  height: 44rpx;
  margin-right: 14rpx;
  border-left: 1px solid black;
}

.date-container {
  display: flex;
  flex-direction: column;
  margin-top: 5rpx;
}

.month {
  font-size: 24rpx;
  line-height: 24rpx;
}

.year {
  font-size: 20rpx;
}

4、页面中的classic中的使用

// classic.json 中引入组件
{
  "usingComponents": {
    "v-like":"/components/like/index",
    "v-movie": "/components/classic/movie/index",
    "v-epsoide": "/components/epsoide/index"
  }
}

// classic.wxml中显示组件
<v-epsoide index='{{classic.index}}' />

 这样的话，期刊组件基本上就开发完成了！

 

内容出处：七月老师《纯正商业级小程序开发》视频课程

视频课程链接：https://coding.imooc.com/class/251.html