Micro-Letter Small program Combat – Set of reading and film in one of the Small Program Project (ii)

9. Article List page jump to article details page

Add a PostID to each post

Posts-data.js

var local_database = [{date: "2018/8/16", Title: "Lotus Pond Moonlight", imgsrc: '/images/post/sls. JPG ', content: ' These days, the heart is rather quiet. Tonight in the courtyard sitting in the shade, suddenly think of the Lotus pond, in the light of the full moon, there is always another look. ', reading: "", Collection: ' ", Avatar: '/images/avatar/1.png ', postid:0},{Date:" 2018/7/15 ", Title:" Back ", IM GSRC: '/images/post/bl.png ', content: ' I haven't met my father for more than two years, and the last thing I can forget is his figure. That winter, grandmother died, the father of the Ajvazyan to wear a fee to kill a pro's errand also handed off, it is the day of the rains, reading: "" ", Collection: '", Avatar: '/images/avatar/2.png ', postid:1 },{Date: "2018/6/2", Title: "Jinan Winter", imgsrc: '/images/post/crab.png ', content: ' For a living in peiping, like me, winter if not windy, it is a miracle; Jinan Winter is not There's a rumor. ', reading: ' Collection: ' ', ' Avatar: '/images/avatar/3.png ', postid:2},{Date: ' 2018/5/1 ', title: ' The Rain of Jiangnan ', I MGSRC: '/images/post/vr.png ', content: ' Jiangnan of the spring rain so lingering, but sensational, so drunk, the shadow of the green rain lane, drizzle wind, run to make people tempted so ', reading: "", Collection: ' ", Avat AR: '/images/avatar/3.png ', postid:3},{Date: "2018/4/6", title: "Yi Jiangnan", imgsrc: '/images/post/xiaolong.jpg ', content : ' Last night and Hao talked about a lot of childhood memories, unconsciously present a flower of rape sea, amber hot, one eye can't seeHead, even the air is sweet. ', reading: ' Collection, ' Avatar: '/images/avatar/4.png ', postid:4},]module.exports = {Postlist:local_dat Abase}

Post.wxml

Event Document

• Binding events
• Add a custom attribute to upload the article ID to JS

 <block wx:for="{{postlist}}" wx:for-item="item">    <view catchtap="onPostTap" data-postid="{{item.postId}}">      <template is="postItem" data="{{...item}}" />    </view>  </block>

Post.js

• Get to Article ID
• Skip to the Details page

var postsData = require('../../data/posts-data.js')Page({  data: {    postlist: postsData.postlist  },  onPostTap: function (event) {    var postId = event.currentTarget.dataset.postid;     wx:wx.navigateTo({      url: 'post-detail/post-detail'    })  }})

Create a new Post-detail directory under the posts directory

Post-detail.wxml

<view>这是文章详情页</view>

App.json Global Configuration

{  "pages": [    "pages/welcome/welcome",    "pages/posts/post",    "pages/posts/post-detail/post-detail"    ],  "window": {    "navigationBarBackgroundColor": "#405f80"  }}

Now click on the article, you can jump to the article details page.

10. Article details page layout

Post-detail.wxml

<view class="container">  <image class="head-image" src="/images/post/sls.JPG"></image>  <view class="author-date">    <image class="avatar" src="/images/avatar/2.png"></image>    <text class="author">朱自清</text>    <text class="const-text">发表于</text>    <text class="date">一天前</text>  </view>  <text class="title">背影</text>  <view class="tool">    <view class="circle-img">      <image src="/images/icon/collection.png"></image>      <image class="share-img" src="/images/icon/share.png"></image>    </view>    <view class="horizon"></view>  </view>  <text class='detail'>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路！”</text></view>

Post-detail.wxss

. container{Display:flex; Flex-direction:column;}.  head-image{width:100%; 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;  Vertical-align:middle; Color: #999;}.  title{Margin-left:40rpx;  FONT-SIZE:36RPX;  font-weight:700;  MARGIN-TOP:30RPX;  letter-spacing:2px; Color: #4b556c;}. tools{Margin-top:20rpx;}.  circle-img{Float:right;  MARGIN-RIGHT:40RPX; Vertical-align:middle;}.  Circle-img image{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:0 Auto; Z-index:-99;}.  detail{color: #666; Margin-lEFT:30RPX;  MARGIN-TOP:20RPX;  MARGIN-RIGHT:30RPX;  LINE-HEIGHT:44RPX; letter-spacing:2px;}

App.wxss

text{    font-family:MicroSoft yahei;    font-size: 24rpx;}

Effect Preview

11. Play buttons and navigation bar

Post-detial.wxml Add a Play button picture

 <view class= "container" > <image class= "head-image" src= "/images/post/sls". JPG "></image> <image class=" audio "src="/images/music/music-start.png "></image> <view class = "Author-date" > <image class= "Avatar" src= "/images/avatar/2.png" ></image> <text class= "Author" ; Zhu Qing </text> <text class= "Const-text" > Posted in </text> <text class= "Date" > a day ago </text> </vi ew> <text class= "title" > Background </text> <view class= "tool" > <view class= "circle-img" > <i Mage src= "/images/icon/collection.png" ></image> <image class= "share-img" src= "/images/icon/share.png" & gt;</image> </view> <view class= "Horizon" ></view> </view> <text class= ' detail ' I have not met with my father for more than two years, the last thing I can forget is his figure. That winter, grandmother died, father's errand was also unloaded, it is the day of the rains, I from Beijing to Xuzhou, I intend to follow my father Funeral Home. To Xuzhou see Father, see full courtyard mess of things, and think of grandmother, can't help but shed tears. Father said, "It has been so, do not be sad, fortunately despair!" "</TEXT></VIEW> 

Post-detail.wxss

.audio{  width: 102rpx;  height: 110rpx;  position: absolute;  left: 50%;  margin-left: -51rpx;  top: 180rpx;  opacity: 0.6}

Post-detail.json adding navigation bar text

{  "navigationBarTitleText": "阅读"}

Effect

12. Populate the article details page with data

Post-data.js

var local_database = [{date: "2018/8/16", Title: "Lotus Pond Moonlight", imgsrc: '/images/post/sls. JPG ', content: ' These days, the heart is rather quiet. Tonight in the courtyard sitting in the shade, suddenly think of the Lotus pond, in the light of the full moon, there is always another look. ', reading: "", Collection: ' ", Avatar: '/images/avatar/1.png ', postid:0, headimgsrc:"/images/post/s Ls. JPG ", Author:" Zhu Zi-qing ", DateTime:" 24 hours ago ", detail:" These days the heart is quite not quiet. " Tonight in the courtyard sitting in the shade, suddenly think of the Lotus pond, in the light of the full moon, there is always another look. The moon gradually rose, the children's laughter outside the wall, had not been heard, the wife in the room patted a leap son, humming in a daze song. I slipped in the big shirt and took the door out. Along the Lotus Pond, is a winding small cinder road. This is a alcoves road, the day is also few people walk, the night is more lonely. The Lotus Pond is surrounded, with many trees, lush lush Yu. The side of the road is some willow, and some do not know the name of the tree. There is no Moonlight night, the road is gloomy, some people are scary. Tonight is very good, although the moonlight is still faint. I am the only one on the road, strolling pacing. This piece of heaven and earth seems to be mine, I also like beyond the ordinary oneself, to another world. I love the lively, also love calm, gregarious, love alone. Like tonight, a person in this boundless month, anything can think, anything can not want, then feel is a free person. The things that must be done during the day must be said, and now all will be ignored. This is the beauty of solitude, and I have the benefit of this boundless lotus incense Moonlight good. "}, {date:" 2018/7/15 ", Title:" Back ", Imgsrc: '/images/post/bl.png ', content: ' I have not met with my father for more than two years, I most can not forget is his figure. That winter, grandmother died, the father of the Ajvazyan to wear a fee to kill a pro's errand also handed off, it is the day of the rains, reading: "" ", Collection: '", Avatar: '/images/avatar/2.png ', p Ostid:1, headimgsrc: "/imageS/post/bl.png ", Author:" Zhu Zi-qing ", DateTime:" Three days Ago ", detail:" I have not met with my father for more than two years, I most can not forget is his figure. " That winter, grandmother died, father's errand was also unloaded, it is the day of the rains, I from Beijing to Xuzhou, I intend to follow my father Funeral Home. To Xuzhou see Father, see full courtyard mess of things, and think of grandmother, can't help but shed tears. Father said, "It has been so, do not be sad, fortunately despair!" "Home to sell the quality, the father also the deficit, and borrow money to do the funeral." These days, the home scene is very bleak, half for the funeral, half for the father unemployed. After the funeral, father to Nanjing, I also want to go back to Beijing to study, we will walk. When I arrived in Nanjing, I had friends about to wander around, pbumer a day, and the next morning I had to go to Pukou and get to the north in the afternoon. Father because of things busy, Ben has agreed not to send me, called the hotel a familiar Cha Fang accompany me to go with. He repeated his charge to Cha Fang, very carefully. But he was at last not at ease, afraid of Cha Fang, and quite hesitated for a while. In fact, I was 20 years old, and Beijing has been travelling two or three times. He hesitated for a while and finally decided to send me. I tried two or three to persuade him not to go, he only said, "It doesn't matter, they go bad!" "}, {date:" 2018/6/2 ", Title:" Winter in Jinan ", imgsrc: '/images/post/crab.png ', content: ' For a man who lives in Peiping, like me, if it's not windy in winter , I think it is a miracle, the winter in Jinan is not wind. ', reading: ' Collection, ' Avatar: '/images/avatar/3.png ', Postid:2, headimgsrc: '/IMAGES/POST/CR Ab.png ", Author:" Lao She ", DateTime:" A month ago ", detail:" For a living in peiping, like me, if the winter is not windy, it is a miracle; Jinan's winter is no wind. For a man just returned from London, like me, to be able to see daylight in winter, it is strange that the winter in Jinan is unclouded. Naturally, in tropical places, daylight is always so poisonous, loud weather, anti-a bit scary. However, in North China's winter, but can have the Wen Qing weather, Jinan really has to calculate a treasure-trove. If there is only sunshine, it is not surprising. Close your eyes and think: a Old City, there is water, all under the sun, warm and comfortable to sleep, just waiting for the spring breeze to wake them up, this is not an idealRealm? The Hill the whole Jinan wai a circle, only the north of the lack of a little mouth. This lap of hills in winter is particularly lovely, as if it is to put Jinan in a small cradle, they quietly said softly, "you rest assured that here is warm and." Really, people in Jinan are smiling on the face in winter. When they look at the hills, they feel they have landed and relied. "}, {date:" 2018/5/1 ", Title:" Jiangnan Rain ", imgsrc: '/images/post/vr.png ', content: ' Jiangnan  Spring rain so lingering, but sensational, so drunk, the shadow of the Green Rain Lane, wind, embellish so that people tempted so ', reading: "", Collection: ' ", Avatar: '/images/avatar/3.png ', PostID: 3, Headimgsrc: "/images/post/crab.png", Author: "Lao She", DateTime: "A month ago", detail: "For a man in peiping, like me, if the winter is not windy, it would feel like a miracle There is no wind in the winter in Jinan. For a man just returned from London, like me, to be able to see daylight in winter, it is strange that the winter in Jinan is unclouded. Naturally, in tropical places, daylight is always so poisonous, loud weather, anti-a bit scary. However, in North China's winter, but can have the Wen Qing weather, Jinan really has to calculate a treasure-trove. If there is only sunshine, it is not surprising. Please close your eyes to think: an old City, there is water, all in the sun under the sunshine, warm and comfortable to sleep, just waiting for the spring breeze to wake them up, this is not an ideal state? The Hill the whole Jinan wai a circle, only the north of the lack of a little mouth. This lap of hills in winter is particularly lovely, as if it is to put Jinan in a small cradle, they quietly said softly, "you rest assured that here is warm and." Really, people in Jinan are smiling on the face in winter.  When they look at the hills, they feel that they have landed and relied. "}, {date:" 2018/4/6 ", title:" Yi Jiangnan ", imgsrc: '/images/post/xiaolong.jpg ', content: Last night and Hao talked about a lot of childhood memories, unconsciously present a flower rape sea, amber hot, a look at the head, even the air with sweet.    ', reading: ' Collection, ' Avatar: '/images/avatar/4.png ',Postid:4, Headimgsrc: "/images/post/crab.png", Author: "Lao She", DateTime: "A month ago", detail: "For a man in peiping, like me, winter if not windy , I think it is a miracle, the winter in Jinan is not wind. For a man just returned from London, like me, to be able to see daylight in winter, it is strange that the winter in Jinan is unclouded. Naturally, in tropical places, daylight is always so poisonous, loud weather, anti-a bit scary. However, in North China's winter, but can have the Wen Qing weather, Jinan really has to calculate a treasure-trove. If there is only sunshine, it is not surprising. Please close your eyes to think: an old City, there is water, all in the sun under the sunshine, warm and comfortable to sleep, just waiting for the spring breeze to wake them up, this is not an ideal state? The Hill the whole Jinan wai a circle, only the north of the lack of a little mouth. This lap of hills in winter is particularly lovely, as if it is to put Jinan in a small cradle, they quietly said softly, "you rest assured that here is warm and." Really, people in Jinan are smiling on the face in winter. When they look at the hills, they feel that they have landed and rely on them. "},]module.exports = {Postlist:local_database}

Post.js

var postsData = require('../../data/posts-data.js')Page({  data: {    postlist: postsData.postlist  },  onPostTap: function (event) {    var postId = event.currentTarget.dataset.postid;     wx:wx.navigateTo({      url: "post-detail/post-detail?id=" + postId    })  }})

Post-detail.js

var postsData = require('../../../data/posts-data.js')Page({  /**   * 页面的初始数据   */  data: {      },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var postId = options.id;    var postData = postsData.postlist[postId];    this.setData({      postData:postData    })  },})

Post-detail.wxml

<view class="container">  <image class="head-image" src="{{postData.headImgSrc}}"></image>  <image class="audio" src="/images/music/music-start.png"></image>  <view class="author-date">    <image class="avatar" src="{{postData.avatar}}"></image>    <text class="author">{{postData.author}}</text>    <text class="const-text">发表于</text>    <text class="date">{{postData.datetime}}</text>  </view>  <text class="title">{{postData.title}}</text>  <view class="tool">    <view class="circle-img">      <image src="/images/icon/collection.png"></image>      <image class="share-img" src="/images/icon/share.png"></image>    </view>    <view class="horizon"></view>  </view>  <text class='detail'>{{postData.detail}}</text></view>

13. Using the cache to implement the article collection

Caching documents

Post-detail.wxml

 <view class="circle-img">      <image wx:if="{{collected}}" catchtap='onCollectionTap' src="/images/icon/collection.png"></image>      <image wx:else catchtap='onCollectionTap' src="/images/icon/collection-anti.png"></image>      <image class="share-img" src="/images/icon/share.png"></image>  </view>

Post-detail.js

var postsdata = require ('.. /.. /..    /data/posts-data.js ') Page ({data: {}, Onload:function (options) {var PostID = options.id;    var postdata = Postsdata.postlist[postid]; This.setdata ({postdata:postdata, ' Currentpostid ': PostID}) var postscollected = Wx.getstoragesync (' Post S_collected ') if (postscollected) {var postcollected = Postscollected[postid] This.setdata ({collecte      d:postcollected})} else {var postscollected = {};      Postscollected[postid] = false;    Wx.setstoragesync (' posts_collected ', postscollected);  }}, Oncollectiontap:function (EV) {var postscollected = Wx.getstoragesync (' posts_collected ') var postcollected =    Postscollected[this.data.currentpostid] postcollected =!postcollected;    Postscollected[this.data.currentpostid] = postcollected; Update article whether the cache value of the collection Wx.setstoragesync (' posts_collected ', postscollected)//Update data binding variable, implement switch picture This.setdata ({Colle  cted:postcollected})}}) 

You can see the status of the cache