感觉自己好懒，之前是计划每天要解析一段代码的，现在变成每周一次，主要周一跟周五时间也没这么充裕，需要挤挤！希望自己能早点养成每日一章的习惯！好的，我们来看下有意思也是很关键的一段代码！希望自己也能解析的出来！

追风少年，在这里放了一个组件，我们看下这个组件的位置在哪里。

然后我们看看这个组件目录的代码：

这是wxml代码

这是JS 代码：

然后我们在文档查下关于component的介绍：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html;

看完这个文档，我发现要解析这个组件的内容，应该把js里面的内容搞清楚，因为我们发现wxml里面的内容其实都是变量数据传递后的渲染；

所以我们逐条解析作者的js代码：// components/component-tag-name.js

const app = getApp() // 定义一个全局变量

Component({

/**

* 组件的属性列表

*/

properties: {

navigateToParam: {

type: String,

value: ""

},//组件的对外属于有一个跳转到参数的对象名为:navigateToParam，里面含有：type：字符串、value 值为空；

articleList: {

type: Object,

value: []

},//对象名称articleList,里面含有type:对象，value为数组;

type: {

type: String,

value: ''

}

},//对象名称type,里面含有type:字符串，value为空

/**

* 组件的初始数据

*/

data: {

},

lifetimes: {

// 生命周期函数，可以为函数，或一个在methods段中定义的方法名

attached: function() {},

moved: function() {},

detached: function() {},

},//这段是系统自带的，为了简化代码 应该可以删掉

// 生命周期函数，可以为函数，或一个在methods段中定义的方法名

attached: function() {}, // 此处attached的声明会被lifetimes字段中的声明覆盖

ready: function() {

if (this.properties.navigateToParam != "") {

wx.navigateTo({

url: '../articleDetail/articleDetail?article_id=' + this.properties.navigateToParam,

})

}

},//这里定义了个ready函数：如果this.properties.navigateToParam不为空，将会跳转到 url: '../articleDetail/articleDetail?article_id=' + this.properties.navigateToParam这个页面，这个应该是文章详细内容页面；

pageLifetimes: {

// 组件所在页面的生命周期函数

show: function() {},

hide: function() {},

resize: function() {},

},//这段是系统自带的，为了简化代码 应该可以删掉

/**

* 组件的方法列表

*/

methods: {

click(e) {

var item = e.currentTarget.dataset.item

// wx.setStorageSync("articleDetail", item)

// app.globalData.articleDetail = item;

wx.navigateTo({

url: '../articleDetail/articleDetail?article_id=' + item.article_id,

})

},

},

//这里的组件方法methods里面有个点击click事件，如果你点击了对应的文章，会跳转到对象的 '../articleDetail/articleDetail?article_id=' + item.article_id

})；

作者写的这个compont比较容易懂，那我们来看下文章列表组件的wxml代码：

<view class="article-list"> //文章列表

<scroll-view class="scroll-touch" scroll-y bindscrolltolower="bindscrolltolower"> // 定义一个纵向滚动组件

<view class="inner" style='border-top:1rpx solid #f5f5f5;'>

<block wx:for="{{articleList}}" wx:key="*this"> //循环获取artclelist里面的数据

<view class='article' data-item='{{item}}' bindtap='click'> //获取数组：artclelist里面的item，绑定cilck事件

<view class='article-img'>

<image src='{{item.image_url}}'></image> //获取数组：artclelist里面的item.image_url

</view>

<view class='article-text'>

<view class='img-title'>

<view class='title'>{{item.title}}</view> //获取数组：artclelist里面的item.title

<image class='class-img' src='{{item.class_img_url}}'></image> //获取数组：artclelist里面的item.class_img_url

</view>

<view class='summary'>{{item.summary}}</view> //浏览总量

<view class='article-bottom' wx:if='{{type == ""}}'>

<view class='time'>

<image src='../../../images/creat_time.png'></image>

<text class=''>{{item.create_time}}</text> //文章创建时间

</view>

<view class='comment-count'>

<image src='../../../images/comment.png'></image>

<text class=''>{{item.comment_count}}</text> //评论数量

</view>

<view class='read-count'>

<image src='../../../images/read_count.png'></image>

<text class=''>{{item.read_count}}</text> //阅读量

</view>

<view class='poll-count'>

<image src='../../../images/poll.png'></image>

<text class=''>{{item.poll_count}}</text> //点赞数量

</view>

</view>

<view class='article-bottom' wx:if='{{type == "我的浏览"}}'>

浏览时间 {{item.visit_time}}

</view>

<view class='article-bottom' wx:if='{{type == "我的点赞"}}'>

点赞时间 {{item.poll_time}}

</view>

</view>

</view>

</block>

</view>

</scroll-view>

</view>

这是作者预选设计好的wxml 固定样式，现在关键的问题是：文章哪里来，创建的时间、评论数、阅读数等数据是怎么来的，这些关键内容，这里并未找到，我们接下来再找找看吧！