微信小程式新聞網站詳情頁-有解無憂

擴展運算子的巧妙應用

這個template模板，系結的資料帶item前綴

那么使用模板的時候，也必須保證是item

data幫系結資料用雙花括號包住item

還有wx:for-item默認也是item，因此可省略

這樣帶有item不利于代碼復用，解決方法：

將template模板中的item前綴都去掉

然后使用模板時，在資料系結前加...（ES6語法）

這樣的好處是：

可以改變wx:for-item的屬性值和data屬性值（這兩個必須保持一致），但不需要再去修改模板中的資料前綴

依然能夠正常顯示

組件的自定義屬性及獲取屬性

創建新聞詳情頁

給新聞系結點擊事件，注意template和block是不能系結事件的，所以我在template外面包裹了一個view，然后在view上系結事件

在函式里定義好跳轉到新聞詳情頁

查看資料可以看到，每篇新聞都有對應的postId

給每篇新聞自定義屬性，傳遞postId

小程式中，自定義屬性必須以data-開頭，否則是無效的

可以看到已經傳遞成功

在js中使用小程式的事件物件獲取到元素的屬性

posts.js

在currentTarget--dataset中，存放了自定義屬性

補充一個知識點

如果你設定的自定義屬性名是用連字符拼接

可以看到實際結構是全部會轉小寫的，用連字符拼接

而在js中通過事件物件獲取到屬性，則會轉換為駝峰形式

先靜后動，先樣式再資料

為了方便查看實時效果，首先將新聞詳情頁設定為默認頁面

這樣每次重繪都是這個頁面

現在來撰寫新聞詳情頁 post-detail.wxml

<view class="container">
  <image src="/images/post/crab.png" class="head-image"></image>
  <view class="author-date">
    <image src="/images/avatar/3.png" class="avatar"></image>
    <text class="author">cyy</text>
    <text class="const-date">發表于</text>
    <text class="date">3天前</text>
  </view>
  <text class="title">正是蝦肥蟹壯時</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image src="/images/icon/share.png" class="share-img"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">
  徑訓蟹正肥，品嘗秋之味，徐志摩把“看扯訓的荻蘆”和“到樓外樓吃蟹”并列為秋天來杭州不能錯過的風雅之事；用林妹妹的話講是“螯封嫩玉雙雙滿，殼凸紅脂塊塊香”；在《世說新語》里，晉畢卓更是感嘆“右手持酒杯，左手持蟹螯，拍浮酒船中，便足了一生矣，”漫漫人生長路，美食與愛豈可辜負？于是作為一個吃貨，突然也很想回味一下屬于我的味蕾記憶，記憶中的秋蟹，是家人的味道，彌漫著濃濃的親情，\n\n是誰來自山川湖海，卻囿于晝夜，廚房與愛？ 是母親，深思熟慮，聰明耐心，吃蟹前，總會拿出幾件工具，煞有介事而樂此不疲，告訴我們螃蟹至寒，需要佐以姜茶以祛寒，在配備的米醋小碟里，亦添入姜絲與紫蘇，前者驅寒后者增香，泡好徑訓茶，歲月靜好，我們靜等，
  </text>
</view>

post-detail.wxss

/* pages/posts/post-detail/post-detail.wxss */
.container{
  display: flex;
  flex-direction:column;
}
.head-image{
  width:100%;
  height:460rpx;
}
.author-date{
  display: flex;
  margin:20rpx 20rpx 0 30rpx;
  align-items:center;
}
.avatar{
  width:64rpx;
  height:64rpx;
}
.author{
  font-size:30rpx;
  font-weight:300;
  margin-left:20rpx;
  color:#666;
}
.const-date{
  font-size:24rpx;
  color:#999;
  margin-left:20rpx;
}
.date{
  font-size:24rpx;
  margin-left:30rpx;
}
.title{
  margin-left:40rpx;
  font-size:36rpx;
  font-weight:700;
  margin-top:30rpx;
  letter-spacing: 2rpx;
  color:#4b556c;
}
.tool{
  margin-top:20rpx;
}
.circle-img{
  display: flex;
  justify-content: flex-end;
  margin-right:40rpx;
}
.circle-img image{
  width:90rpx;
  height:90rpx;
}
.horizon{
  width:660rpx;
  height:1rpx;
  background-color: #e5e5e5;
  position: relative;
  bottom:45rpx;
  z-index:-99;
  margin:0 auto;/* 讓線水平居中 */
}
.share-img{
  margin-left:30rpx;
}
.detail{
  color:#666;
  margin:20rpx 30rpx;
  line-height: 44rpx;
  letter-spacing: 2rpx;
}

公共樣式可以寫在app.wxss里

text{
    font-family: MicroSoft Yahei;
    font-size: 24rpx;
    color: #666;
}

input{
    font-family: MicroSoft YaHei;
}

設定頂部文字

使用資料填充新聞詳情頁面

在posts.js中已經獲取到了postId，傳遞少量資料可以在url后面直接加引數

多個引數之間使用&符號分割

在post-detail.js的onload函式中，可以用options接收到傳遞過來的引數

使用require引入資料檔案

在onload函式中使用id獲取到需要的資料，發送到data中

注意，所有setData的資料，可以在控制臺的AppData中查看資料結構

將post-detail.wxml中的靜態資料改為動態資料

效果圖

Storage快取的基本用法

收藏功能，需要用服務器來記錄（現在可以用快取來暫時代替）

在控制臺-storage可以查看快取

系結事件（作用演示，非實際功能）

常見快取操作（小程式快取大小不能超過10M）

更多用法還是翻檔案

帶sync的是同步，不帶sync的是異步，一般來說，異步不容易阻塞，同步更簡單些

使用快取實作文字收藏的功能

post-details.js

onload函式中實作的效果是：

讀取快取，如果存在快取則發送到data中；如果不存在則設定為false，并更新快取

  onl oad: function (options) {

    var postId=options.id;
    this.data.postId = postId;//把postId發送到data中，方便其他函式中呼叫（由于不需要進行資料系結，因此沒必要使用setData）
    var pdata = https://www.cnblogs.com/chenyingying0/p/postData.postList[postId];//postId與資料索引剛好相同，獲取單篇文章的資料
    this.setData({...pdata});//發送資料到data中
   
    var postcollected = wx.getStorageSync("postcollected");//讀取快取
    //如果存在快取則發送到data
    if (postcollected){
      var collected = postcollected[postId];//存在單篇文章快取
      if (collected){
        this.setData({collected});
      }
    }else{
      postcollected={};
      postcollected[postId]=false;
      //設定快取
      wx.setStorageSync("postcollected", postcollected);
    }
  },

onCollectionTap函式中實作的效果是：讀取到這篇文章是否收藏的快取，取反（點擊之后狀態與之間相反）更新快取，并將資料發送到data

  //點擊收藏按鈕
  onCollectionTap: function () {
    //讀取快取
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];
    collected = !collected;
    postcollected[this.data.postId] = collected;//更新快取
    wx.setStorageSync("postcollected", postcollected);
    this.setData({ collected });//發送資料到data
  },

這樣的話，data中是肯定有collected屬性的，值是true或者false

在頁面中用wx:if和wx:else來實作

互動反饋wx.showToast

收藏與否的文字提醒

效果圖

互動反饋wx.showModal

使用wx.showModal改寫剛才的wx.showToast（功能一樣，實作效果不一樣）

  //點擊收藏按鈕
  onCollectionTap: function () {
    //讀取快取
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];

    wx.showModal({
      title: collected ? '取消收藏' : "收藏",
      content: '確定執行該操作嗎？',
      success:(res) =>{//箭頭函式可以保留之前的this指向
        if (res.confirm) {//點擊確定

          collected = !collected;
          postcollected[this.data.postId] = collected;//更新快取
          wx.setStorageSync("postcollected", postcollected);
          this.setData({ collected });//發送資料到data

        } else if (res.cancel) {//點擊取消
          console.log('取消操作')
        }
      }
    });
  },

上面是用的ES6的箭頭函式，保留了this指向，也可以使用變數保存之前的this指向

//點擊收藏按鈕
  onCollectionTap: function () {
    //讀取快取
    var postcollected = wx.getStorageSync("postcollected");
    var collected = postcollected[this.data.postId];

    var self=this;//保留this指向

    wx.showModal({
      title: collected ? '取消收藏' : "收藏",
      content: '確定執行該操作嗎？',
      success(res){
        if (res.confirm) {//點擊確定

          collected = !collected;
          postcollected[self.data.postId] = collected;//更新快取
          wx.setStorageSync("postcollected", postcollected);
          self.setData({ collected });//發送資料到data

        } else if (res.cancel) {//點擊取消
          console.log('取消操作')
        }
      }
    });
  },