第五章 閱讀首頁(yè)
小程序的模板templete組件以及wxml里運(yùn)用if循環(huán)和理解相對(duì)路徑絕對(duì)路徑的區(qū)別還有swiper組件的運(yùn)用各種點(diǎn)擊事件的處理和交互" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; color: rgb(85, 85, 85); font-family: 'microsoft yahei'; line-height: 35px; background-color: rgb(255, 255, 255);">在寫(xiě)這部分代碼的時(shí)候，我用的是死數(shù)據(jù)，但后來(lái)發(fā)現(xiàn)數(shù)據(jù)填充的時(shí)候太凌亂，就模仿真實(shí)向服務(wù)器請(qǐng)求數(shù)據(jù)的模式，將所有數(shù)據(jù)提取到外面，用數(shù)據(jù)綁定的方式在邏輯層獲取數(shù)據(jù)；其中用到了小程序的模板templete組件，以及wxml里運(yùn)用if循環(huán)和理解相對(duì)路徑、絕對(duì)路徑的區(qū)別，還有swiper組件的運(yùn)用，各種點(diǎn)擊事件的處理和交互。
微信小程序中的swiper組件真的是簡(jiǎn)單方便提供了頁(yè)面中圖片文字等滑動(dòng)的效果" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; color: rgb(85, 85, 85); font-family: 'microsoft yahei'; line-height: 35px; background-color: rgb(255, 255, 255);">1.微信小程序中的swiper組件真的是簡(jiǎn)單方便，提供了頁(yè)面中圖片文字等滑動(dòng)的效果。
這里的就是一個(gè)滑塊視圖容器；而就是你希望滑動(dòng)的東西，可以是文字也可以是image，其中swiper有很多屬性。常用的有
屬性名 默認(rèn)值 作用
2.indicator-dots false 是否顯示面板指示點(diǎn)
3.indicator-color rgba(0, 0, 0, .3) 指示點(diǎn)的顏色
4.indicator-active-color #000000 當(dāng)前選中的指示點(diǎn)顏色
5.autoplay false 是否自動(dòng)播放
6.intervaly 5000 自動(dòng)切換時(shí)間間隔
這里vertical=”true”在官方文檔中沒(méi)有提到，定義這個(gè)可以上下滑動(dòng)；還有一點(diǎn)需要注意vertical=”false”時(shí)，仍然是上下滑動(dòng)，原因就是微信小程序在解析時(shí)將”false”看成字符串，只要字符串不為空，就為真。所以我們需要這樣寫(xiě)：vertical=”{{false}}”
2.在組件上使用wx:for控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。(1)可以使用wx:for-item指定數(shù)組當(dāng)前元素的變量名。(2)可以使用wx:for-index指定數(shù)組當(dāng)前下標(biāo)的變量名.(3)wx:for用在標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。
WXML提供模板（Template），可以在模板中定義代碼片段，然后在不同的地方使用。可以保證格式以及數(shù)據(jù)的相同。
使用標(biāo)簽定義模板，并將模板名稱命名為tempName，賦值給屬性name。在標(biāo)簽內(nèi)部，定義模板結(jié)構(gòu)。
使用標(biāo)簽，在需要使用模板的地方。如果要用到j(luò)s文件中的數(shù)據(jù)，則需要添加data屬性。
is屬性不僅可以靜態(tài)的指向渲染的模板，也可以使用Mustache語(yǔ)法，來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。
如上都是在同一個(gè)wxml文件中定義和引用模板，而模板的定義和引用是可以分開(kāi)的。即在一個(gè)文件中定義模板，而在其他一個(gè)或多個(gè)文件wxml文件中都可以使用定義好的模板。從外部文件中引用模板，使用標(biāo)簽。同樣使用is屬性來(lái)指向要引用的標(biāo)簽。
(5)要在index.wxml中使用template中定義的模板，則需要先在index中利用import來(lái)導(dǎo)入該模板。
(6)要注意import作用域，其僅僅引用目標(biāo)文件中template。如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。
數(shù)據(jù)層單獨(dú)寫(xiě)所有數(shù)據(jù)的文件
var local_database = [? ? {date:"Apr 11 2017",? ? ? ? title:"陸壹佛爺斬獲北京市“電腦鼠走迷宮”競(jìng)賽冠軍",? ? ? ? post_img:"/images/post/match.jpg",? ? ? ? content:"2014年12月21日，“2014北京市電腦屬走迷宮競(jìng)賽”在北京交通大學(xué)拉開(kāi)帷幕。此次大賽吸引了北京交通大學(xué)、北京科技大學(xué)、中國(guó)農(nóng)業(yè)大學(xué)等高校53只隊(duì)伍，其中我校信息工程學(xué)院派出5只隊(duì)伍參加了本次比賽。",? ? ? ? collect_num:"289",? ? ? ? view_num:"482",? ? ? ? author_img:"/images/avatar/hao.jpg",? ? ? ? img_condition:true,? ? ? ? headImgSrc:"/images/post/match1.jpg",? ? ? ? headImgSrc1:"/images/post/match2.jpg",? ? ? ? headImgSrc2:"/images/post/match3.jpg",? ? ? ? author:"陸壹佛爺",dateTime:"16小時(shí)前",? ? ? ? detail:"2014年12月21日，“2014北京市電腦屬走迷宮競(jìng)賽”在北京交通大學(xué)拉開(kāi)帷幕。此次大賽吸引了北京交通大學(xué)、北京科技大學(xué)、中國(guó)農(nóng)業(yè)大學(xué)、北京城市學(xué)院等高校53只隊(duì)伍，其中我校信息工程學(xué)院派出5只隊(duì)伍參加了本次比賽。\n\n電腦鼠的英文名稱為Micromouse，實(shí)際上是一個(gè)由微處理器控制的，集感知、判斷、行走功能于一體，能夠自動(dòng)尋找最佳路徑到達(dá)目的地的小型機(jī)器人。它可以在“迷宮”中自動(dòng)感知并記憶迷宮地圖，通過(guò)一定的算法，尋找一條最佳路徑，以最快的速度到達(dá)目的地。1997年，在美國(guó)舉辦了第一屆電腦鼠競(jìng)賽，隨后，電腦鼠競(jìng)賽傳入歐洲，首屆歐洲電腦鼠競(jìng)賽于1980年在倫敦舉辦，之后英國(guó)的電腦鼠比賽便由電子工程協(xié)會(huì)（IEE）主辦。1980年11月日本電腦鼠協(xié)會(huì)（JMA）在東京舉辦了第一屆競(jìng)賽，此后，日本每年都要舉辦一屆電腦鼠競(jìng)賽。我國(guó)臺(tái)灣也于1986年10月舉辦了首屆電腦鼠比賽?，F(xiàn)在國(guó)際電工和電子工程學(xué)會(huì)（IEEE）每年都要舉辦一次國(guó)際性的電腦鼠走迷宮競(jìng)賽，各國(guó)選手報(bào)名踴躍，主要是大學(xué)生。我國(guó)于2007年引入該項(xiàng)賽事。\n\n在通信工程專業(yè)田小平老師的指導(dǎo)下，參賽隊(duì)員經(jīng)過(guò)3個(gè)多月的認(rèn)真準(zhǔn)備，包括學(xué)習(xí)“電腦鼠”的硬件組成和軟件調(diào)試，各代表隊(duì)隊(duì)員互幫互助，成功的實(shí)現(xiàn)了五只“電腦鼠”走迷宮的目的。\n經(jīng)過(guò)一個(gè)下午的激烈角逐，5只代表隊(duì)均獲得佳績(jī)，其中一等獎(jiǎng)1項(xiàng)、二等獎(jiǎng)3項(xiàng)、三等獎(jiǎng)1項(xiàng)。\n\n一等獎(jiǎng)：韋海同（通122）、李文敬（通121）、劉春衫（通122）\n\n此項(xiàng)比賽是我校第一次參加，我院學(xué)生的科研與創(chuàng)新精神受到了主辦方的稱贊，為我院增添了榮譽(yù)。\n\n信息工程學(xué)院 通信工程系田小平供稿\n2014年12月23日",? ? ? ? music: {? ? ? ? ? ? dataUrl:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46',? ? ? ? ? ? title:"此時(shí)此刻-許巍",? ? ? ? ? ? coverImgUrl:"http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000",? ? ? ? },? ? ? ? postId:0} ]
varpostsData =require('../../../data/posts-data.js')varapp = getApp();
Page({
data: {
isPlayingMusic:false,
},
setMusicMonitor:function(){varthat =this;
wx.onBackgroundAudioPlay(function(){// callbackthat.setData({
isPlayingMusic:true})
app.globalData.g_isPlayingMusic =true;
app.globalData.g_currentMusicPostId = that.data.currentPostId;
})
wx.onBackgroundAudioPause(function(){// callbackthat.setData({
isPlayingMusic:false})
app.globalData.g_isPlayingMusic =false;
app.globalData.g_currentMusicPostId =null;
});
wx.onBackgroundAudioStop(function(){// callbackthat.setData({
isPlayingMusic:false})
app.globalData.g_isPlayingMusic =false;
app.globalData.g_currentMusicPostId =null;
});
},
onLoad:function(option){// 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載varpostId = option.id;this.data.currentPostId = postId;varpostData = postsData.postList[postId];this.setData({
postData: postData
})varpostsCollected = wx.getStorageSync('posts_Collected');if(postsCollected) {varpostcollected = postsCollected[postId];this.setData({
collected: postcollected
})
}else{varpostsCollected = {};
postsCollected[postId] =false;
wx.setStorageSync('posts_Collected', postsCollected);
}if(app.globalData.g_isPlayingMusic && app.globalData.g_currentMusicPostId === postId) {this.setData({
isPlayingMusic:true,
})
}this.setMusicMonitor();
},
onCollectionTap:function(event){varpostsCollected = wx.getStorageSync('posts_Collected');varpostCollected = postsCollected[this.data.currentPostId];//收藏變成未收藏，未收藏變成收藏postCollected = !postCollected;
postsCollected[this.data.currentPostId] = postCollected;//更新文章是否的緩存值wx.setStorageSync('posts_Collected', postsCollected);//更新數(shù)據(jù)綁定變量，從而實(shí)現(xiàn)切換圖片this.setData({
collected: postCollected
})//還有showModal APIwx.showToast({
title: postCollected ?"收藏成功":"取消成功",
duration:1000,
icon:"success"})
},
onShareTap:function(event){varitemList = ["分享給微信好友","分享到朋友圈","分享到Facebook","分享到Y(jié)ouTube"];
wx.showActionSheet({
itemList: itemList,
itemColor:"#405f80",
success:function(res){// res.cancel? 用戶是不是點(diǎn)擊了取消按鈕// res.tapIndex 數(shù)組元素的序號(hào)，從0開(kāi)始wx.showModal({
title:"您"+ itemList[res.tapIndex],
content:"您是否取消？"+ res.cancel +"可能無(wú)法實(shí)現(xiàn)分享功能，有待研究"})
}
})
},
onMusicTap:function(event){varcurrentPostId =this.data.currentPostId;varpostData = postsData.postList[currentPostId];varisPlayingMusic =this.data.isPlayingMusic;if(isPlayingMusic) {
wx.pauseBackgroundAudio();this.setData({
isPlayingMusic:false});// this.data.isPlayingMusic = false;}else{
wx.playBackgroundAudio({
dataUrl: postData.music.dataUrl,
title: postData.music.title,
coverImgUrl: postData.music.coverImgUrl,
})this.setData({
isPlayingMusic:true});
}
}
})
在文章詳情頁(yè)面，實(shí)現(xiàn)了swiper組件顯示輪滑圖片，實(shí)現(xiàn)了緩存，判斷用戶收藏的邏輯，添加因?yàn)椴シ殴δ懿⑶覍?shí)現(xiàn)播放邏輯的判斷。
1.在H5之前，緩存一般都是用cookie，但是cookie的存儲(chǔ)空間太小。于是，H5增加了新的緩存機(jī)制，即localstorage 和 sessionstorage，在微信小程序中，數(shù)據(jù)緩存其實(shí)就和localstorage 的原理差不多。每個(gè)微信小程序都有自己的本地緩存，可以通過(guò)wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對(duì)本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。
