全栈项目|小书架|微信小程序-书籍详情功能实现
效果图
实现分析
从效果图上分析,书籍详情是通过点击首页的
item
后进入。
进入详情页之后页面顶部显示书籍的相关信息,同时判断用户是否登录,未登录则弹出一个授权登录窗口。
点击登录之后即可加载出用户评论信息。
通过上图我们可以分析出静态页面的主要结构如下:
- 书籍信息
- 左侧布局是图书图片
- 中间布局从上到下是:名称、作者、出版社
- 右侧布局是收藏
icon
- 登录提示弹窗
- 上部分是提示文本
- 下部分是登录按钮
- 评论列表
- 左侧是评论人头像
- 右侧上部分是评论人名字
- 右侧中间部分是评论信息
- 右侧下部分是评论时间
- 评论按钮
- 固定在底部的一个按钮
ps:如果不想看代码可直接跳过了,下面都是具体的代码实现了
具体实现
具体实现主要从
wxml
,wxss
,js
这三个文件去介绍。
wxml
实现了页面的绘制,然后通过wxss
美化页面的样式,最后通过js
文件获取数据并将数据填充wxml
。
顶部书籍信息实现
wxml
规定了各个组件的摆放顺序。
<view class="book-container bg-white">
<view class="book-info">
// 书籍图片
<image class="book-image" mode="scaleToFill" src="{{bookInfo.bkcover}}"></image>
// 书籍文字信息
<view class="book-desc">
<text class="book-main-text">{{bookInfo.bkname}}</text>
<text class="book-text">{{bookInfo.bkauthor}}</text>
<text class="book-text">{{bookInfo.bkpublisher}}</text>
</view>
</view>
// 收藏 icon
<view class="button-area" catchtap="onLikeClick">
<block wx:if="{{isLike}}">
<l-icon name="like" color="#FFE57F" size="50" />
</block>
<block wx:else>
<l-icon name="like" color="#34BFA3" size="50" />
</block>
</view>
</view>
wxss
样式美化了图书封面,图书名称,作者信息等内容
.book-container {
/*border: 1px solid black;*/
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 50rpx 30rpx;
}
.book-info {
/*border: 1px solid red;*/
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.book-image {
width: 200rpx;
height: 300rpx;
box-shadow: 0 0 10rpx #cdcdcd;
}
.book-desc {
/*border: 1px solid yellow;*/
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-left: 30rpx;
}
.book-main-text {
color: #1e1e1e;
font-size: 35rpx;
}
.book-text {
color: #8a8a8a;
font-size: 30rpx;
}
.button-area {
/*border: 1px solid blue;*/
display: flex;
flex-direction: row;
align-items: center;
}
js
文件伪代码如下:获取了书籍信息、用户是否收藏图书的信息
// 获取书籍信息
_getBookInfo(bk_id) {
bookModel.getBookInfo(bk_id)
.then(res => {
this.data.bookInfo = res
this.setData({
bookInfo: this.data.bookInfo
});
})
},
// 获取用户是否收藏该书籍
_getUserLikeIt(bk_id) {
bookModel.getLikeStatus(bk_id)
.then(res => {
this.data.bookIsLike = res
this.setData({
isLike: this.data.bookIsLike
});
})
},
登录弹窗实现
弹窗使用了lin-ui
中的l-popup
组件,具体的组件使用可查看 官方文档。
wxml
文件实现了组件的摆放顺序。
<!-- 弹出登录弹窗 -->
<l-popup show="{{unLogin}}" content-align="center" showMask="true" bind:lintap="onPopupTap" locked="{{true}}">
<view class='center'>
<text>收藏功能需要</text>
<text>登录之后才能使用呢~</text>
<l-button bind:getuserinfo="getUserInfo" open-type="getUserInfo">允许登录</l-button>
</view>
</l-popup>
wxss
文件控制了弹窗居中显示,已经窗口大小、字体大小等内容。
.center {
height: 250rpx;
width: 500rpx;
line-height: 100rpx;
background: #fff;
text-align: center;
align-items: center;
justify-content: center;
align-content: center;
color: #555;
border-radius: 8rpx;
font-size: 28rpx;
}
js
文件中判断了用户是否登录,根据不同的登录状态控制弹窗是否显示
if (app.globalData.userInfo != null) {
that.setData({
unLogin: false
})
// 评论需要登录
this._getCommentData(that.data.bk_id)
} else {
that.setData({
unLogin: true
})
}
评论列表实现
进入评论列表,首先会加载loading
进度条,如果没有评论列表会显示暂无评论的提示
,如果有评论数据会显示评论数据。
评论列表的wxml
如下:
<view class="comment-container">
<view class="comment-title">
<text>--------- 评论 ---------</text>
</view>
// 加载中进度条
<view class="comment-loading" wx:if="{{commentLoading}}">
<view class="donut"></view>
</view>
// 评论布局列表
<view class="comment-area" wx:else>
// 有评论数据
<block wx:if="{{commentList.length > 0}}">
<view class="comment-item" wx:for="{{commentList}}" wx:key="index">
// 头像
<view class="avatar-container">
<image mode="scaleToFill" src="{{item.uavatar}}" class="user-avatar"></image>
</view>
// 用户名、内容、评论时间
<view class="comment-content">
<text class="user-name">{{item.uname}}</text>
<text class="user-comment">{{item.ucontent}}</text>
<text class="comment-time">{{item.created_at}}</text>
</view>
</view>
</block>
// 没有评论提示布局
<block wx:else>
<view class="comment-placeholder">来当第一个评论的人吧~</view>
</block>
</view>
</view>
评论列表的wxss
如下:
.comment-container {
padding-top: 30rpx;
}
.comment-title {
/*border: 1px solid black;*/
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 30rpx;
}
.comment-title > text {
font-size: 30rpx;
color: #cdcdcd;
}
.comment-area {
/*border: 1px solid black;*/
padding: 20rpx 30rpx;
}
.comment-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
margin-bottom: 20rpx;
}
.comment-placeholder {
display: flex;
justify-content: center;
align-items: center;
color: #dcdcdc;
}
.comment-item:last-child {
margin-bottom: 180rpx;
}
.avatar-container {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
}
.user-avatar {
width: 80rpx;
height: 80rpx;
/*border: 1px solid red;*/
}
.comment-content {
display: flex;
max-width: 590rpx;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.user-name {
color: #8a8a8a;
font-size: 30rpx;
}
.user-comment {
display: inline-block;
margin-top: 10rpx;
color: #1e1e1e;
font-size: 35rpx;
}
.comment-time {
display: inline-block;
margin-top: 10rpx;
color: #cdcdcd;
font-size: 20rpx;
}
.comment-loading {
display: flex;
justify-content: center;
align-items: center;
}
评论列表的js
如下:调用接口获取数据库中的评论数据。
_getCommentData(bk_id) {
let that = this
bookModel.getPageData(bk_id)
.then(res => {
console.log(res)
if (res.length > 0) {
// 关闭进度条
that._commentSetTimeOut(res, false)
} else if (res.error_code == 10006) {
// token 不合法,需要登录
app.showInfo('token不合法,请去登录');
// 关闭进度条
that._commentSetTimeOut([], false)
} else {
// 关闭进度条
that._commentSetTimeOut([], false)
}
})
.catch(err => {
console.log('错误信息:' + err);
// 关闭进度条
that._commentSetTimeOut([], false)
})
},
底部固定的评论按钮实现
主要就是如何使按钮底部固定,同时不会遮挡住评论列表
wxml
如下:有意思的是class
中也能直接写样式,新发现!
<view class="fixed-bottom block-full-width flex-container bg-white">
<button class="full-button" type="primary" open-type="getUserInfo" catchtap="goComment" data-id="{{bookInfo.id}}" data-name="{{bookInfo.name}}"> 写评论 </button>
</view>
以上就是本次的介绍。
扫码关注公众号,轻撩即可。
全栈项目|小书架|微信小程序-书籍详情功能实现的更多相关文章
- 全栈项目|小书架|微信小程序-登录及token鉴权
小程序登录 之前也写过微信小程序登录的相关文章: 微信小程序~新版授权用户登录例子 微信小程序-携带Token无感知登录的网络请求方案 微信小程序开通云开发并利用云函数获取Openid 也可以通过官方 ...
- 全栈项目|小书架|微信小程序-项目结构设计分包
前面的文章 介绍了服务端的基础搭建以及用户模块的设计,接下来就是在服务端和客户端实现具体的业务了. 本篇文章先来介绍微信小程序开发的项目结构设计,也就是项目分包情况. 由于项目是在<极客时间-9 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- 全栈项目|小书架|微信小程序-首页水平轮播实现
首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...
- 全栈项目|小书架|微信小程序-实现搜索功能
效果图 上图是小程序端实现的搜索功能效果图. 从图中可以看出点击首页搜索按钮即可进入搜索页面. 布局样式是:搜索框 + 热搜内容 + 搜索列表. 搜索框使用 lin-ui 中的 Searchbar组件 ...
- 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现书籍详情接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 书籍详情分析 书籍详情页面如下: 从上图可以分析出详情页面大概有以下 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口
通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看 ...
- 全栈项目|小书架|服务器开发-NodeJS 使用 JWT 实现登录认证
通过这篇 全栈项目|小书架|服务器开发-JWT 详解 文章我们对JWT有了深入的了解,那么接下来介绍JWT如何在项目中使用. 安装 $ npm install jsonwebtoken 生成 Toke ...
随机推荐
- Python研究
听说Python是种高级语言,故打算研究一下,看看高级在哪 学习资源:https://www.liaoxuefeng.com/wiki/1016959663602400 由于上面所示的网站对Pytho ...
- linux下 调试C#代码
参考两位大神的帖子: https://blog.csdn.net/soband_xiang/article/details/82914195 https://blog.csdn.net/weixin_ ...
- mac 搭建Java Spring boot 环境(idea)
首先安装插件 安装下面的这个插件 然后重启idea,新建工程 选择新建 Springboot 框架 改写项目名称 选择类型 设置工程名称 删除多余的文件 编译工程 然后运行 1. 2. 参考: htt ...
- 在Rancher中添加为中国区优化的k8s应用商店的步骤和方法
1.停用 rancher 应用商店中的“Rancher官方认证”商店和“社区贡献”商店 2.添加应用商店: 名称 地址 ...
- js正则表达式之解决html解析<>标签问题
应用场景:以博客写文章为例,有的时候我们不经意间写的字符串带标签,然后浏览器将其解析了,实际上我们并不希望其被解析,于是可通过核心代码解决该问题. 核心代码如下: data.codeSource.re ...
- Cesium中导入三维模型方法(dae到glft/bgltf)[转]
Cesium中导入三维模型方法(dae到glft/bgltf) Cesium中目前支持gltf和bgltf两种格式.“gltf是khronos组织(起草OpenGL标准的那家)定义的一种交换格式,用于 ...
- dubbo源码分析- 集群容错之Cluster(一)
1.集群容错的配置项 failover - 失败自动切换,当出现失败,重试其他服务器(缺省),通常用于读操作,但重试会带来更长的延时. failfast - 快速失效,只发起一次调用,失败立即报错.通 ...
- HTML5中的Web Worker技术
为了让后台程序更好的执行,在HTML5中设计了Web Worker技术.Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的,一旦前面的脚本花费 ...
- Mini UI tree上万复杂节点加载缓慢处理设计
最直接的方式是设置tree顶级不展开,可以解决一定效率. expandOnLoad Boolean/Number 加载后是否展开.比如:true展开所有节点:0展开第一级节点.以此类推. 1. 解决问 ...
- pycharm把制表符(tab)转换为空格(PEP8)
pycharm把制表符转换为4个空格 pycharm显示空格