微信小程序实战–集阅读与电影于一体的小程序项目(二)
9.文章列表页跳转到文章详情页
给每篇文章添加个postId
posts-data.js
var local_database = [{
date: "2018/8/16",
title: "荷塘月色",
imgSrc: '/images/post/sls.JPG',
content: '这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。',
reading: "100",
collection: '50',
avatar: '/images/avatar/1.png',
postId:0
},
{
date: "2018/7/15",
title: "背影",
imgSrc: '/images/post/bl.png',
content: '我与父亲不相见已二年余了,我最不能忘记的是他的背影 。那年冬天,祖母死了,父憨穿封费莩渡凤杀脯辑亲的差使也交卸了,正是祸不单行的日子',
reading: "120",
collection: '150',
avatar: '/images/avatar/2.png',
postId: 1
},
{
date: "2018/6/2",
title: "济南的冬天",
imgSrc: '/images/post/crab.png',
content: '对于一个在北平住惯的人,像我,冬天要是不刮风,便觉得是奇迹;济南的冬天是没有风声的。',
reading: "80",
collection: '50',
avatar: '/images/avatar/3.png',
postId: 2
},
{
date: "2018/5/1",
title: "江南之雨",
imgSrc: '/images/post/vr.png',
content: '江南之春雨如此缠绵,然煽情,如此醉,影青青之烟雨巷,雨丝风,润之使人动心如此',
reading: "80",
collection: '50',
avatar: '/images/avatar/3.png',
postId: 3
},
{
date: "2018/4/6",
title: "忆江南",
imgSrc: '/images/post/xiaolong.jpg',
content: '昨晚和阿浩谈起诸多童年记忆,不知不觉眼前浮现一片油菜花海,黄灿灿,一眼望不到头,连空气都带着甜香。',
reading: "80",
collection: '50',
avatar: '/images/avatar/4.png',
postId: 4
},
]
module.exports = {
postlist:local_database
}
post.wxml
- 绑定事件
- 添加自定义属性,把文章id传到js中
<block wx:for="{{postlist}}" wx:for-item="item">
<view catchtap="onPostTap" data-postid="{{item.postId}}">
<template is="postItem" data="{{...item}}" />
</view>
</block>
post.js
- 获取到文章id
- 跳到详情页面
var postsData = require('../../data/posts-data.js')
Page({
data: {
postlist: postsData.postlist
},
onPostTap: function (event) {
var postId = event.currentTarget.dataset.postid;
wx:wx.navigateTo({
url: 'post-detail/post-detail'
})
}
})
在posts目录下新建post-detail目录
post-detail.wxml
<view>这是文章详情页</view>
app.json全局配置
{
"pages": [
"pages/welcome/welcome",
"pages/posts/post",
"pages/posts/post-detail/post-detail"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
}
}
现在点击文章,就可以跳转到文章详情页面了。
10.文章详情页面布局
post-detail.wxml
<view class="container">
<image class="head-image" src="/images/post/sls.JPG"></image>
<view class="author-date">
<image class="avatar" src="/images/avatar/2.png"></image>
<text class="author">朱自清</text>
<text class="const-text">发表于</text>
<text class="date">一天前</text>
</view>
<text class="title">背影</text>
<view class="tool">
<view class="circle-img">
<image src="/images/icon/collection.png"></image>
<image class="share-img" src="/images/icon/share.png"></image>
</view>
<view class="horizon"></view>
</view>
<text class='detail'>我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”</text>
</view>
post-detail.wxss
.container{
display:flex;
flex-direction: column;
}
.head-image{
width: 100%;
height: 460rpx;
}
.author-date{
flex-direction: row;
margin-left:30rpx;
margin-top: 20rpx;
}
.avatar{
height: 64rpx;
width: 64rpx;
vertical-align: middle;
}
.author{
font-size: 30rpx;
font-weight: 300;
margin-left: 20rpx;
vertical-align: middle;
color: #666;
}
.const-text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
}
.date{
font-size: 24rpx;
margin-left: 30rpx;
vertical-align: middle;
color: #999;
}
.title{
margin-left: 40rpx;
font-size: 36rpx;
font-weight: 700;
margin-top: 30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.tools{
margin-top: 20rpx;
}
.circle-img{
float: right;
margin-right: 40rpx;
vertical-align: middle;
}
.circle-img image{
width: 90rpx;
height: 90rpx;
}
.share-img{
margin-left: 30rpx;
}
.horizon{
width: 660rpx;
height: 1px;
background-color: #e5e5e5;
vertical-align: middle;
position: relative;
top: 46rpx;
margin: 0 auto;
z-index: -99;
}
.detail{
color: #666;
margin-left: 30rpx;
margin-top: 20rpx;
margin-right: 30rpx;
line-height: 44rpx;
letter-spacing: 2px;
}
app.wxss
text{
font-family:MicroSoft yahei;
font-size: 24rpx;
}
效果预览
11.播放按钮和导航栏
post-detial.wxml添加一个播放按钮图片
<view class="container">
<image class="head-image" src="/images/post/sls.JPG"></image>
<image class="audio" src="/images/music/music-start.png"></image>
<view class="author-date">
<image class="avatar" src="/images/avatar/2.png"></image>
<text class="author">朱自清</text>
<text class="const-text">发表于</text>
<text class="date">一天前</text>
</view>
<text class="title">背影</text>
<view class="tool">
<view class="circle-img">
<image src="/images/icon/collection.png"></image>
<image class="share-img" src="/images/icon/share.png"></image>
</view>
<view class="horizon"></view>
</view>
<text class='detail'>我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”</text>
</view>
post-detail.wxss
.audio{
width: 102rpx;
height: 110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;
top: 180rpx;
opacity: 0.6
}
post-detail.json添加导航栏文字
{
"navigationBarTitleText": "阅读"
}
效果
12.使用数据填充文章详情页面
post-data.js
var local_database = [{
date: "2018/8/16",
title: "荷塘月色",
imgSrc: '/images/post/sls.JPG',
content: '这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。',
reading: "100",
collection: '50',
avatar: '/images/avatar/1.png',
postId: 0,
headImgSrc: "/images/post/sls.JPG",
author: "朱自清",
datetime: "24小时前",
detail: "这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊郁郁的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。路上只我一个人,背着手踱着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现 在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。"
},
{
date: "2018/7/15",
title: "背影",
imgSrc: '/images/post/bl.png',
content: '我与父亲不相见已二年余了,我最不能忘记的是他的背影 。那年冬天,祖母死了,父憨穿封费莩渡凤杀脯辑亲的差使也交卸了,正是祸不单行的日子',
reading: "120",
collection: '150',
avatar: '/images/avatar/2.png',
postId: 1,
headImgSrc: "/images/post/bl.png",
author: "朱自清",
datetime: "三天前",
detail: "我与父亲不相见已二年余了,我最不能忘记的是他的背影。那年冬天,祖母死了,父亲的差使也交卸了,正是祸不单行的日子,我从北京到徐州,打算跟着父亲奔丧回家。到徐州见着父亲,看见满院狼藉的东西,又想起祖母,不禁簌簌地流下眼泪。父亲说,“事已如此,不必难过,好在天无绝人之路!”回家变卖典质,父亲还了亏空;又借钱办了丧事。这些日子,家中光景很是惨淡,一半为了丧事,一半为了父亲赋闲。丧事完毕,父亲要到南京谋事,我也要回北京念书,我们便同行。到南京时,有朋友约去游逛,勾留了一日;第二日上午便须渡江到浦口,下午上车北去。父亲因为事忙,本已说定不送我,叫旅馆里一个熟识的茶房陪我同去。他再三嘱咐茶房,甚是仔细。但他终于不放心,怕茶房不妥帖;颇踌躇了一会。其实我那年已二十岁,北京已来往过两三次,是没有甚么要紧的了。他踌躇了一会,终于决定还是自己送我去。我两三回劝他不必去;他只说,“不要紧,他们去不好!” "
},
{
date: "2018/6/2",
title: "济南的冬天",
imgSrc: '/images/post/crab.png',
content: '对于一个在北平住惯的人,像我,冬天要是不刮风,便觉得是奇迹;济南的冬天是没有风声的。',
reading: "80",
collection: '50',
avatar: '/images/avatar/3.png',
postId: 2,
headImgSrc: "/images/post/crab.png",
author: "老舍",
datetime: "一月前",
detail: "对于一个在北平住惯的人,像我,冬天要是不刮风,便觉得是奇迹;济南的冬天是没有风声的。对于一个刚由伦敦回来的人,像我,冬天要能看得见日光,便觉得是怪事;济南的冬天是响晴的。自然,在热带的地方,日光是永远那么毒,响亮的天气,反有点叫人害怕。可是,在北中国的冬天,而能有温晴的天气,济南真得算个宝地。设若单单是有阳光,那也算不了出奇。请闭上眼睛想:一个老城,有山有水,全在天底下晒着阳光,暖和安适地睡着,只等春风来把它们唤醒,这是不是个理想的境界?小山整把济南围了个圈儿,只有北边缺着点口儿。这一圈小山在冬天特别可爱,好像是把济南放在一个小摇篮里,它们安静不动地低声地说“你们放心吧,这儿准保暖和。真的,济南的人们在冬天是面上含笑的。他们一看那些小山,心中便觉得有了着落,有了依靠."
},
{
date: "2018/5/1",
title: "江南之雨",
imgSrc: '/images/post/vr.png',
content: '江南之春雨如此缠绵,然煽情,如此醉,影青青之烟雨巷,雨丝风,润之使人动心如此',
reading: "80",
collection: '50',
avatar: '/images/avatar/3.png',
postId: 3,
headImgSrc: "/images/post/crab.png",
author: "老舍",
datetime: "一月前",
detail: "对于一个在北平住惯的人,像我,冬天要是不刮风,便觉得是奇迹;济南的冬天是没有风声的。对于一个刚由伦敦回来的人,像我,冬天要能看得见日光,便觉得是怪事;济南的冬天是响晴的。自然,在热带的地方,日光是永远那么毒,响亮的天气,反有点叫人害怕。可是,在北中国的冬天,而能有温晴的天气,济南真得算个宝地。设若单单是有阳光,那也算不了出奇。请闭上眼睛想:一个老城,有山有水,全在天底下晒着阳光,暖和安适地睡着,只等春风来把它们唤醒,这是不是个理想的境界?小山整把济南围了个圈儿,只有北边缺着点口儿。这一圈小山在冬天特别可爱,好像是把济南放在一个小摇篮里,它们安静不动地低声地说“你们放心吧,这儿准保暖和。真的,济南的人们在冬天是面上含笑的。他们一看那些小山,心中便觉得有了着落,有了依靠."
},
{
date: "2018/4/6",
title: "忆江南",
imgSrc: '/images/post/xiaolong.jpg',
content: '昨晚和阿浩谈起诸多童年记忆,不知不觉眼前浮现一片油菜花海,黄灿灿,一眼望不到头,连空气都带着甜香。',
reading: "80",
collection: '50',
avatar: '/images/avatar/4.png',
postId: 4,
headImgSrc: "/images/post/crab.png",
author: "老舍",
datetime: "一月前",
detail: "对于一个在北平住惯的人,像我,冬天要是不刮风,便觉得是奇迹;济南的冬天是没有风声的。对于一个刚由伦敦回来的人,像我,冬天要能看得见日光,便觉得是怪事;济南的冬天是响晴的。自然,在热带的地方,日光是永远那么毒,响亮的天气,反有点叫人害怕。可是,在北中国的冬天,而能有温晴的天气,济南真得算个宝地。设若单单是有阳光,那也算不了出奇。请闭上眼睛想:一个老城,有山有水,全在天底下晒着阳光,暖和安适地睡着,只等春风来把它们唤醒,这是不是个理想的境界?小山整把济南围了个圈儿,只有北边缺着点口儿。这一圈小山在冬天特别可爱,好像是把济南放在一个小摇篮里,它们安静不动地低声地说“你们放心吧,这儿准保暖和。真的,济南的人们在冬天是面上含笑的。他们一看那些小山,心中便觉得有了着落,有了依靠."
},
]
module.exports = {
postlist: local_database
}
post.js
var postsData = require('../../data/posts-data.js')
Page({
data: {
postlist: postsData.postlist
},
onPostTap: function (event) {
var postId = event.currentTarget.dataset.postid;
wx:wx.navigateTo({
url: "post-detail/post-detail?id=" + postId
})
}
})
post-detail.js
var postsData = require('../../../data/posts-data.js')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var postId = options.id;
var postData = postsData.postlist[postId];
this.setData({
postData:postData
})
},
})
post-detail.wxml
<view class="container">
<image class="head-image" src="{{postData.headImgSrc}}"></image>
<image class="audio" src="/images/music/music-start.png"></image>
<view class="author-date">
<image class="avatar" src="{{postData.avatar}}"></image>
<text class="author">{{postData.author}}</text>
<text class="const-text">发表于</text>
<text class="date">{{postData.datetime}}</text>
</view>
<text class="title">{{postData.title}}</text>
<view class="tool">
<view class="circle-img">
<image src="/images/icon/collection.png"></image>
<image class="share-img" src="/images/icon/share.png"></image>
</view>
<view class="horizon"></view>
</view>
<text class='detail'>{{postData.detail}}</text>
</view>
13.使用缓存实现文章收藏
post-detail.wxml
<view class="circle-img">
<image wx:if="{{collected}}" catchtap='onCollectionTap' src="/images/icon/collection.png"></image>
<image wx:else catchtap='onCollectionTap' src="/images/icon/collection-anti.png"></image>
<image class="share-img" src="/images/icon/share.png"></image>
</view>
post-detail.js
var postsData = require('../../../data/posts-data.js')
Page({
data: {
},
onLoad: function(options) {
var postId = options.id;
var postData = postsData.postlist[postId];
this.setData({
postData: postData,
'currentPostId': postId
})
var postsCollected = wx.getStorageSync('posts_Collected')
if (postsCollected) {
var postCollected = postsCollected[postId]
this.setData({
collected: postCollected
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync('posts_Collected', postsCollected);
}
},
onCollectionTap: function(ev) {
var postsCollected = wx.getStorageSync('posts_Collected')
var postCollected = postsCollected[this.data.currentPostId]
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
// 更新文章是否收藏的缓存值
wx.setStorageSync('posts_Collected', postsCollected)
// 更新数据绑定变量,实现切换图片
this.setData({
collected: postCollected
})
}
})
可以看到缓存的状态
posted on 2018-08-17 13:26 zhang_derek 阅读(1303) 评论(1) 编辑 收藏 举报