第五章 閱讀首頁
小程序的模板templete組件以及wxml里運用if循環(huán)和理解相對路徑絕對路徑的區(qū)別還有swiper組件的運用各種點擊事件的處理和交互" 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);">在寫這部分代碼的時候蹦哼，我用的是死數(shù)據(jù)，但后來發(fā)現(xiàn)數(shù)據(jù)填充的時候太凌亂，就模仿真實向服務(wù)器請求數(shù)據(jù)的模式睛挚，將所有數(shù)據(jù)提取到外面，用數(shù)據(jù)綁定的方式在邏輯層獲取數(shù)據(jù)溃蔫；其中用到了小程序的模板templete組件健提，以及wxml里運用if循環(huán)和理解相對路徑、絕對路徑的區(qū)別伟叛，還有swiper組件的運用私痹，各種點擊事件的處理和交互。
微信小程序中的swiper組件真的是簡單方便提供了頁面中圖片文字等滑動的效果" 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組件真的是簡單方便统刮，提供了頁面中圖片文字等滑動的效果紊遵。
這里的就是一個滑塊視圖容器；而就是你希望滑動的東西侥蒙，可以是文字也可以是image暗膜，其中swiper有很多屬性。常用的有
屬性名 默認(rèn)值 作用
2.indicator-dots false 是否顯示面板指示點
3.indicator-color rgba(0, 0, 0, .3) 指示點的顏色
4.indicator-active-color #000000 當(dāng)前選中的指示點顏色
5.autoplay false 是否自動播放
6.intervaly 5000 自動切換時間間隔
這里vertical=”true”在官方文檔中沒有提到鞭衩，定義這個可以上下滑動学搜；還有一點需要注意vertical=”false”時，仍然是上下滑動论衍，原因就是微信小程序在解析時將”false”看成字符串瑞佩，只要字符串不為空，就為真饲齐。所以我們需要這樣寫：vertical=”{{false}}”
2.在組件上使用wx:for控制屬性綁定一個數(shù)組钉凌，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。(1)可以使用wx:for-item指定數(shù)組當(dāng)前元素的變量名捂人。(2)可以使用wx:for-index指定數(shù)組當(dāng)前下標(biāo)的變量名.(3)wx:for用在標(biāo)簽上御雕，以渲染一個包含多節(jié)點的結(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語法，來動態(tài)決定具體需要渲染哪個模板捐寥。
如上都是在同一個wxml文件中定義和引用模板笤昨，而模板的定義和引用是可以分開的。即在一個文件中定義模板握恳，而在其他一個或多個文件wxml文件中都可以使用定義好的模板。從外部文件中引用模板捺僻，使用標(biāo)簽乡洼。同樣使用is屬性來指向要引用的標(biāo)簽。
(5)要在index.wxml中使用template中定義的模板匕坯，則需要先在index中利用import來導(dǎo)入該模板束昵。
(6)要注意import作用域，其僅僅引用目標(biāo)文件中template葛峻。如：C import B锹雏，B import A，在C中可以使用B定義的template术奖，在B中可以使用A定義的template礁遵，但是C不能使用A定義的template。
數(shù)據(jù)層單獨寫所有數(shù)據(jù)的文件
var local_database = [? ? {date:"Apr 11 2017",? ? ? ? title:"陸壹佛爺斬獲北京市“電腦鼠走迷宮”競賽冠軍",? ? ? ? post_img:"/images/post/match.jpg",? ? ? ? content:"2014年12月21日采记，“2014北京市電腦屬走迷宮競賽”在北京交通大學(xué)拉開帷幕佣耐。此次大賽吸引了北京交通大學(xué)、北京科技大學(xué)唧龄、中國農(nóng)業(yè)大學(xué)等高校53只隊伍兼砖，其中我校信息工程學(xué)院派出5只隊伍參加了本次比賽。",? ? ? ? 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小時前",? ? ? ? detail:"2014年12月21日既棺，“2014北京市電腦屬走迷宮競賽”在北京交通大學(xué)拉開帷幕讽挟。此次大賽吸引了北京交通大學(xué)、北京科技大學(xué)丸冕、中國農(nóng)業(yè)大學(xué)耽梅、北京城市學(xué)院等高校53只隊伍，其中我校信息工程學(xué)院派出5只隊伍參加了本次比賽晨仑。\n\n電腦鼠的英文名稱為Micromouse褐墅，實際上是一個由微處理器控制的拆檬，集感知、判斷妥凳、行走功能于一體竟贯，能夠自動尋找最佳路徑到達(dá)目的地的小型機器人。它可以在“迷宮”中自動感知并記憶迷宮地圖逝钥，通過一定的算法屑那，尋找一條最佳路徑，以最快的速度到達(dá)目的地艘款。1997年持际，在美國舉辦了第一屆電腦鼠競賽，隨后哗咆，電腦鼠競賽傳入歐洲蜘欲，首屆歐洲電腦鼠競賽于1980年在倫敦舉辦，之后英國的電腦鼠比賽便由電子工程協(xié)會（IEE）主辦晌柬。1980年11月日本電腦鼠協(xié)會（JMA）在東京舉辦了第一屆競賽姥份，此后，日本每年都要舉辦一屆電腦鼠競賽年碘。我國臺灣也于1986年10月舉辦了首屆電腦鼠比賽〕呵福現(xiàn)在國際電工和電子工程學(xué)會（IEEE）每年都要舉辦一次國際性的電腦鼠走迷宮競賽，各國選手報名踴躍屿衅，主要是大學(xué)生埃难。我國于2007年引入該項賽事。\n\n在通信工程專業(yè)田小平老師的指導(dǎo)下涤久，參賽隊員經(jīng)過3個多月的認(rèn)真準(zhǔn)備凌简，包括學(xué)習(xí)“電腦鼠”的硬件組成和軟件調(diào)試剿配，各代表隊隊員互幫互助矾睦，成功的實現(xiàn)了五只“電腦鼠”走迷宮的目的箱歧。\n經(jīng)過一個下午的激烈角逐，5只代表隊均獲得佳績栓拜，其中一等獎1項座泳、二等獎3項、三等獎1項幕与。\n\n一等獎：韋海同（通122）挑势、李文敬（通121）、劉春衫（通122）\n\n此項比賽是我校第一次參加啦鸣，我院學(xué)生的科研與創(chuàng)新精神受到了主辦方的稱贊潮饱，為我院增添了榮譽。\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:"此時此刻-許巍",? ? ? ? ? ? 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)聽頁面加載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ù)綁定變量，從而實現(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? 用戶是不是點擊了取消按鈕// res.tapIndex 數(shù)組元素的序號盛险，從0開始wx.showModal({
title:"您"+ itemList[res.tapIndex],
content:"您是否取消瞄摊？"+ res.cancel +"可能無法實現(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});
}
}
})
在文章詳情頁面苦掘，實現(xiàn)了swiper組件顯示輪滑圖片换帜，實現(xiàn)了緩存，判斷用戶收藏的邏輯鹤啡，添加因為播放功能并且實現(xiàn)播放邏輯的判斷惯驼。
1.在H5之前，緩存一般都是用cookie递瑰，但是cookie的存儲空間太小跳座。于是，H5增加了新的緩存機制泣矛，即localstorage 和 sessionstorage，在微信小程序中禾蚕，數(shù)據(jù)緩存其實就和localstorage 的原理差不多您朽。每個微信小程序都有自己的本地緩存，可以通過wx.setStorage（wx.setStorageSync）换淆、wx.getStorage（wx.getStorageSync）哗总、wx.clearStorage（wx.clearStorageSync）可以對本地緩存進(jìn)行設(shè)置、獲取和清理倍试。本地緩存最大為10MB讯屈。
