微信小程式新聞網站詳情頁

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/24/12557895.html
-Advertisement-
Play Games

擴展運算符的巧妙應用 這個template模板,綁定的數據帶item首碼 那麼使用模板的時候,也必須保證是item data幫綁定數據用雙花括弧包住item 還有wx:for-item預設也是item,因此可省略 這樣帶有item不利於代碼復用,解決方法: 將template模板中的item首碼都去 ...


擴展運算符的巧妙應用

這個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,並更新緩存

  onLoad: function (options) {

    var postId=options.id;
    this.data.postId = postId;//把postId發送到data中,方便其他函數中調用(由於不需要進行數據綁定,因此沒必要使用setData)
    var pdata = 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('取消操作')
        }
      }
    });
  },

 

效果圖

 

加入tabbar選項卡

使用tabbar最起碼需要兩個頁面,因此我們再創建demo頁面方便演示

 

 查看文檔

 

 

在app.json中添加:

 

 效果圖

 

如果這些組件無法滿足需求,小程式有很多自定義組件,可以使用別人寫好的組件

 

此時選擇普通編輯,回到welcome頁面,你會發現點擊按鈕無法跳轉頁面,這是因為受到tabBar的影響

 

 

 

 

小程式規定,如果要跳轉到一個帶有tabBar的頁面,必須使用wx.switchTab

 

 

一些好用的小程式框架

https://github.com/TaleLin

推薦lin ui  http://doc.mini.7yue.pro/

 

 

喜歡用vue編寫小程式的,推薦 mpvue

喜歡用react編寫小程式的,推薦 taro

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • const str="hello world"; const [a,b,...oth]=str; 字元串分割為數組的三種方法: const str="hello world"; const [...str1]=str; const str2=[...str]; const str3=str.spli ...
  • 對象是無序的,必須使用屬性名去匹配 因此解構賦值時變數名必須與對象的屬性名保持一致 const obj={ a:1, b:2 }; let {a,b}=obj; 比較複雜的結構條件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
  • 數組的解構賦值 將數組的值,或者對象的屬性,提取到不同的變數中 const arr=[1,2,3,4]; let [a,b,c,d]=arr; 更複雜的匹配規則: const arr=[1,2,[3,4],[5,6,7]]; let [,b]=arr; let [,,c,d]=arr; let [, ...
  • 以前變數的聲明,可以通過var或者直接使用 直接使用相當於往window全局對象上掛了一個屬性 let和var的主要區別: let聲明的變數只在當前(塊級)作用域內有效 let聲明的變數不能被重覆聲明 不存在變數提升 ES6之前的作用域: 全局作用域 函數作用域 eval作用域 ES6塊級作用域: ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>日曆</title ...
  • OXO1 寫在前面 一.html和css 1.HTML和CSS的對比 (1)HTML只關註語義和結構,主要是對網頁元素的整理和分類。 (2)CSS的主要使用場景就是美化頁面,佈局頁面。 (3) CSS和HTML搭配使用,實現網頁結構,表現分離。 2.CSS概述 (1)概念 CSS是疊層樣式表(Cas ...
  • 產品封面圖,滑鼠點擊上去,右邊會出現放大的高清大圖 如何獲取到大圖呢? 封面圖尺寸預設是430*430 在控制台找到圖片鏈接,網址欄里打開 手動把網址欄里的430x430改成800x800 大圖到手! ...
  • web前端這塊算是比較簡單,也比較有意思的,下麵列舉一下學前端的幾個階段,大家可以根據自己的情況循序漸進的學習 第一階段:HTML+CSS: HTML、CSS基礎、div+css佈局 Java基礎:Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMA、DOM、BOM、定時 器和焦點圖。 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...