夜光序言：
若是命運擺在你面前的是殘羹冷炙，你也要把它當成華堂盛宴喫下去。
正文：
以道御術 / 以術識道
實際開發中，我們不可以寫的這麼死板
需要進一步優化代碼
這樣寫嗯~~
這裏要做個判斷
這裏，需要學會，如果要變換，我們需要先預設一個初始化值
之後運用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
}