微信小程序豆瓣电影（下）

最新推荐文章于 2023-07-08 14:51:35 发布

xiaoying1223

最新推荐文章于 2023-07-08 14:51:35 发布

阅读量1.1k

点赞数

分类专栏：笔记文章标签：小程序 javascript

本文链接：https://blog.csdn.net/xiaoying1223/article/details/110039277

版权

本文详细介绍了如何在微信小程序中实现豆瓣电影的短评功能，包括短评组件的创建、详情页展示、标签信息展示以及短评信息页的搭建。通过组件化和数据管理，实现了短评的显示和交互，帮助读者理解微信小程序的开发流程。

摘要由CSDN通过智能技术生成

短评

1.新建components/ onecomment目录。
2.数据模块组件的视图层渲染
2.1打开onecomment.json文件，在usingComponents对象下添加组件引用代码：
“stars”: “/components/stars/stars”
2.2打开onecomment.wxml文件，添加如下代码：
view class=‘comment-group’>
< view class=‘left-comment’>
< image class=“avatar” src="{ {item.user.avatar}}">< /image>
< /view>
< view class=‘right-comment’>
< view class=‘username-rate’>
< text class=‘username’>{ {item.user.name}}< /text>
< stars rate="{ {item.rating.value*2}}" starsize=“30” istext=’{ {false}}’>< /stars>
< /view>
< view class=“release-time”>{ {item.create_time}}< /view>
< view class=‘content’>{ {item.comment}}< /view>
< /view>
< /view>
2.3 打开onecomment.wxss文件,为视图层添加样式文件，代码如下：
.comment-group{
display: flex;
justify-content: flex-start;
padding-top: 40rpx;
}
.comment-group .left-comment{
width: 70rpx;
margin-right: 20rpx;
}
.left-comment .avatar{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
}
.comment-group .right-comment{
flex: 1;
}
.right-comment .username-rate{
display: flex;
justify-content: flex-start;
align-items: center;
}
.username-rate .username{
font-size: 36rpx;
margin-right: 20rpx;
}
.release-time{
color: #b3b3b3;
font-size: 32rpx;
margin-top: 10rpx;
}
.content{
font-size: 32rpx;
color: #353535;
margin-top: 10rpx;
}
3打开onecomment.js文件为该自定义组件添加属性值，在properties对象下添加如下代码：
item: {
type: Object,
value: {}
}
*6.组件测试
6.1打开index.json文件，在usingComponents对象下添加组件引用代码：
“onecomment”: “/components/onecomment/onecomment”
6.2打开index.wxml文件，添加搜索栏组件代码：
< onecomment wx:for="{ {comments}}" item="{ {item}}">< /onecomment>
6.3 打开index.js文件，为页面添加测试数据，在data对象下添加代码如下：
comments:[
{
user:{
avatar: “https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581654839849&di=7daafbe7d5a57121340d08c8ffd73632&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F20%2F20180220165946_RiGPS.thumb.700_0.jpeg”,
name:‘jarvis’
},
rating:{
value:6.3
},
create_time:“2019-12-11 12:32:11”,
comment:“这个电影太好看了”
},
{
user: {
avatar: “https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581654839849&di=7daafbe7d5a57121340d08c8ffd73632&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201802%2F20%2F20180220165946_RiGPS.thumb.700_0.jpeg”,
name: ‘jarvis’
},
rating: {
value: 6.3
},
create_time: “2019-12-11 12:32:11”,
comment: “这个电影太好看了”
}
]

详情页

1.为详情页添加页面渲染
2.1 打开detail.json文件，在usingComponents对象下添加组件引用代码：
“stars”: “/components/stars/stars”,
“onecomment”: “/components/onecomment/onecomment”
2.2 为详情页的视图层添加基础信息展示部分的渲染，打开detail.wxml文件，添加如下代码：
<