微信小程序文章详情页面实现代码

网友投稿 394 2023-11-10

先自己绘制了一个丑陋的原型图，然后开始在小程序上绘制页面，然后设计样式，一路过来总结就是哪里不懂查哪里之旅~

微信小程序文章详情页面实现代码

原型设计和分析

原型图效果

文章详情.png

为什么要这么设计？

正常情况下是设计先出设计图，然后服务器和我们一同讨论接口如何设计，然后根据服务器返回的结果，我们再去界面上显示。但是这里我们使用的是第三方的接口，所以只能他有什么我们显示什么了。

服务器接口返回的数据如下如：

小程序-服务器返回结果.png

分析 json 结果，我们这里为了简单，也就只显示几个元素分别是 时间,标题，类型，作者，图片 。

整体是垂直排列，然后图片是根据是否有返回来动态显示，最后的心形图标是为了收藏使用（目前还未实现收藏功能）

原型实现

在实现的过程中一步步思考，首先是页面如何实现，然后是数据如何获取，最后是如何动态显示数据

页面实现

从原型图分析，我们的根布局需要能够整体垂直滑动，然后图片水平显示三行（后来实现的时候发现水平显示图片，图片太小不美观，故改成图片整体垂直摆放）

详情页面的整体布局 reading-detail.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<view>
<view class=top-text>
<text>web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。</text>
</view>
<view class="divLine"></view>
<view>
<view class=content-text>
<text>{{content}}</text>
</view>
<view class=image-container>
<block wx:for="{{images}}" wx:for-item="item" wx:for-index="idx">
<view class=image-container catchtap=onImageClick data-imageUrl="{{item.imageUrl}}">
<image wx:if="{{hadImage}}" class=image-item src="{{item.imageUrl}}" mode=widthFix></image>
</view>
</block>
</view>
<view>
<text class=type-text>类型：{{postType}}</text>
<text class=type-author>作者：{{who}}</text>
</view>
<view><text class=type-date>发布时间：{{date}}</text></view>
<view><text class=url-text>网页链接：{{url}}</text></view>
<view class=view-like catchtap=onLikeClick>
<image class=icon-like src=/images/detail/icon_like.png></image>
</view>
</view>
</view>

布局还算好做的，难点就在于页面的样式如何去调整（难也是相对新手，比如我这种小白吧）

详情页面的样式文件 wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
.scroller-container{
height: 1300rpx;
}
--text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
margin-right: 20rpx;
}
.divLine{
background: #D1D1D6;
width: 100%;
height: 2px;
margin: 20rpx;
}
.content-text{
margin: 20rpx;
font-size: 40rpx;
font-weight: 600rpx;
color: #333;
}
.image-container{
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 20rpx;
}
.image-item{
width: 100%;
height: 600rpx;
padding-bottom: 20rpx;
}
.view-like{
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
justify-content: center;
}
.icon-like{
width: 128rpx;
height: 128rpx;
margin-top: 20rpx;
}
.type-text{
margin-left: 10rpx;
font-size: 30rpx;
}
.url-text{
margin-left: 10rpx;
font-size: 24rpx;
}
.type-author{
margin-left: 10rpx;
font-size: 30rpx;
}
.type-date{
margin-left: 10rpx;
font-size: 30rpx;
}

在实现心形图标居中过程中 align-items: center;(交叉轴上的对齐方式) 没居中显示，查了下是需要设置显示为水平摆放，然后还需要设置 justify-content: center;(表示在主轴上的对齐方式) 这里有一篇文章介绍微信小程序布局挺好的微信小程序布局基础

数据获取

通过上一个页面传递过来，目前是用最简单的 url 传值的形式传递

在 reading.js 文件中的点击事件传递数据

在 reading-detail.js 文件中接受传递过来的数据，并对数据处理

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var url = options.url;
var content = options.content;
var postType = options.type;
var who = options.who;
var date = options.date;
var images = options.images.split(,);
var imageArray = [];
var hadImage = false ;
for (var i = 0; i < images.length; i++) {
// 图片不为空则存到数组中
if (images[i] != "undefined"){
var obj = {
imageUrl: images[i],
}
imageArray.push(obj);
}
}
// 是否有图片
if (imageArray.length > 0) {
hadImage = true;
} else {
hadImage = false;
}
// 传递数据给ui显示
this.setData({
url: url,
content: content,
date: date,
postType: postType,
who: who,
images: imageArray,
hadImage: hadImage
})
// 标题
wx.setNavigationBarTitle({
title: "文章详情"
})
},

数据动态填充

通过判断语句动态判断控制图片显示的变量是否有值，有则显示图片组件，没有则不显示图片组件。

在 reading-detail.wxml 中通过判断语句判断是否显示图片组件, hadImage 是 js 中传递过来的值

复制代码 代码如下:
<image wx:if="{{hadImage}}" class=image-item src="{{item.imageUrl}}" mode=widthFix></image>

ok，查看文章详情功能到这里了（详情页最好是直接用 web-view 展示，但是个人开发不支持 web-view 组件）。

您可能感兴趣的文章:微信小程序如何实现商品列表跳转商品详情页功能微信小程序新闻网站详情页实例代码微信小程序点击列表跳转到对应详情页过程解析微信小程序文章详情页跳转案例详解微信小程序商品详情页的底部弹出框效果微信小程序实战之网易云音乐歌曲详情页实现代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 代码 微信小程序 小程序 js
上一篇:如何基于小程序实现发送语音消息及转文字功能
下一篇:小程序页面之间数据传递的4种方法总结
相关文章

 发表评论

暂时没有评论，来抢沙发吧~