微信小程序項目,實現圖書列表渲染,以及圖書詳情跳轉


 

 

今天實現了業務中最常見的列表到詳情的功能,做一個總結歸納,方便自己以后溫習

兩個頁面分別要實現如下設計稿的視圖

在開始之前首先復習一下es6 promise的用法,之前一直聽說過promise的用法,但一直沒有實戰過

首先寫一個小DEMO,使用promise打印出微信小程序的當前系統信息

接着開始自己的項目,復制一個HTTP.js叫_HTTP,把原先的先保留着預防出問題,_HTTP.js模塊新建一個函數,把封裝好的老的方法進行完善再套用進去

和之前一樣,在book頁面獲取頁面數據的方法模塊中擴展這個HTTP對象,並添加兩個方法用於從服務器獲取圖書列表,和我喜歡的圖書數量

這樣就可以在Book列表頁中引入這個模塊

 在onload函數中通過這個對象的方法,把 從服務器獲取到的圖書列表,圖書數量存儲到頁面data中

 新建一個BOOK組件,儲存單條BOOK數據

在books頁面中寫wxml,把數據使用wx:for進行循環,把遍歷出來的每一項item賦值給book這個組件暴露給父組件接受數據的變量,再到子組件通過book.properties進行渲染

 

到此再加上樣式列表頁的渲染就做完啦,搜索頁面之后再做

 

 接着需要通過點擊每個圖書跳轉到相應的圖書詳情頁面里去:

首先在單個book組件js新增一個點擊方法,獲取到保存在每個組件上ID號作為參數

接着分析圖書詳情頁所需要的數據,把獲取數據的方法封裝到自己的模塊中

 

在book-detail的js文件中,初始化頁面數據

 

在給圖書詳情頁綁定數據的時候發現圖書短評同樣也需要做成一個組件復用

 

新建tag組件,這個組件比較重要的一個思想是使用了插槽,插槽非常的靈活。使用插槽可以讓組件內部的某一塊元素讓組件的調用方來決定(數據和樣式)

使用插槽的同時需要在組件js中不光定義組件屬性為一個字符串,還需要開啟插槽

給第一第二條短評添加css hack:

 接下來實現內容簡介,實現的方法比較簡單,普通的數據綁定即可,但是渲染出來的數據會出現換行符,並且每一段開頭都有空格

首先分析一下\n產生的原因:因為服務器返回的數據通過編碼變成了\\n,所以\n會失效

使用wxs來解決這個問題,wxs是小程序定義的一套一套腳本語言,類似php,可以wxml中插入函數,WXS 與 JavaScript 是不同的語言,有自己的語法,並不和 JavaScript 一致。

新建一個過濾方法

 在頁面上引用這個模塊:

添加樣式,完成簡介

 

 

接下來再寫一個wxs方法,來過濾短評的數量

util.limit接受兩個參數,第一個數組,第二過濾到第幾條

接下來綁定圖書信息,比較簡單:

接下來實現圖書的短評功能:

短評模塊的布局,like功能使用之前的流行頁面的like組件即可

引入like模塊

綁定事件

點擊短評后會有一個彈出,可以輸入短評

 

 給外面假的輸入框綁定一個點擊事件

 

通過點擊切換posting變量來顯示彈出框的顯示與否

點擊事件:

在頁面里添加一個真正的評論輸入框,通過posting切換是否顯示

在取消按鈕上綁定onCancel用於隱藏彈框

接下來再彈框的評論列表里顯示前三條評論,由於前面封裝了組件所以這里實現起來很容易:

 

 給彈框添加一個黑色遮罩組件:

接下來需要實現點擊上面的三個標簽,或者輸入短評,可以發送短評

首先給tag組件添加一個ontap 事件

在ontap事件內部用triggerEvent的方法把評論數據傳遞出去

在父組件監聽V-tag的自定義事件,點擊的時候執行onpost方法,向服務器發送數據

 

在book的model中添加一個方法,通過傳遞兩個參數book_id和評論內容向服務器提交請求

 

給input添加方法

這時候還需要判斷用戶是否點擊彈框中的標簽來添加短評,還是輸入了短評,這兩個用了同一個方法

獲取點擊tag傳遞的文字(組件內部點擊事件傳遞出去的text值):
const comment=event.detail.text;
獲取input里的值
const commentInput=event.detail.value;
合並以上:
const comment = event.detail.text || event.detail.value

兩個驗證:

發送請求

完整代碼

優化一下細節,當沒有短評的時候給予提示:

 

 到此文章詳情頁基本就完成了

 

 

 最后給圖書詳情一個loading效果:

在頁面onload函數起始位置使用顯示一個加載圖標

接下來只需要在頁面數據加載完成后使用wx.hideLoading()方法即可關閉加載圖標

由於之前頁面發送了三個並行請求從服務器獲取數據,如果需要實現這樣的效果,則需要在第一個請求的回調里發送第二個請求,第二個請求的回調里發送第三個,在第三個請求的回調函數里關閉loading

但是使用了promise就可以簡化這種 操作,直接合並三個請求:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM