【移動應(yīng)用開發(fā)技術(shù)】第三個頁面：構(gòu)建新聞詳情頁面

【移動應(yīng)用開發(fā)技術(shù)】第三個頁面：構(gòu)建新聞詳情頁面

筆記內(nèi)容：構(gòu)建新聞詳情頁面筆記日期：2018-01-09從文章列表跳轉(zhuǎn)到新聞詳情頁（組件自定義屬性及獲取屬性）在編寫從文章列表跳轉(zhuǎn)到新聞詳情頁的代碼之前，先來修改一下之前的頁面，之前我們編寫了兩個模板文件，但是還有兩個細(xì)節(jié)沒有完善好，一個是post.wxss中的.post-container樣式?jīng)]有移植到模板文件中，另一個是wxml模板文件中每句數(shù)據(jù)綁定代碼都需要通過item這個子元素去調(diào)用屬性，顯得有點麻煩，我們可以使用一種語法去解決這個問題。1.首先將post.wxss中的.post-container樣式移植到模板文件中2.解決item重復(fù)的問題，在post.wxml中將之前的template代碼修改為以下內(nèi)容：<templateis="postItem"data="{{...item}}"/>然后模板文件中的數(shù)據(jù)綁定代碼就不需要重復(fù)使用item子元素進行屬性的調(diào)用了：<!--模板文件需要使用template標(biāo)簽包圍-->

<templatename="postItem">

<viewclass='post-container'>

<viewclass='post-author-date'>

<imagesrc='{{avatar}}'class='post-author'></image>

<textclass="post-date">{{date}}</text>

</view>

<textclass='post-title'>{{title}}</text>

<imageclass='post-image'src='{{imgSrc}}'></image>

<textclass='post-content'>{{content}}</text>

<viewclass='post-like'>

<imagesrc='../../images/icon/chat.png'class='post-like-img'></image>

<textclass='post-like-font'>{{reading}}</text>

<imagesrc='../../images/icon/view.png'class='post-like-img'></image>

<textclass='post-like-font'>{{collection}}</text>

</view>

</view>

</template>完成以上的修改后，就可以開始編寫新聞詳情頁的代碼了：1.構(gòu)建目錄文件結(jié)構(gòu)：2.由于我們需要實現(xiàn)點擊一個文章列表中的文章就跳轉(zhuǎn)到該文章的詳情頁面，所以我們還得給每一個文章做一個標(biāo)識符，不然誰知道你點的是哪篇文章。這個標(biāo)識符可以寫在數(shù)據(jù)文件中，作為一個屬性存在，所以需要在數(shù)據(jù)文件中為每一個文章數(shù)據(jù)都加上一個屬性，我定義的屬性名稱是postId：//將數(shù)據(jù)整合成數(shù)組類型

varlocal_database=[

{

date:"Jan062018",

title:"正是蝦肥蟹壯時",

imgSrc:"/images/post/crab.png",

avatar:"/images/avatar/1.png",

content:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",

reading:"112",

collection:"96",

postId:0,

},

{

date:"Jan032018",

title:"比利·林恩的中場戰(zhàn)事",

imgSrc:"/images/post/bl.png",

avatar:"/images/avatar/2.png",

content:"伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文JoeAlwyn飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾VinDiesel飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。",

reading:"92",

collection:"65",

postId:1,

},

{

date:"Jan052018",

title:"肖申克的救贖",

imgSrc:"/images/post/xs.jpg",

avatar:"/images/avatar/3.png",

content:"20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯TimRobbins飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。",

reading:"92",

collection:"65",

postId:2,

},

{

date:"Jan012018",

title:"霸王別姬",

imgSrc:"/images/post/bj.jpg",

avatar:"/images/avatar/4.png",

content:"段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。",

reading:"92",

collection:"65",

postId:3,

},

{

date:"Jan082018",

title:"這個殺手不太冷",

imgSrc:"/images/post/ss.jpg",

avatar:"/images/avatar/5.png",

content:"里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。",

reading:"92",

collection:"65",

postId:4,

},

{

date:"Jan042018",

title:"阿甘正傳",

imgSrc:"/images/post/ag.jpg",

avatar:"/images/avatar/1.png",

content:"阿甘（湯姆·漢克斯飾）于二戰(zhàn)結(jié)束后不久出生在美國南方阿拉巴馬州一個閉塞的小鎮(zhèn)，他先天弱智，智商只有75，然而他的媽媽是一個性格堅強的女性，她常常鼓勵阿甘“傻人有傻?！?，要他自強不息。",

reading:"92",

collection:"65",

postId:5,

},

]

//設(shè)置一個數(shù)據(jù)出口

module.exports={

//輸出的是一個Array對象

postList:local_database,

}3.在post.wxml文件中增加一個view標(biāo)簽，把template標(biāo)簽包圍起來，因為template標(biāo)簽只是相當(dāng)于一個占位符，編譯之后這個標(biāo)簽是不存在的。然后給這個view標(biāo)簽注冊一個tap事件，并且自定義一個屬性進行postId的數(shù)據(jù)綁定：<!--自定義屬性必須以data-為前綴，后面連接的單詞可以自定義-->

<viewcatchtap="onPostTap"data-postId="{{item.postId}}">

<templateis="postItem"data="{{...item}}"/>

</view>4.然后到post.js文件中增加一個事件函數(shù)：onPostTap:function(event){

//從事件源中獲取postId數(shù)據(jù)

varpostId=event.currentTarget.dataset.postid;

console.log("onpostidis"+postId);

},event是事件源對象，是默認(rèn)會傳入的參數(shù)，currentTarget是當(dāng)前被觸發(fā)事件的目標(biāo)對象，dataset是數(shù)據(jù)集對象，數(shù)據(jù)要從數(shù)據(jù)集對象中獲取。至于為什么是通過postid獲取數(shù)據(jù)而不是通過data-postId或者postId獲取，請參考下圖：如圖，可以看到，自定義屬性被編譯之后的名稱并不是原本的名稱，所以我們通過dataset數(shù)據(jù)集對象獲取自定義屬性的數(shù)據(jù)時需要以編譯后的名稱為準(zhǔn)。5.接著就可以開始實現(xiàn)頁面跳轉(zhuǎn)了，先在post-detail.wxml中編寫一段話：<text>

這是文章詳情頁面

</text>然后再app.json中加上一段post-detail的信息配置，每當(dāng)我們新增頁面都需要如此進行配置：

"pages/posts/post-detail/post-detail"

"pages/posts/post-detail/post-detail"回到post.js中，編寫頁面跳轉(zhuǎn)代碼：onPostTap:function(event){

//從事件源中獲取postId數(shù)據(jù)

varpostId=event.currentTarget.dataset.postid;

wx.navigateTo({

url:'post-detail/post-detail',

})

},完成以上操作編譯之后現(xiàn)在點擊文章列表中的文章就可以跳轉(zhuǎn)到文章詳情頁面了：先靜后動，先構(gòu)建新聞詳情頁面樣式編寫post-detail.wxml代碼：<viewclass='container'>

<imagesrc='/images/post/sls.jpg'class='head-iamge'></image>

<imageclass='audio'src='/images/music/music-start.png'></image>

<viewclass='author-date'>

<imagesrc='/images/avatar/2.png'class='avatar'></image>

<textclass='author'>zero</text>

<textclass='const-text'>發(fā)表于</text>

<textclass='date'>3天前</text>

</view>

<textclass='title'>審美的進化機制</text>

<viewclass='tool'>

<viewclass='circle-img'>

<imagesrc='/images/icon/collection.png'></image>

<imageclass='share-img'src='/images/icon/share.png'></image>

</view>

<viewclass='horizon'></view>

</view>

<textclass='detail'>2017年讀的書中，有一本書是《紐約時報》年度十佳（2017TenBestBooks），即：《美的進化——達爾文被遺忘的擇偶理論如何塑造動物世界乃至我們》(TheEvolutionofBeauty:HowDarwin’sForgottenTheoryofMateChoiceShapestheAnimalWorld—andUs)。時報網(wǎng)站刊登了英文版評介的譯文：如果一本科學(xué)書籍能做到有顛覆性，倡導(dǎo)女權(quán)主義，還能改變我們看待自己身體的方式，但同時主要還是關(guān)于鳥類的，那就是這本書了。普魯姆是一位鳥類學(xué)家，他為達爾文的另一個基本上被忽略了的雌雄淘汰理論進行了辯護。</text>

</view>post-detail.wxss代碼：.container{

display:flex;

flex-direction:column;

}

.head-iamge{

width:750rpx;

height:460rpx;

}

.author-date{

flex-direction:row;

margin-left:30rpx;

margin-top:20rpx;

}

.avatar{

height:64rpx;

width:64rpx;

vertical-align:middle;

}

.author{

font-size:30rpx;

font-weight:300;

margin-left:20rpx;

vertical-align:middle;

color:#666;

}

.const-text{

font-size:24rpx;

color:#999;

margin-left:20rpx;

}

.date{

font-size:24rpx;

margin-left:30rpx;

color:#999;

vertical-align:middle;

}

.title{

margin-left:40rpx;

font-size:36rpx;

font-weight:700;

margin-top:30rpx;

letter-spacing:2px;

color:#4b556c;

}

.tool{

margin-top:20rpx;

}

.circle-img{

float:right;

margin-right:40rpx;

vertical-align:middle;

}

.circle-imgimage{

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:0auto;

z-index:-99;

}

.detail{

color:#666;

margin-left:30rpx;

margin-top:20rpx;

margin-right:30rpx;

line-height:44rpx;

letter-spacing:2px;

}

.audio{

width:102rpx;

height:110rpx;

position:absolute;

left:50%;

margin-left:-51rpx;

top:180rpx;

opacity:0.6;//設(shè)置透明度為0.6

}app.wxss代碼：text{

font-family:MicroSoftYahei;

font-size:24rpx;

}完成效果：配置全局導(dǎo)航欄顏色上面把基本的靜態(tài)頁面做完了，但是導(dǎo)航欄顏色還不太對，而且少了個標(biāo)識文字，所以現(xiàn)在就來把這個位置的樣式完善好。app.json文件內(nèi)容：{

"pages":[

"pages/welcome/welcome",

"pages/posts/post",

"pages/posts/post-detail/post-detail"

],

"window":{

"navigationBarBackgroundColor":"#405f80"

}

}welcome.json文件內(nèi)容：{

"navigationBarBackgroundColor":"#b3d4db"

}post.json文件內(nèi)容：{

"navigationBarTitleText":"文與字"

}post-detail.json文件內(nèi)容：{

"navigationBarTitleText":"閱讀"

}完成效果：使用數(shù)據(jù)填充新聞詳情頁面首先是postId的獲得，因為不同的postId需要輸出不同的文章詳情數(shù)據(jù)：1.在post.js的navigateTo方法的url參數(shù)中，加上一個id參數(shù)：onPostTap:function(event){

//從事件源中獲取postId數(shù)據(jù)

varpostId=event.currentTarget.dataset.postid;

//console.log("onpostidis"+postId);

wx.navigateTo({

url:'post-detail/post-detail?id='+postId,//通過url傳遞postId

})

},2.然后在post-detail.js中，寫一個onLoad函數(shù)把id獲得到手：Page({

onLoad:function(option){

varpostId=option.id;//這里的id對應(yīng)的是url參數(shù)上的id

console.log(postId);

}

})3.編譯之后，點擊不同的文章，看看控制臺中是否有輸出相應(yīng)的postId，有輸出的話就證明獲得成功。完成以上操作后，就可以把新聞詳情頁面的數(shù)據(jù)放進數(shù)據(jù)文件中，然后進行數(shù)據(jù)綁定：post-data.js文件內(nèi)容：//將數(shù)據(jù)整合成數(shù)組類型

varlocal_database=[

{

date:"Jan062018",

title:"正是蝦肥蟹壯時",

imgSrc:"/images/post/crab.png",

avatar:"/images/avatar/1.png",

content:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",

reading:"112",

collection:"96",

headImgSrc:"/images/post/crab.png",

author:"zero",

dataTime:"24小時前",

detail:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。棉桃鼓脹欲裂，水稻灌漿初熟，世間萬物經(jīng)過春的孕育，夏的生長，即將抵達收獲的季節(jié)。在這瓜果飄香、稻黍起舞的召喚聲中，又是一度蟹肥蝦壯時。地處黃海之濱的小城，在秋風(fēng)的撫慰、秋陽的光照下，瞬間也喧囂起來。任意走進城中的每一個菜市場，在顯眼的位置上，沖入耳際的是此起彼伏的吆喝聲，映入眼簾的是那些小商小販們搶占有利地勢將一只只塑料箱一字排開的情景。淺箱中，健壯的對蝦、竹節(jié)蝦在水中跳躍，舒展著彎曲的身體；深箱中，一貫橫行霸道的螃蟹擁擠在狹小的空間里，相互肆意踐踏，有些不甘蝸居的螃蟹，順著筆直的箱壁艱難地攀爬著，雖經(jīng)百般努力，終以失敗而告終。那些聚集在網(wǎng)兜里的螃蟹，更是不甘寂寞，身體被束縛著無法動彈，便利用可以自由呼吸的嘴巴，于窸窸窣窣中不停地吐著一串串泡沫，以示抗議，也以此證明自己是個活物。特別是那些個頭較大的螃蟹，仿佛知道自己的身價不菲，為此，更是氣宇軒昂，自以為是。也許，它們是得到垂青和恩寵的一類吧，受到了特別的眷顧，活動的空間相對較大，所以也更加肆無忌憚。只要有人試圖靠近，便會舉著那兩只肥碩的大螯向你示威，仿佛在警告你：別碰我，否則休怪我無禮！",

postId:0,

},

{

date:"Jan032018",

title:"比利·林恩的中場戰(zhàn)事",

imgSrc:"/images/post/bl.png",

avatar:"/images/avatar/2.png",

content:"伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文JoeAlwyn飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾VinDiesel飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/bl.png",

dataTime:"一天前",

author:"妮可",

detail:"伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文JoeAlwyn飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾VinDiesel飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。視頻公布于世讓他成為全美民眾所崇拜的英雄，然而卻鮮有人理解他和戰(zhàn)友們所經(jīng)歷的一切。為了安葬班長，B班得到了短暫的休假，因此他們得以受邀參加一場在德州舉行的橄欖球比賽。林恩的姐姐因某事件深感愧疚，她希望弟弟能借此機緣回歸普通生活。而周圍的經(jīng)紀(jì)人、球迷、大老板、普通民眾則對戰(zhàn)爭、衛(wèi)國、士兵有著各種各樣想當(dāng)然的理解。球場上的慶典盛大開幕，林恩和戰(zhàn)友們的心卻愈加沉重與焦躁……",

postId:1,

},

{

date:"Jan052018",

title:"肖申克的救贖",

imgSrc:"/images/post/xs.jpg",

avatar:"/images/avatar/3.png",

content:"20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯TimRobbins飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/xs.jpg",

dataTime:"兩天前",

author:"John",

detail:"20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯TimRobbins飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。未過多久，安迪嘗試接近囚犯中頗有聲望的瑞德（摩根·弗里曼MorganFreeman飾），請求對方幫自己搞來小錘子。以此為契機，二人逐漸熟稔，安迪也仿佛在魚龍混雜、罪惡橫生、黑白混淆的牢獄中找到屬于自己的求生之道。他利用自身的專業(yè)知識，幫助監(jiān)獄管理層逃稅、洗黑錢，同時憑借與瑞德的交往在×××中間也漸漸受到禮遇。表面看來，他已如瑞德那樣對那堵高墻從憎恨轉(zhuǎn)變?yōu)樘幹┤唬菍ψ杂傻目释源偈顾闹械南Ｍ湍繕?biāo)前進。而關(guān)于其罪行的真相，似乎更使這一切朝前推進了一步……",

postId:2,

},

{

date:"Jan012018",

title:"霸王別姬",

imgSrc:"/images/post/bj.jpg",

avatar:"/images/avatar/4.png",

content:"段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/bj.jpg",

dataTime:"三天前",

author:"Jack",

detail:"段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。段小樓在認(rèn)為該成家立業(yè)之時迎娶了名妓菊仙（鞏俐），致使程蝶衣認(rèn)定菊仙是可恥的第三者，使段小樓做了叛徒，自此，三人圍繞一出《霸王別姬》生出的愛恨情仇戰(zhàn)開始隨著時代風(fēng)云的變遷不斷升級，終釀成悲劇。",

postId:3,

},

{

date:"Jan082018",

title:"這個殺手不太冷",

imgSrc:"/images/post/ss.jpg",

avatar:"/images/avatar/5.png",

content:"里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/ss.jpg",

dataTime:"四天前",

author:"Bill",

detail:"里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。馬蒂爾達得到里昂的留救，幸免于難，并留在里昂那里。里昂教小女孩使槍，她教里昂法文，兩人關(guān)系日趨親密，相處融洽。女孩想著去×××，反倒被抓，里昂及時趕到，將女孩救回?；祀s著哀怨情仇的正邪之戰(zhàn)漸次升級，更大的沖突在所難免……",

postId:4,

},

{

date:"Jan042018",

title:"阿甘正傳",

imgSrc:"/images/post/ag.jpg",

avatar:"/images/avatar/1.png",

content:"阿甘（湯姆·漢克斯飾）于二戰(zhàn)結(jié)束后不久出生在美國南方阿拉巴馬州一個閉塞的小鎮(zhèn)，他先天弱智，智商只有75，然而他的媽媽是一個性格堅強的女性，她常常鼓勵阿甘“傻人有傻福”，要他自強不息。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/ag.jpg",

dataTime:"五天前",

author:"Tony",

detail:"阿甘（湯姆·漢克斯飾）于二戰(zhàn)結(jié)束后不久出生在美國南方阿拉巴馬州一個閉塞的小鎮(zhèn)，他先天弱智，智商只有75，然而他的媽媽是一個性格堅強的女性，她常常鼓勵阿甘“傻人有傻?！保詮姴幌?。阿甘像普通孩子一樣上學(xué)，并且認(rèn)識了一生的朋友和至愛珍妮（羅賓·萊特·潘飾），在珍妮和媽媽的愛護下，阿甘憑著上帝賜予的“飛毛腿”開始了一生不停的奔跑。阿甘成為橄欖球巨星、越戰(zhàn)英雄、乒乓球外交使者、億萬富翁，但是，他始終忘不了珍妮，幾次匆匆的相聚和離別，更是加深了阿甘的思念。有一天，阿甘收到珍妮的信，他們終于又要見面了……",

postId:5,

},

]

//設(shè)置一個數(shù)據(jù)出口

module.exports={

//輸出的是一個Array對象

postList:local_database,

}post-detail.js文件內(nèi)容：varpostsData=require('../../../data/posts-data.js')

Page({

onLoad:function(option){

varpostId=option.id;//這里的id對應(yīng)的是url參數(shù)上的id

varpostData=postsData.postList[postId];

this.setData({

postData

});

}

})post-detail.wxml文件內(nèi)容：<viewclass='container'>

<imagesrc='{{postData.headImgSrc}}'class='head-iamge'></image>

<imageclass='audio'src='/images/music/music-start.png'></image>

<viewclass='author-date'>

<imagesrc='{{postData.avatar}}'class='avatar'></image>

<textclass='author'>{{postData.author}}</text>

<textclass='const-text'>發(fā)表于</text>

<textclass='date'>{{postData.dataTime}}</text>

</view>

<textclass='title'>{{postData.title}}</text>

<viewclass='tool'>

<viewclass='circle-img'>

<imagesrc='/images/icon/collection.png'></image>

<imageclass='share-img'src='/images/icon/share.png'></image>

</view>

<viewclass='horizon'></view>

</view>

<textclass='detail'>{{postData.detail}}</text>

</view>運行效果：緩存Storage的基本用法在文章詳情頁中我們需要實現(xiàn)一個文章收藏的功能，由于我們沒有使用到服務(wù)器，所以使用本地緩存來記錄這個文章是否被用戶收藏的一個狀態(tài)。小程序中提供了一個setStorageSync方法來實現(xiàn)緩存，從方法名也可以看出這個方法是帶有同步的。除此之外還有一個異步的緩存方法setStorage，這個方法可以用于異步緩存數(shù)據(jù)。注：和緩存相關(guān)的方法，例如得到緩存數(shù)據(jù)、刪除緩存數(shù)據(jù)等方法，都有同步和異步兩個，方法名末尾有Sync的表示同步，否則是異步。首先演示一下setStorageSync方法的使用方式：//第一個參數(shù)是鍵，第二個參數(shù)則是需要存儲的數(shù)據(jù)

wx.setStorageSync('key',"Test");我在post-detail.js文件中的onLoad方法里加入了以上這段代碼，此時我點擊進入文章詳情頁面，就會緩存這個數(shù)據(jù)，緩存數(shù)據(jù)在Storage界面查看：在小程序中，如果用戶不去主動清除緩存數(shù)據(jù)，那么數(shù)據(jù)就會一直存在，所以現(xiàn)在即便我關(guān)閉開發(fā)工具或者重新進行編譯，這個數(shù)據(jù)都會存在，除非我主動刪掉它。通過鍵可以改變緩存數(shù)據(jù)：wx.setStorageSync('key',{

game:"eatchicken",

developer:"LD",

});運行結(jié)果：獲取緩存的數(shù)據(jù)：<!--在收藏圖標(biāo)上加上一個事件-->

<imagecatchtap='onCollectionTap'src='/images/icon/collection.png'></image>使用getStorageSync方法即可得到緩存數(shù)據(jù)：onCollectionTap:function(event){

vargame=wx.getStorageSync('key');

console.log(game);

}運行結(jié)果：刪除緩存數(shù)據(jù)：<!--在分享圖標(biāo)上加上一個事件-->

<imagecatchtap='onShareTap'class='share-img'src='/images/icon/share.png'></image>使用removeStorageSync方法即可刪除緩存數(shù)據(jù)：onShareTap:function(event){

wx.removeStorageSync('key');

},運行結(jié)果，可以看到數(shù)據(jù)已經(jīng)不存在了：刪除所有緩存數(shù)據(jù)的方法：

wx.clearStorageSync();

wx.clearStorageSync();注：小程序規(guī)定緩存數(shù)據(jù)的大小上限是10MB使用緩存實現(xiàn)文章收藏功能實現(xiàn)這個功能我們需要使用到兩個圖標(biāo)進行狀態(tài)的輪換，由于小程序中沒有document，我們需要使用if判斷來實現(xiàn)這個功能。post-detail.wxml代碼如下：<!--判斷collected的值是否為真，是的話就顯示src中指定的圖片-->

<imagewx:if="{{collected}}"catchtap='onCollectionTap'src='/images/icon/collection.png'></image>

<!--否則顯示這張圖片-->

<imagewx:elsecatchtap='onCollectionTap'src='/images/icon/collection-anti.png'></image>post-detail.js代碼如下：varpostsData=require('../../../data/posts-data.js')

Page({

data:{

},

onLoad:function(option){

varpostId=option.id;//這里的id對應(yīng)的是url參數(shù)上的id

//把postId設(shè)置到數(shù)據(jù)集里，這樣就能夠全局獲取

this.data.currentPostId=postId;

varpostData=postsData.postList[postId];

this.setData({

postData

});

//從緩存中獲取數(shù)據(jù)，鍵值對形式的

varpostsCollected=wx.getStorageSync('posts_collected');

//判斷數(shù)據(jù)是否不為空

if(postsCollected){

//不為空就拿出與postId對應(yīng)的下標(biāo)值

varpostsCollected=postsCollected[postId];

//并將值更新到數(shù)據(jù)綁定里

this.setData({

collected:postsCollected

});

}else{

//如果為空就賦值一個空對象

varpostsCollected={}

//并把與postId對應(yīng)的下標(biāo)中的值設(shè)置為false

postsCollected[postId]=false;

//更新到緩存里

wx.setStorageSync('posts_collected',postsCollected);

}

},

//點擊事件方法

onCollectionTap:function(event){

//獲取緩存數(shù)據(jù)

varpostsCollected=wx.getStorageSync('posts_collected');

//從數(shù)據(jù)集中獲取postId

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

});

},

})運行效果：未收藏狀態(tài)：收藏狀態(tài)：交互反饋wx.showToast以上我們實現(xiàn)了收藏和未收藏圖標(biāo)的一個輪換功能，但是還缺少了個提示功能，在用戶點擊收藏時要提示用戶收藏成功，再次點擊則需要提示用戶取消成功。小程序提供了幾個實現(xiàn)交互反饋功能的API，詳情參考以下官方文檔：

/debug/wxadoc/dev/api/api-react.html

/debug/wxadoc/dev/api/api-react.html我們需要使用到其中三個API，分別是wx.showToast、wx.showModal、wx.showActionSheet。首先來應(yīng)用wx.showToast這個API，在事件方法中，加入如下代碼：wx.showToast({

//使用三元表達式來判斷狀態(tài)

title:postCollected?'收藏成功！':'取消成功！',

//設(shè)置圖標(biāo)停留的時間，單位是毫秒

duration:1000,

//icon可以設(shè)置圖標(biāo)，默認(rèn)就是success

icon:"success",

});運行效果：操作反饋wx.showModalwx.showModal可以顯示模態(tài)彈窗，我們可以把wx.showModal與wx.showToast相結(jié)合使用。修改代碼如下：varpostsData=require('../../../data/posts-data.js')

Page({

data:{

},

onLoad:function(option){

varpostId=option.id;//這里的id對應(yīng)的是url參數(shù)上的id

//把postId設(shè)置到數(shù)據(jù)集里，這樣就能夠全局獲取

this.data.currentPostId=postId;

varpostData=postsData.postList[postId];

this.setData({

postData

});

//從緩存中獲取數(shù)據(jù)

varpostsCollected=wx.getStorageSync('posts_collected');

//判斷數(shù)據(jù)是否不為空

if(postsCollected){

//不為空就拿出與postId對應(yīng)的下標(biāo)值

varpostsCollected=postsCollected[postId];

//并將值更新到數(shù)據(jù)綁定里

this.setData({

collected:postsCollected

});

}else{

//如果為空就賦值一個空對象

varpostsCollected={}

//并把與postId對應(yīng)的下標(biāo)中的值設(shè)置為false

postsCollected[postId]=false;

//更新到緩存里

wx.setStorageSync('posts_collected',postsCollected);

}

},

//點擊事件方法

onCollectionTap:function(event){

//獲取緩存數(shù)據(jù)

varpostsCollected=wx.getStorageSync('posts_collected');

//獲取postId

varpostCollected=postsCollected[this.data.currentPostId];

//收藏變成未收藏，未收藏變成收藏

postCollected=!postCollected;

postsCollected[this.data.currentPostId]=postCollected;

//自定義函數(shù)也需要使用this來訪問

this.showModal(postsCollected,postCollected);

},

showModal:function(postsCollected,postCollected){

//把this指代的Page對象先存儲起來

varthat=this;

wx.showModal({

title:'收藏',

content:postCollected?'是否收藏該文章？':'是否取消收藏該文章？',

showCancel:'true',

cancelText:'取消',

cancelColor:'#333',

confirmText:'確認(rèn)',

confirmColor:'#405f80',

success:function(res){

if(res.confirm){

//更新文章是否收藏的緩存值

wx.setStorageSync('posts_collected',postsCollected);

//更新數(shù)據(jù)綁定變量，從而實現(xiàn)切換圖片

that.setData({

collected:postCollected

});

that.showToast(postsCollected,postCollected);

}

},

});

},

showToast:function(postsCollected,postCollected){

wx.showToast({

//使用三元表達式來判斷狀態(tài)

title:postCollected?'收藏成功！':'取消成功！',

//設(shè)置圖標(biāo)停留的時間，單位是毫秒

duration:1000,

//icon可以設(shè)置圖標(biāo)，默認(rèn)就是success

icon:"success",

});

},

})運行效果：收藏：取消收藏：注：在實際開發(fā)中這種成本低的操作是不需要把交互反饋做得這么麻煩的，一般只使用showToast即可。所謂成本指的是誤操作帶來的損失，如果成本低的操作交互反饋太麻煩的話，會感覺體驗不好。交互反饋wx.showActionSheet?showActionSheet可以顯示操作菜單，以下使用實際示例演示一下showActionSheet的使用：1.在分享圖標(biāo)上加上一個點擊事件：<imagecatchtap='onShareTap'class='share-img'src='/images/icon/share.png'></image>2.事件代碼如下：onShareTap:function(event){

varitemList=[

"分享給微信好友",

"分享到朋友圈",

"分享到QQ",

"分享到微博",

]

wx.showActionSheet({

itemList:itemList,//按鈕的文字?jǐn)?shù)組，數(shù)組長度最大為6個

itemColor:"#405f80",//設(shè)置字體顏色

success:function(res){

//res.tapIndex用戶點擊的按鈕，從上到下的順序，從0開始

wx.showModal({

title:itemList[res.tapIndex],

content:'現(xiàn)在無法實現(xiàn)分享功能，什么時候能支持還未知',

})

},

})

},運行效果：注：到目前為止，微信小程序官方還尚未提供能夠?qū)⑿〕绦蛑苯臃窒淼脚笥讶Φ南嚓P(guān)api，不過有一些曲線救國的方案，可以參考以下兩篇文章，或者使用百度、谷歌等搜索引擎搜索解決方案：

/a/1190000012316892/baozhuona/article/details/78570483

/a/1190000012316892/baozhuona/article/details/78570483同步異步方法對比我們把之前的onCollectionTap方法中的同步獲取緩存的方法改為異步獲取緩存的方法，以此來演示同步與異步方法之間的區(qū)別，修改代碼如下：onCollectionTap:function(event){

//把當(dāng)前this指代的當(dāng)前對象先存儲起來

varthat=this;

//異步獲取緩存數(shù)據(jù)

varpostsCollected=wx.getStorage({

key:'posts_collected',

success:function(res){

varpostsCollected=res.data;

//獲取postId

varpostCollected=postsCollected[that.data.currentPostId];

//收藏變成未收藏，未收藏變成收藏

postCollected=!postCollected;

postsCollected[that.data.currentPostId]=postCollected;

that.showModal(postsCollected,postCollected);

},

});

},以上就是異步方法的實現(xiàn)方式，與同步方法的主要區(qū)別在于，同步會等待wx.getStorageSync('posts_collected');方法執(zhí)行完之后才會往下執(zhí)行，所以如果當(dāng)獲取緩存得很慢的時候，操作界面就會卡在那。而異步則不會，異步獲取緩存數(shù)據(jù)的時候，代碼還會繼續(xù)往下執(zhí)行，異步獲取完成之后再執(zhí)行success里的方法。注：通常情況下，在小程序中必須要使用異步方法的情況比較少，建議如果對異步方法不熟悉的話，最好不要使用異步方法，不然不僅會讓你的代碼變得難以閱讀，而且很容易埋下一些隱藏bug，或者難以解決的錯誤。至于使用異步還是同步，需要根據(jù)業(yè)務(wù)來決定，當(dāng)可以使用同步的情況下，優(yōu)先使用同步。音樂播放基本實現(xiàn)以上我們已經(jīng)完成了文章詳情頁的大部分內(nèi)容，現(xiàn)在還剩一個音樂播放功能還未實現(xiàn)，官方也提供了一個audio組件可以實現(xiàn)音樂播放。除了組件之外還有相關(guān)的API可以使用，在這里我們使用API來實現(xiàn)音樂播放功能，因為使用API的方式比較方便于自定義。官方文檔：

API：/debug/wxadoc/dev/api/media-voice.html組件：/debug/wxadoc/dev/component/audio.html

API：/debug/wxadoc/dev/api/media-voice.html組件：/debug/wxadoc/dev/component/audio.html我們需要使用到兩個API，playBackgroundAudio以及pauseBackgroundAudio。前者是用于音樂的播放，后者是用于音樂的暫停。先給音樂圖標(biāo)添加一個事件，并且使用三元運算符來判斷圖標(biāo)是顯示暫停圖標(biāo)還是啟動圖標(biāo)：<imagecatchtap='onMusicTap'class='audio'src='{{isPlayingMusic?"/images/music/music-stop.png":"/images/music/music-start.png"}}'></image>事件方法實現(xiàn)代碼如下：data:{

isPlayingMusic:false

},

onMusicTap:function(event){

//獲取數(shù)據(jù)文件中的數(shù)據(jù)

varcurrentPostId=this.data.currentPostId;

varpostData=postsData.postList[currentPostId];

//使用變量來記錄音樂的狀態(tài)

varisPlayingMusic=this.data.isPlayingMusic;

if(isPlayingMusic){

//暫停音樂

wx.pauseBackgroundAudio();

//改變狀態(tài)

this.setData({

isPlayingMusic:false

});

}else{

wx.playBackgroundAudio({

//流媒體文件的URL，目前支持的格式有m4a,aac,mp3,wav

dataUrl:postData.music.url,

//音樂標(biāo)題

title:postData.music.title,

//音樂封面URL

coverImgUrl:postData.music.coverImg,

})

//改變狀態(tài)

this.setData({

isPlayingMusic:true

});

}

},注：dataUrl只能夠是引用流媒體文件，不能夠使用本地的音樂文件，coverImgUrl也是如此，因為小程序的大小限制是1M，一個音樂文件都不止1M了，所以只能使用流媒體文件的URL形式引入音樂。coverImgUrl引入的圖片只有在真機上才能看到得到。數(shù)據(jù)文件內(nèi)容如下，增加了音樂連接、音樂標(biāo)題、音樂圖片屬性：//將數(shù)據(jù)整合成數(shù)組類型

varlocal_database=[

{

date:"Jan062018",

title:"正是蝦肥蟹壯時",

imgSrc:"/images/post/crab.png",

avatar:"/images/avatar/1.png",

content:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",

reading:"112",

collection:"96",

headImgSrc:"/images/post/crab.png",

author:"zero",

dataTime:"24小時前",

detail:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。棉桃鼓脹欲裂，水稻灌漿初熟，世間萬物經(jīng)過春的孕育，夏的生長，即將抵達收獲的季節(jié)。在這瓜果飄香、稻黍起舞的召喚聲中，又是一度蟹肥蝦壯時。地處黃海之濱的小城，在秋風(fēng)的撫慰、秋陽的光照下，瞬間也喧囂起來。任意走進城中的每一個菜市場，在顯眼的位置上，沖入耳際的是此起彼伏的吆喝聲，映入眼簾的是那些小商小販們搶占有利地勢將一只只塑料箱一字排開的情景。淺箱中，健壯的對蝦、竹節(jié)蝦在水中跳躍，舒展著彎曲的身體；深箱中，一貫橫行霸道的螃蟹擁擠在狹小的空間里，相互肆意踐踏，有些不甘蝸居的螃蟹，順著筆直的箱壁艱難地攀爬著，雖經(jīng)百般努力，終以失敗而告終。那些聚集在網(wǎng)兜里的螃蟹，更是不甘寂寞，身體被束縛著無法動彈，便利用可以自由呼吸的嘴巴，于窸窸窣窣中不停地吐著一串串泡沫，以示抗議，也以此證明自己是個活物。特別是那些個頭較大的螃蟹，仿佛知道自己的身價不菲，為此，更是氣宇軒昂，自以為是。也許，它們是得到垂青和恩寵的一類吧，受到了特別的眷顧，活動的空間相對較大，所以也更加肆無忌憚。只要有人試圖靠近，便會舉著那兩只肥碩的大螯向你示威，仿佛在警告你：別碰我，否則休怪我無禮！",

postId:0,

music:{

url:"/C100003507bR0gDKBm.m4a?fromtag=38",

title:"夜夜夜夜-齊秦",

coverImg:"/music/photo_new/T002R150x150M000001TEc6V0kjpVC.jpg?max_age=2592000"

}

},

{

date:"Jan032018",

title:"比利·林恩的中場戰(zhàn)事",

imgSrc:"/images/post/bl.png",

avatar:"/images/avatar/2.png",

content:"伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文JoeAlwyn飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾VinDiesel飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/bl.png",

dataTime:"一天前",

author:"妮可",

detail:"伊拉克戰(zhàn)爭時期，來自美國德州的19歲技術(shù)兵比利·林恩（喬·阿爾文JoeAlwyn飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長（范·迪塞爾VinDiesel飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。視頻公布于世讓他成為全美民眾所崇拜的英雄，然而卻鮮有人理解他和戰(zhàn)友們所經(jīng)歷的一切。為了安葬班長，B班得到了短暫的休假，因此他們得以受邀參加一場在德州舉行的橄欖球比賽。林恩的姐姐因某事件深感愧疚，她希望弟弟能借此機緣回歸普通生活。而周圍的經(jīng)紀(jì)人、球迷、大老板、普通民眾則對戰(zhàn)爭、衛(wèi)國、士兵有著各種各樣想當(dāng)然的理解。球場上的慶典盛大開幕，林恩和戰(zhàn)友們的心卻愈加沉重與焦躁……",

postId:1,

music:{

url:"/C100003GdCmG4NkEOR.m4a?fromtag=38",

title:"鬼迷心竅-李宗盛",

coverImg:"/music/photo_new/T002R150x150M000002xOmp62kqSic.jpg?max_age=2592000"

}

},

{

date:"Jan052018",

title:"肖申克的救贖",

imgSrc:"/images/post/xs.jpg",

avatar:"/images/avatar/3.png",

content:"20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯TimRobbins飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/xs.jpg",

dataTime:"兩天前",

author:"John",

detail:"20世紀(jì)40年代末，小有成就的青年銀行家安迪（蒂姆·羅賓斯TimRobbins飾）因涉嫌殺害妻子及她的情人而鋃鐺入獄。在這座名為肖申克的監(jiān)獄內(nèi)，希望似乎虛無縹緲，終身監(jiān)禁的懲罰無疑注定了安迪接下來灰暗絕望的人生。未過多久，安迪嘗試接近囚犯中頗有聲望的瑞德（摩根·弗里曼MorganFreeman飾），請求對方幫自己搞來小錘子。以此為契機，二人逐漸熟稔，安迪也仿佛在魚龍混雜、罪惡橫生、黑白混淆的牢獄中找到屬于自己的求生之道。他利用自身的專業(yè)知識，幫助監(jiān)獄管理層逃稅、洗黑錢，同時憑借與瑞德的交往在×××中間也漸漸受到禮遇。表面看來，他已如瑞德那樣對那堵高墻從憎恨轉(zhuǎn)變?yōu)樘幹┤?，但是對自由的渴望仍促使他朝著心中的希望和目?biāo)前進。而關(guān)于其罪行的真相，似乎更使這一切朝前推進了一步……",

postId:2,

music:{

url:"/C100004HLusI2lLjZy.m4a?fromtag=38",

title:"女兒情-萬曉利",

coverImg:"/music/photo_new/T002R150x150M000004Wv5BO30pPc0.jpg?max_age=2592000"

}

},

{

date:"Jan012018",

title:"霸王別姬",

imgSrc:"/images/post/bj.jpg",

avatar:"/images/avatar/4.png",

content:"段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/bj.jpg",

dataTime:"三天前",

author:"Jack",

detail:"段小樓（張豐毅）與程蝶衣（張國榮）是一對打小一起長大的師兄弟，兩人一個演生，一個飾旦，一向配合天衣無縫，尤其一出《霸王別姬》，更是譽滿京城，為此，兩人約定合演一輩子《霸王別姬》。但兩人對戲劇與人生關(guān)系的理解有本質(zhì)不同，段小樓深知戲非人生，程蝶衣則是人戲不分。段小樓在認(rèn)為該成家立業(yè)之時迎娶了名妓菊仙（鞏俐），致使程蝶衣認(rèn)定菊仙是可恥的第三者，使段小樓做了叛徒，自此，三人圍繞一出《霸王別姬》生出的愛恨情仇戰(zhàn)開始隨著時代風(fēng)云的變遷不斷升級，終釀成悲劇。",

postId:3,

music:{

url:"/C100002mWVx72p8Ugp.m4a?fromtag=38",

title:"戀戀風(fēng)塵-老狼",

coverImg:"/music/photo_new/T002R150x150M000001VaXQX1Z1Imq.jpg?max_age=2592000",

}

},

{

date:"Jan082018",

title:"這個殺手不太冷",

imgSrc:"/images/post/ss.jpg",

avatar:"/images/avatar/5.png",

content:"里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。",

reading:"92",

collection:"65",

headImgSrc:"/images/post/ss.jpg",

dataTime:"四天前",

author:"Bill",

detail:"里昂（讓·雷諾飾）是名孤獨的×××，受人雇傭。一天，鄰居家小姑娘馬蒂爾達（納塔麗·波特曼飾)敲開他的房門，要求在他那里暫避殺身之禍。原來鄰居家的主人是警方緝毒組的眼線，只因貪污了一小包×××而遭惡警（加里·奧德曼飾）殺害全家的懲罰。馬蒂爾達得到里昂的留救，幸免于難，并留在里昂那里。里昂教小女孩使槍，她教里昂法文，兩人關(guān)系日趨親密，相處融洽。女孩想著去×××，反倒被抓，里昂及時趕到，將女孩救回?；祀s著哀怨情仇的正邪之戰(zhàn)漸次升級，更大的沖突在所難免……",

postId:4,

music:{

url:"/C100000Zn0vS4fKKo8.m4a?fromtag=38",

title:"沉默是金-張國榮",

coverImg:"/music/photo_new/T00