夜光序言：
若是命运摆在你面前的是残羹冷炙，你也要把它当成华堂盛宴吃下去。
正文：
以道御术 / 以术识道
实际开发中，我们不可以写的这么死板
需要进一步优化代码
这样写嗯~~
这里要做个判断
这里，需要学会，如果要变换，我们需要先预设一个初始化值
之后运用true or false来
我们需要运用这种表达式来进行判断
<!--pages/news/news-detail/news-detail.wxml-->
<view class="news-detail-container">
<!-- <view>{{authorName}}</view> -->
<image class="head-img" src="../../images/115.jpg" mode="widthFix"></image>
<view class="author-time">
<image class="author-avatar" src="../../images/114.jpg" mode="widthFix"></image>
<text class="author-name">{{authorName}}</text>
<text class="const-text">发表于</text>
<text class="time">{{authorTime}}</text>
<!-- <image catchtap="playermusic" class="music" src=""></image> -->
<image bindtap="playerMusicTap" class="playermusic" src="{{isPlayer?'../../images/f.jpg' : '../../images/e.jpg'}}"></image>
</view>
<text class="title">I am the bone of my sword. 身为剑体</text>
<view class="tool">
<view class="circle-img">
<image wx:if="{{collected}}" catchtap="collectTap" src="../../images/c.jpg" mode="widthFix"></image>
<image wx:else="" catchtap="collectTap" src="../../images/d.jpg" mode="widthFix"></image>
<!-- <image></image> -->
<image catchtap="onShowTap" class="share-img" src="../../images/b.jpg" mode="widthFix"></image>
</view>
<view class="horizon"></view>
</view>
<text class="detail">I am the bone of my sword. 身为剑体 Steel is my body, and fire is my blood. 钢铁之血灼璃之心 I have created over a thousand blades. 手创千剑历经百战 Unknown to death,Nor known to life. 无一败绩无一知己 Have withstood pain to create many weapons. 常独自一人自醉与剑丘之巅 Yet, those 乏讥催客诎九挫循旦末hands will never hold anything. 因此此生亦无任何意义 So as I pray, unlimited blade works. 则其身定为无限剑制</text>
</view>
// pages/news/news-detail/news-detail.js
var newsData = require("../../data/newsdata.js")
Page({
/**
* 页面的初始数据
*/
data: {
// detailData:[] 这个初始化，我们也先不要
//音乐播放，切换图标
isPlayer:false //这边我们初始化一个值
},
/**
* 生命周期函数--监听页面加载
* 夜光：这个生命周期函数用的情况比较多
*/
onLoad: function (options) {
// console.log(options.newsid)
console.log();
this.setData(
// 这个不行嗯~
// detailData:newsData.initData[options.newsid]
newsData.initData[options.newsid]
)
this.setData({
newsid: options.newsid
})
//测试本地存储
// wx.setStorageSync("key", "data") 我先把这句代码注释掉，接下来
// console.log(wx.getStorageSync("key"));
//收藏存储数据格式
//var newsCollect={
// 0：true
// 1：flase
//}
//第一次进入的时候，判断是否存在本地存储以及是否收藏，这里
var newsCollect = wx.getStorageSync("newsCollect");
//之后我们判断
//如果newsCollect存在，则代表以前收藏过或者取消过收藏
if (newsCollect){
var newCollect = newsCollect[options.newsid]
this.setData({
collected: newCollect
})
}else{
//第一次进入，根本不存在数据
var newsCollect = {}; //先定义一个空对象
//我把当前唯一id放到newsCollect对象中，默认指定false
newsCollect[options.newsid] = false; //这里，我们需要对对象和数组之间的关系有较为深刻的认识
//放到本地存储之中去
wx.setStorageSync("newsCollect", newsCollect)
}
},
//下面，我们写一个方法
collectTap:function(event){
//我们一般写方法，都会先在控制台随便打印点东西，看看是否有问题
// console.log("1")
// console.log(this.data.newsid); //打印看一下 有了效果，我们就可以干活了
// this.data.newsid
//既然如此，我们在这个里面就要存储了
//注意：newsCollect是所有数据的集合
var newsCollect = wx.getStorageSync("newsCollect"); //这里，我们数据存储的格式就是newsCollect
//这里需要提醒一下，第一次进来的时候就要判断数据是否存在
//但是这里并没有写，这里是进来之后的逻辑，这需要注意一下
//下面我们再定义一个一条的
// var newCollect = newsCollect
var newCollect = newsCollect[this.data.newsid];
// console.log(newCollect)
//这里是什么逻辑，如果是收藏的则被取消，如果未被收藏则收藏
newCollect = !newCollect; //反正取反么，true or false
//更新到本地存储中
newsCollect[this.data.newsid] = newCollect;
wx.setStorageSync("newsCollect", newsCollect); //newsCollect把这个集合的整体再放进去
//后台数据是更新了，那么前端的视图层如何更新呢
//下面就是渲染到,并更新视图
this.setData({
//暂时不知道，因为我们根本不知道视图是怎么改变的
collected: newsCollect[this.data.newsid]
})
wx.showToast({
title: newsCollect[this.data.newsid]?'收藏成功':"取消收藏",
// icon: 'loading',这个属性设定，表示的有点东西，就是一直转圈圈的那个特效，仿佛有很多数据在交互似的
icon: 'success',
duration: 2000,
mask:true
})
},
onShowTap:function(event){
// wx.showModal({
// title: '提示',
// content: '这是一个模态弹窗',
// success(res) {
// if (res.confirm) {
// console.log('用户点击确定')
// } else if (res.cancel) {
// console.log('用户点击取消')
// }
// }
// })
wx.showActionSheet({
itemList: ['分享到微信', '分享到微博', '分享到QQ'],
success(res) {
console.log(res.tapIndex)
},
fail(res) {
console.log(res.errMsg)
}
})
},
onShareAppMessage:function(){
return{
title: newsData.initData[this.data.newsid].title,
path:"/pages/news/news-detail/news-detail"
}
},
//音乐播放的事件
playerMusicTap:function(event){
//这里需要注意
var that = this;
//播放音乐要判断当前音乐是否在播放
wx.getBackgroundAudioPlayerState({
success:function(res){
var status = res.status
if(status !=1){
//没有在播放
//调用之前写好的播放的逻辑就行了
wx.playBackgroundAudio({
dataUrl: newsData.initData[that.data.newsid].music.url,
title: newsData.initData[that.data.newsid].music.title,
coverImgUrl: newsData.initData[that.data.newsid].music.coverImg
})
that.setData({
isPlayer:true
})
}else{
wx.pauseBackgroundAudio()
that.setData({
isPlayer: false
})
}
}
})
}
})
var initData = [
{
"newsid":0,
"authorIcon": "../images/3.png",
"authorName":"GeniusTeam",
"authorTime": "2020/3/9",
"title":"三十年河东三十年河西，莫欺少年穷",
"articleImg": "../images/30.jpg",
"articleText":"传说在那世界开辟时，曾有一生灵诞生，号称祖龙，吞天灭地，乃是至高般的存在，祖龙最后身化万物，从此混沌世界中有了诸多生命出现。",
"articlelikeText":11,
"music":{
"url":"写服务器的地址嗯" ,
"title": "",
"coverImg":""
}
},
{
"newsid": 1,
"authorIcon": "../images/3.png",
"authorName": "GeniusTeam",
"authorTime": "2020/3/9",
"title": "三十年河东三十年河西，莫欺少年穷",
"articleImg": "../images/28.png",
"articleText": "传说在那世界开辟时，曾有一生灵诞生，号称祖龙，吞天灭地，乃是至高般的存在，祖龙最后身化万物，从此混沌世界中有了诸多生命出现。",
"articlelikeText": 11,
"music": {
"url": "写服务器的地址嗯",
"title": "",
"coverImg": ""
}
}
]
module.exports = {
initData: initData
}
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
