评论

学习笔记-个人博客小程序3

个人博客

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

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

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

这是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 固定样式,现在关键的问题是:文章哪里来,创建的时间、评论数、阅读数等数据是怎么来的,这些关键内容,这里并未找到,我们接下来再找找看吧!



最后一次编辑于  03-15  
点赞 0
收藏
评论
登录 后发表内容