color: #666;
}
.const-text{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
}
.date{
font-size: 24rpx;
color: #999;
margin-left: 20rpx;
vertical-align: middle;
}
.title{
margin-left: 40rpx;
font-size: 36rpx;
font-weight: 700;
margin-top: 30rpx;
letter-spacing: 2px;
color: #ab556c;
}
.tool{
margin-top: 20rpx;
}
.cicle-img{
float: right;
margin-right: 40rpx;
vertical-align: middle;
}
.cicle-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.js 文件
text{
/* 设置字体 */
font-family: MicroSoft Yahei;
font-size: 24rpx;
}
post-detail.json 文件
{
“navigationBarTitleText”: “阅读”
}
app.json 文件
{
“pages”: [
“pages/welcome/welcome”,
“pages/posts/post”,
“pages/posts/post-detail/post-detail”
],
“window”: {
“navigationBarBackgroundColor”: “#405f80”
}
}
post.json 文件
{
“navigationBarTitleText”: “文与字”
}
向静态详情页面添加动态数据
详情页会出现列表页所没有的数据,例如头图片、详细内容、发表时间等,所以我们要在 posts-data.js 文件中添加这些数据。
posts-data.js 文件
var local_database = [{
date: “Sep 18 2018”,
title: ‘不忘初心,方得始终’,
content: ‘从开始时我们彼此都有着无比美好的心灵,只是到最后我们都发现这个世界并非我们想得那么好,于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时,我们才突然回想到我们的初心早以不见。’,
reading: ‘112’,
collection: ‘64’,
headImgSrc: ‘/images/04.jpg’,
author: ‘J_King’,
dateTime: ‘21小时前’,
detail: ‘你要学会控制自己对他的想念,你要告诉自己李春蕾其实他没有那么爱你,你不需要为他付出在意他什么,因为他和你没有任何血缘关系,你需要的是每天想办法怎么卖出去一台手机,如何过成自己想要的模样,可是,任时光匆匆流逝不忘初心的我,却只想在乎你,加油!你会成功活出像王菲那样的生活。不忘初心,方得始终;放任潇洒,终成无畏!我要的很简单,可是却得不到。新的一年,我放弃所有。开始拼命工作,不为别的只为麻痹自己,填补自己所有的时间。世界有太多不幸,可能我的不幸就是把一些东西看的太重,另一些东西看的不那么重。平衡一切,只为自己,不忘初心……不忘初心,方得始终。凝望岁月河流中的那一世繁华如梦的过往,岁月无情,人有情,每张照片的背后,仿佛都在讲述着一段故事。尤其是老照片,更是岁月留在某一刻留下的印记,让人产生时空穿越的感觉,伴有无尽的遐想与回忆。看照片是拼接历史的变迁,是幸福的延续,历程的封存,青春的记录。无论是闻名于世的伟人,还是渺小的小人物,每张照片都是我们回不去的曾经。’,
// 嵌套
img: {
imgSrc: ‘/images/04.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 0,
},
{
date: “Nav 16 2018”,
title: ‘初心易得,始终难守’,
content: ‘有时候人就是这样,遇到再大的事儿自己扛,忍忍就过去了,可听到身旁的人一句安慰就瞬间完败。于是后来才明白,我们怕的不是冷漠 ,怕的是突然的温柔。怕的不是自己吃苦,怕的是身边的人为你难过。怕的不是孤独,怕的是辜负。’,
reading: ‘256’,
collection: ‘151’,
headImgSrc: ‘/images/05.jpg’,
author: ‘J_King’,
dateTime: ‘10小时前’,
detail: ‘几乎每个人都听过“不忘初心,方得始终”,却少有人知道下一句“初心易得,始终难守”。我所有的自负都来自我的自卑, 所有的英雄气概都来自于我内心的软弱, 所有的振振有词都因为心中满是怀疑。 我假装无情,其实是痛恨自己的深情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。我知道黄昏正在转瞬即逝,黑夜从天而降了。我看到广阔的土地袒露着结实的胸膛,那是召唤的姿态,就像女人召唤着她们的儿女,土地召唤着黑夜来临。’,
// 嵌套
img: {
imgSrc: ‘/images/05.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 1,
},
{
date: “Nav 19 2018”,
title: ‘向死而生’,
content: ‘我希望跟我有缘的人能够跟我一样感恩这样美好的缘分,对未来有很多乐观正面的思考,那该有多么好!而且,只要好好体验人生、享受世界的真善美,让自己的生命不断升华成长,不必留下什么,这个世界就会因你而芬芳。若真要留下什么,那就是留下我们的孩子。如果真要衡量什么,一个善良的后代,能带给世界的正面影响,一定会超过邪恶的人。’,
reading: ‘256’,
collection: ‘11’,
headImgSrc: ‘/images/06.jpg’,
author: ‘J_King’,
dateTime: ‘6小时前’,
detail: ‘有一种活法,叫“向死而生”!世界上有两条路,一条有形的横着供人前行徘徊或倒退,一条无形的竖着供灵魂升入天堂或下地狱。只有在横着的路上踏遍荆棘而无悔,方可在竖着的路上与云霞为伍。过去都是假的,回忆是一条没有归途的路,以往的一切春天都无法复原,即使最狂热最坚贞的爱情,归根结底也不过是一种瞬息即逝的现实,唯有孤独永恒。人永远都无法知道自己该要什么,因为人只能活一次,既不能拿它跟前世相比,也不能在来生加以修正。没有任何方法可以检验哪种抉择是好的,因为不存在任何比较。一切都是马上经历,仅此一次,不能准备。每一个不曾起舞的日子,都是对生命的辜负。现在每个我遇见的笑着的人,他们都不曾因为苦而放弃,他们只因扛而成长。谁不希望自己活得轻松,没有压力,一切随性,但如果你真的那样去做的话,你会发现这个世界都在和你作对。如果有一天你真的觉得自己轻松了,那也不是因为生活越来越容易了,而是因为我们越来越坚强。’,
// 嵌套
img: {
imgSrc: ‘/images/06.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 2,
},
{
date: “Aue 05 2018”,
title: ‘缘分’,
content: ‘其实,同窗或者同事的缘分,都是有时尽的,如果你从中把个别人变成了一生挚爱或者挚友,缘分会稍长一点,但我们大部分人都只是萍水相逢短暂共处的缘分。这就是人生。’,
reading: ‘356’,
collection: ‘122’,
headImgSrc: ‘/images/07.jpg’,
author: ‘J_King’,
dateTime: ‘3小时前’,
detail: ‘当你开始喜欢一个人的时候,你会觉得ta是这个世界上最美的,你会自作多情地认为,你与ta之间所有细小的互动,都是上天安排好的,似乎从此,人间剧本全为你我而写。缘,似 乎来 了。 但 很多事往往是那么发展,缘有了,情分没到,缘分不是坐等的。缘可以让上天安排,情分却是要靠自己攒的。 一些人总是抱怨有缘无份,是因为他们把命运想得太简单了。 这世上的缘分,没有早一秒,没有晚一秒,只有在那一瞬间,我看着你的时候,你也认出来我!爱情如此,亲情亦如此。 缘分,是你兜兜转转几个圈时,还是摆脱不掉的宿命。其实怕的不是两人不同心,而是怕心里想的都一样,我自问我凭什么配得上你,你疑惑你凭什么搭得上我,于是就这样错过了缘分,错过了爱情。所谓的缘分,说起来只是简单的两个字,只是绝大多数时候都被拆开。一缘字,这世上千万人与我相遇,一分字,即是擦肩。唯那几人相遇而识,又唯那千万分之一的运气才是缘分 使然 ,遇 见 而不忘,长留心中。而更要多少的缘分才让两心都是如此,才能,相思,相念。’,
// 嵌套
img: {
imgSrc: ‘/images/07.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 3,
},
{
date: “Nov 17 2018”,
title: ‘相遇’,
content: ‘当有两颗尘埃在这个宇宙里接近、相遇后分开,它们各自迎向前方无境的黑暗,也就再也不可能碰到一起。尽管说不清,是在这之前,从无限大的宇宙中以无限小的几率碰到一起更温暖;还是在这之后,在无限大的宇宙中以同样无限远的时间分离更无奈。’,
reading: ‘116’,
collection: ‘75’,
headImgSrc: ‘/images/08.jpg’,
author: ‘J_King’,
dateTime: ‘1小时前’,
detail: ‘我和他都这样可怜,在命运的起伏中跌跌撞撞,一路走来,我终于是失去他,而他也终于没有能够抓紧我的手。不是我们爱得不够,只是我们的时间总是太少,我们相遇的太早,那时候我们不懂得珍惜。等我们知道对方对于自己的重要,却已经再也找不到机会。这世上的事情,都没有办法重来一次。愿你能够明白,世上所有的相遇都有它的意义。正是因为一路上失去太多,才会更加珍惜现在的所得;正是因为经历了这些,才能学会沉淀,才能变得不再患得患失,不再无理取闹。有些人遇见了总有告别的时候,这或许就是你们相遇的意义。就是因为有了这个人的出现,才有了现在的。那个在不经意中,也许就改变了我一生的男孩。我相信总有一天,我们会在世界的屋顶再次相遇。 不要轻易用过去来衡量生活的幸与不幸,每个人的生命都是可以绽放美丽的,只要你珍惜。我的未来已经无法和你再走在一起了,就算我们相遇了,对你而言也不会是幸福吧,所以我想要活下去,只是想要守护着你,像幽灵一般的存在。世界上哪有那么多的不期而遇,只不过是其中一个人苦苦的等待罢了···’,
// 嵌套
img: {
imgSrc: ‘/images/08.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 4,
}
]
// 给脚本文件定义一个出口
module.exports = {
postList: local_database
}
在 post.js 文件中的打开新闻详情页面的事件中,将点击新闻的id传到新页面。
修改post.js文件新闻详情页的点击事件
// 打开新闻详情页事件
onPostTap:function(event){
// 获取新闻的postId
var postId = event.currentTarget.dataset.postid;
// 跳转到子页面,新闻详情界面
wx.navigateTo({
// 将新闻块的postid穿进去
url: ‘post-detail/post-detail?id=’+postId,
})
},
在新闻详情页的界面接收到传进的参数,拿到相应的数据,进行数据绑定。
post-detauk.js 文件
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
onLoad:function(option){
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData
}
);
}
})
修改 post-detail.wxml 文件,是静态数据变成动态。
文件收藏功能(前篇) —— 设置缓存(同步)
小程序缓存开发文档官网:https://developers.weixin.qq.com/miniprogram/dev/api/data.html
缓存案例代码
wx.setStorageSync(‘key’, ‘true’)
wx.setStorageSync(‘key’, {
game:‘风暴英雄’,
developer:‘暴雪’,
})
缓存的作用:
在小程序中,如果用户不去主动清除缓存,则一直存在。
获取缓存变量
var game = wx.getStorageSync(“key”);
删除缓存变量
wx.removeStorageSync(“key”);
清除所有缓存
wx.clearStorageSync();
小程序缓存上线最大不能超过 10M 。
使用小程序模拟详情页文章的收藏和取消收藏
微信小程序showToast开发文档:
https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowtoastobject
修改 post-detail.wxml 文件代码
在 post-ddetail.js 文件修改代码
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
onLoad: function(option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
},
// 点击收藏按钮
onCollectionTap: function(event) {
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
})
// 收藏成功提示s
wx.showToast({
title: postCollected ? ‘收藏成功’ : ‘取消成功’,
// 设置出现时间长度
duration: 1000,
// 设置出现图标
icon:‘success’,
// success:function(){
// },
// fail:function(){
// },
// complete:function(){
// }
})
}
})
使用 showModal 方式实现收藏操作
修改 post-detail.js 文件
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
onLoad: function (option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
},
// 点击收藏按钮
onCollectionTap: function (event) {
var postsCollected = wx.getStorageSync(‘posts_collected’);
var postCollected = postsCollected[this.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
this.showToast(postCollected, postsCollected);
},
showModal: function (postCollected, postsCollected) {
var that = this;
wx.showModal({
title: ‘收藏’,
content: postCollected?‘收藏该文章’:‘取消收藏该文章’,
showCancel: ‘true’,
cancelText: ‘取消’,
cancelColor: ‘#333’,
confirmText: ‘确认’,
confirmColor: ‘#405f80’,
success: function (res) {
if (res.confirm) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
that.setData({
collected: postCollected
})
}
},
})
},
showToast: function (postCollected, postsCollected) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
this.setData({
collected: postCollected
}),
// 收藏成功提示
wx.showToast({
title: postCollected ? ‘收藏成功’ : ‘取消成功’,
// 设置出现时间长度
duration: 1000,
// 设置出现图标
icon: ‘success’,
})
}
})
微信小程序分享按钮设计
在 post-detail.wxml 文件中为 分享按钮 添加点击事件
在 post-detail.js 文件中,为分享按钮实现点击事件操作
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
onLoad: function (option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
},
// 点击收藏按钮
onCollectionTap: function (event) {
var postsCollected = wx.getStorageSync(‘posts_collected’);
var postCollected = postsCollected[this.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
this.showToast(postCollected, postsCollected);
},
showModal: function (postCollected, postsCollected) {
var that = this;
wx.showModal({
title: ‘收藏’,
content: postCollected ? ‘收藏该文章’ : ‘取消收藏该文章’,
showCancel: ‘true’,
cancelText: ‘取消’,
cancelColor: ‘#333’,
confirmText: ‘确认’,
confirmColor: ‘#405f80’,
success: function (res) {
if (res.confirm) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
that.setData({
collected: postCollected
})
}
},
})
},
showToast: function (postCollected, postsCollected) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
this.setData({
collected: postCollected
}),
// 收藏成功提示
wx.showToast({
title: postCollected ? ‘收藏成功’ : ‘取消成功’,
// 设置出现时间长度
duration: 1000,
// 设置出现图标
icon: ‘success’,
})
},
// 分享按钮点击事件
onShareTap: function (event) {
var itemList = [
“分享给微信好友”,
“分享到朋友圈”,
“分享到QQ”,
“分享到微博”
]
wx.showActionSheet({
itemList: itemList,
// 设置字体颜色
itemColor: “405f80”,
success: function (res) {
// res.cancel 用户是不是点击了取消
// res.tapIndex 数组元素的序号,从0开始
wx.showModal({
title: '用户分享到了 ’ + itemList[res.tapIndex],
content:“用户选择是否取消?”+res.cancel+“现在还不能实现分享功能,什么时候能支持呢?”
})
}
})
}
})
缓存操作,同步/异步
// 点击收藏按钮
onCollectionTap: function (event) {
this.getPostsCollectedAsy(); // 异步
// this.getPostsCollectedSyc(); // 同步
},
// 异步
getPostsCollectedAsy: function () {
var that = this;
wx.getStorage({
key: ‘posts_collected’,
success: function (res) {
var postsCollected = res.data;
var postCollected = postsCollected[that.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[that.data.currentPostId] = postCollected;
that.showToast(postCollected, postsCollected);
}
})
},
// 同步
getPostsCollectedSyc: function () {
var postsCollected = wx.getStorageSync(‘posts_collected’);
var postCollected = postsCollected[this.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
this.showToast(postCollected, postsCollected);
},
同步的缺陷:如果同步的代码运行的比较慢,那么UI会在同步的代码处卡住,后面的代码走不了,用户体验效果很差!
异步的好处:代码由上到下立刻走完,不会让UI出现明显的卡顿现象。
如果可以使用同步操作,建议不要使用异步!只有当同步解决不了的时候再用异步!
音乐播放器的使用
小程序音乐播放官方文档:
首先修改 post-detail.wxml 文件,使音乐按钮可以播放/暂停切换。
修改 posts-data.js 文件,给每个新闻内容添加音乐数据。
var local_database = [{
date: “Sep 18 2018”,
title: ‘不忘初心,方得始终’,
content: ‘从开始时我们彼此都有着无比美好的心灵,只是到最后我们都发现这个世界并非我们想得那么好,于是我们的心灵渐渐被贪婪、欲望给染黑。到生命燃烧殆尽时,我们才突然回想到我们的初心早以不见。’,
reading: ‘112’,
collection: ‘64’,
headImgSrc: ‘/images/04.jpg’,
author: ‘J_King’,
dateTime: ‘21小时前’,
detail: ‘你要学会控制自己对他的想念,你要告诉自己李春蕾其实他没有那么爱你,你不需要为他付出在意他什么,因为他和你没有任何血缘关系,你需要的是每天想办法怎么卖出去一台手机,如何过成自己想要的模样,可是,任时光匆匆流逝不忘初心的我,却只想在乎你,加油!你会成功活出像王菲那样的生活。不忘初心,方得始终;放任潇洒,终成无畏!我要的很简单,可是却得不到。新的一年,我放弃所有。开始拼命工作,不为别的只为麻痹自己,填补自己所有的时间。世界有太多不幸,可能我的不幸就是把一些东西看的太重,另一些东西看的不那么重。平衡一切,只为自己,不忘初心……不忘初心,方得始终。凝望岁月河流中的那一世繁华如梦的过往,岁月无情,人有情,每张照片的背后,仿佛都在讲述着一段故事。尤其是老照片,更是岁月留在某一刻留下的印记,让人产生时空穿越的感觉,伴有无尽的遐想与回忆。看照片是拼接历史的变迁,是幸福的延续,历程的封存,青春的记录。无论是闻名于世的伟人,还是渺小的小人物,每张照片都是我们回不去的曾经。’,
// 嵌套
img: {
imgSrc: ‘/images/04.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 0,
music: {
url: “http://ws.stream.qqmusic.qq.com/C100003507bR0gDKBm.m4a?fromtag=38”,
title: “夜夜夜夜-齐秦”,
coverImg: “http://y.gtimg.cn/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000”
}
},
{
date: “Nav 16 2018”,
title: ‘初心易得,始终难守’,
content: ‘有时候人就是这样,遇到再大的事儿自己扛,忍忍就过去了,可听到身旁的人一句安慰就瞬间完败。于是后来才明白,我们怕的不是冷漠 ,怕的是突然的温柔。怕的不是自己吃苦,怕的是身边的人为你难过。怕的不是孤独,怕的是辜负。’,
reading: ‘256’,
collection: ‘151’,
headImgSrc: ‘/images/05.jpg’,
author: ‘J_King’,
dateTime: ‘10小时前’,
detail: ‘几乎每个人都听过“不忘初心,方得始终”,却少有人知道下一句“初心易得,始终难守”。我所有的自负都来自我的自卑, 所有的英雄气概都来自于我内心的软弱, 所有的振振有词都因为心中满是怀疑。 我假装无情,其实是痛恨自己的深情。这世界没有一件事情是虚空而生的,站在光里,背后就会有阴影,这深夜里一片寂静,是因为你还没有听见声音。我知道黄昏正在转瞬即逝,黑夜从天而降了。我看到广阔的土地袒露着结实的胸膛,那是召唤的姿态,就像女人召唤着她们的儿女,土地召唤着黑夜来临。’,
// 嵌套
img: {
imgSrc: ‘/images/05.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 1,
music: {
url: “http://ws.stream.qqmusic.qq.com/C100003GdCmG4NkEOR.m4a?fromtag=38”,
title: “鬼迷心窍-李宗盛”,
coverImg: “http://y.gtimg.cn/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000”
}
},
{
date: “Nav 19 2018”,
title: ‘向死而生’,
content: ‘我希望跟我有缘的人能够跟我一样感恩这样美好的缘分,对未来有很多乐观正面的思考,那该有多么好!而且,只要好好体验人生、享受世界的真善美,让自己的生命不断升华成长,不必留下什么,这个世界就会因你而芬芳。若真要留下什么,那就是留下我们的孩子。如果真要衡量什么,一个善良的后代,能带给世界的正面影响,一定会超过邪恶的人。’,
reading: ‘256’,
collection: ‘11’,
headImgSrc: ‘/images/06.jpg’,
author: ‘J_King’,
dateTime: ‘6小时前’,
detail: ‘有一种活法,叫“向死而生”!世界上有两条路,一条有形的横着供人前行徘徊或倒退,一条无形的竖着供灵魂升入天堂或下地狱。只有在横着的路上踏遍荆棘而无悔,方可在竖着的路上与云霞为伍。过去都是假的,回忆是一条没有归途的路,以往的一切春天都无法复原,即使最狂热最坚贞的爱情,归根结底也不过是一种瞬息即逝的现实,唯有孤独永恒。人永远都无法知道自己该要什么,因为人只能活一次,既不能拿它跟前世相比,也不能在来生加以修正。没有任何方法可以检验哪种抉择是好的,因为不存在任何比较。一切都是马上经历,仅此一次,不能准备。每一个不曾起舞的日子,都是对生命的辜负。现在每个我遇见的笑着的人,他们都不曾因为苦而放弃,他们只因扛而成长。谁不希望自己活得轻松,没有压力,一切随性,但如果你真的那样去做的话,你会发现这个世界都在和你作对。如果有一天你真的觉得自己轻松了,那也不是因为生活越来越容易了,而是因为我们越来越坚强。’,
// 嵌套
img: {
imgSrc: ‘/images/06.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 2,
music: {
url: “http://ws.stream.qqmusic.qq.com/C100004HLusI2lLjZy.m4a?fromtag=38”,
title: “女儿情-万晓利”,
coverImg: “http://y.gtimg.cn/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000”
}
},
{
date: “Aue 05 2018”,
title: ‘缘分’,
content: ‘其实,同窗或者同事的缘分,都是有时尽的,如果你从中把个别人变成了一生挚爱或者挚友,缘分会稍长一点,但我们大部分人都只是萍水相逢短暂共处的缘分。这就是人生。’,
reading: ‘356’,
collection: ‘122’,
headImgSrc: ‘/images/07.jpg’,
author: ‘J_King’,
dateTime: ‘3小时前’,
detail: ‘当你开始喜欢一个人的时候,你会觉得ta是这个世界上最美的,你会自作多情地认为,你与ta之间所有细小的互动,都是上天安排好的,似乎从此,人间剧本全为你我而写。缘,似 乎来 了。 但 很多事往往是那么发展,缘有了,情分没到,缘分不是坐等的。缘可以让上天安排,情分却是要靠自己攒的。 一些人总是抱怨有缘无份,是因为他们把命运想得太简单了。 这世上的缘分,没有早一秒,没有晚一秒,只有在那一瞬间,我看着你的时候,你也认出来我!爱情如此,亲情亦如此。 缘分,是你兜兜转转几个圈时,还是摆脱不掉的宿命。其实怕的不是两人不同心,而是怕心里想的都一样,我自问我凭什么配得上你,你疑惑你凭什么搭得上我,于是就这样错过了缘分,错过了爱情。所谓的缘分,说起来只是简单的两个字,只是绝大多数时候都被拆开。一缘字,这世上千万人与我相遇,一分字,即是擦肩。唯那几人相遇而识,又唯那千万分之一的运气才是缘分 使然 ,遇 见 而不忘,长留心中。而更要多少的缘分才让两心都是如此,才能,相思,相念。’,
// 嵌套
img: {
imgSrc: ‘/images/07.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 3,
music: {
url: “http://ws.stream.qqmusic.qq.com/C100002mWVx72p8Ugp.m4a?fromtag=38”,
title: “恋恋风尘-老狼”,
coverImg: “http://y.gtimg.cn/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000”,
}
},
{
date: “Nov 17 2018”,
title: ‘相遇’,
content: ‘当有两颗尘埃在这个宇宙里接近、相遇后分开,它们各自迎向前方无境的黑暗,也就再也不可能碰到一起。尽管说不清,是在这之前,从无限大的宇宙中以无限小的几率碰到一起更温暖;还是在这之后,在无限大的宇宙中以同样无限远的时间分离更无奈。’,
reading: ‘116’,
collection: ‘75’,
headImgSrc: ‘/images/08.jpg’,
author: ‘J_King’,
dateTime: ‘1小时前’,
detail: ‘我和他都这样可怜,在命运的起伏中跌跌撞撞,一路走来,我终于是失去他,而他也终于没有能够抓紧我的手。不是我们爱得不够,只是我们的时间总是太少,我们相遇的太早,那时候我们不懂得珍惜。等我们知道对方对于自己的重要,却已经再也找不到机会。这世上的事情,都没有办法重来一次。愿你能够明白,世上所有的相遇都有它的意义。正是因为一路上失去太多,才会更加珍惜现在的所得;正是因为经历了这些,才能学会沉淀,才能变得不再患得患失,不再无理取闹。有些人遇见了总有告别的时候,这或许就是你们相遇的意义。就是因为有了这个人的出现,才有了现在的。那个在不经意中,也许就改变了我一生的男孩。我相信总有一天,我们会在世界的屋顶再次相遇。 不要轻易用过去来衡量生活的幸与不幸,每个人的生命都是可以绽放美丽的,只要你珍惜。我的未来已经无法和你再走在一起了,就算我们相遇了,对你而言也不会是幸福吧,所以我想要活下去,只是想要守护着你,像幽灵一般的存在。世界上哪有那么多的不期而遇,只不过是其中一个人苦苦的等待罢了···’,
// 嵌套
img: {
imgSrc: ‘/images/08.jpg’,
avatar: ‘/images/1.jpg’,
},
img_condition: true,
postId: 4,
music: {
url: “http://ws.stream.qqmusic.qq.com/C100002I8eGJ28BI17.m4a?fromtag=38”,
title: “朋友-谭咏麟”,
coverImg: “http://y.gtimg.cn/music/photo_new/T002R150x150M000004eGsCN3SUheO.jpg?max_age=2592000”
}
}
]
// 给脚本文件定义一个出口
module.exports = {
postList: local_database
}
在 post-detail.js 添加音乐点击事件。
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
data: {
isPlayMusic: false,
},
onLoad: function(option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
},
// 点击收藏按钮
onCollectionTap: function(event) {
this.getPostsCollectedAsy(); // 异步
// this.getPostsCollectedSyc(); // 同步
},
// 异步
getPostsCollectedAsy: function() {
var that = this;
wx.getStorage({
key: ‘posts_collected’,
success: function(res) {
var postsCollected = res.data;
var postCollected = postsCollected[that.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[that.data.currentPostId] = postCollected;
that.showToast(postCollected, postsCollected);
}
})
},
// 同步
getPostsCollectedSyc: function() {
var postsCollected = wx.getStorageSync(‘posts_collected’);
var postCollected = postsCollected[this.data.currentPostId];
// 收藏变成未收藏,未收藏变成收藏
postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;
this.showToast(postCollected, postsCollected);
},
showModal: function(postCollected, postsCollected) {
var that = this;
wx.showModal({
title: ‘收藏’,
content: postCollected ? ‘收藏该文章’ : ‘取消收藏该文章’,
showCancel: ‘true’,
cancelText: ‘取消’,
cancelColor: ‘#333’,
confirmText: ‘确认’,
confirmColor: ‘#405f80’,
success: function(res) {
if (res.confirm) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
that.setData({
collected: postCollected
})
}
},
})
},
showToast: function(postCollected, postsCollected) {
// 更新文章的缓存值
wx.setStorageSync(‘posts_collected’, postsCollected);
// 更新数据绑定变量,实现切换图片
this.setData({
collected: postCollected
}),
// 收藏成功提示
wx.showToast({
title: postCollected ? ‘收藏成功’ : ‘取消成功’,
// 设置出现时间长度
duration: 1000,
// 设置出现图标
icon: ‘success’,
})
},
// 分享按钮点击事件
onShareTap: function(event) {
var itemList = [
“分享给微信好友”,
“分享到朋友圈”,
“分享到QQ”,
“分享到微博”
]
wx.showActionSheet({
itemList: itemList,
// 设置字体颜色
itemColor: “405f80”,
success: function(res) {
// res.cancel 用户是不是点击了取消
// res.tapIndex 数组元素的序号,从0开始
wx.showModal({
title: '用户分享到了 ’ + itemList[res.tapIndex],
content: “用户选择是否取消?” + res.cancel + “现在还不能实现分享功能,什么时候能支持呢?”
})
}
})
},
// 音乐播放点击事件
onMusicTap: function(event) {
var currentPostId = this.data.currentPostId;
var isPlayMusic = this.data.isPlayMusic;
if (isPlayMusic) {
wx.pauseBackgroundAudio();
this.setData({
isPlayMusic: false,
})
} else {
wx.playBackgroundAudio({
dataUrl: postsData.postList[currentPostId].music.url,
title: postsData.postList[currentPostId].music.title,
coverImgUrl: postsData.postList[currentPostId].music.coverImg,
});
this.setData({
isPlayMusic: true,
})
}
}
})
加入不同的音乐,个性化音乐播放
在点击音乐播放的时候,头图片也进行切换(切换成音乐封面),当点击暂停在切换回来。
修改 posts-detail.wxml 文件
完善之: 总控开关控制音乐开关
在 post-detail.js 文件 load 函数中添加代码:
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
data: {
isPlayMusic: false,
},
onLoad: function(option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
// 监听音乐启动
var that = this;
wx.onBackgroundAudioPlay(function() {
that.setData({
isPlayingMusic: true,
})
});
wx.onBackgroundAudioPause(function() {
that.setData({
isPlayingMusic: false,
})
});
},
// 点击收藏按钮
onCollectionTap: function(event) {
this.getPostsCollectedAsy(); // 异步
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/38cceabb9b36baa2f7bfae5b900c8f63.jpeg)
更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等
n?x-oss-process=image/format,png)
完善之: 总控开关控制音乐开关
在 post-detail.js 文件 load 函数中添加代码:
// 定义一个变量来接受 posts_data.js文件输出的对象
// 注意:require 只能使用相对路径!
var postsData = require(‘…/…/…/data/posts-data.js’)
Page({
data: {
isPlayMusic: false,
},
onLoad: function(option) {
// 接收post.js传进来的postid值。
var postId = option.id;
// 拿到数据文件对应id的数据元素
var postData = postsData.postList[postId];
// console.log(postData)
// 数据绑定
this.setData(
// 替换发现前端的数据
{
postData: postData,
currentPostId: postId
},
);
// var postsCollected = {
// 1:‘true’,
// 2:‘false’,
// 3:‘true’,
// ···
// }
// 获取所有文章的收藏状态
var postsCollected = wx.getStorageSync(‘posts_collected’);
if (postsCollected) {
// 获取本篇文章的收藏状态
var collected = postsCollected[postId];
// 数据绑定
this.setData({
collected: collected,
})
} else {
var postsCollected = {};
postsCollected[postId] = false;
wx.setStorageSync(‘posts_collected’, postsCollected);
}
// 监听音乐启动
var that = this;
wx.onBackgroundAudioPlay(function() {
that.setData({
isPlayingMusic: true,
})
});
wx.onBackgroundAudioPause(function() {
that.setData({
isPlayingMusic: false,
})
});
},
// 点击收藏按钮
onCollectionTap: function(event) {
this.getPostsCollectedAsy(); // 异步
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-lvPrPrlS-1712752765345)]
[外链图片转存中…(img-a4FYKvSv-1712752765346)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-YG9fXXHm-1712752765346)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/38cceabb9b36baa2f7bfae5b900c8f63.jpeg)
更多面试题
**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等
[外链图片转存中…(img-sDZ6PGST-1712752765346)]