微信小程序--每周圖書推薦demo

這是我個人的第一個原生微信小程序，作為一枚萌新，自己沒有前端經歷，所以代碼很混亂，界面很簡單，難度也很低，主要用來記錄自己學小程序過程中遇到的問題。

一、 先上預覽圖

左右滑動切換每周推薦的圖書，點擊封面進入圖書詳情頁面，點擊tabBar上的關於可進入關於頁

 

 

二、詳細說明

• 創建項目

wxml和wxss都是對渲染層的描述，腳本文件則是對頁面邏輯的描述。

weapp-book
   images                   // 存儲圖片
    pages                   //頁面
        about               // 關於頁
            about .js       //js文件
            about .wxml     //頁面結構文件
            about .wxss     //樣式表
        detail              //詳情頁
            detail.js
            detail.jason
            detail.wxml
            detail.wxss
         weekly              //推薦頁
             weekly.js
             weekly.json
             weekly.wxml
             weekly.wxss
    app.js                   //系統的方法處理文件
    app.json                 //系統全局配置文件
    app.wxss                 //全局樣式表

•  app.json

pages

接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成。每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改。

tarbar

設置兩個頁面，一個weekly頁即每周推薦頁和一個abouty，需要幾個tarbar就在list里面增加（最少兩個，最多5個），list屬性是一個對象數組，pagePath對應tabBar對應的頁面路徑，iconPath對應tabBar圖標。

window

用於設置小程序的狀態欄、導航條、標題、窗口背景色。

注意：在app.json中配置的屬性會被子window屬性覆蓋

 

{
  "pages": [
    "pages/weekly/weekly",
    "pages/about/about",
    "pages/detail/detail"
  ],
  "sitemapLocation": "sitemap.json",
  "tabBar":{
    
    "list":[
      {"text":"圖書推薦",
     
      "pagePath":"pages/weekly/weekly",
      "iconPath":"image/icon/i1.png",
      "selectedIconPath":"image/icon/i2.png"
      },
      {
        "text": "關於",
        "pagePath": "pages/about/about",
        "iconPath": "image/icon/i3.png",
        "selectedIconPath": "image/icon/i4.png"
      }
      

    ],
    "color": "#42BD56",
    "selectedColor":"white"

  },
  "window":{
    "navigationBarTitleText": "好書推薦",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#42BD56"
  }
}

• app.wxss

設置全局公共樣式表,界面采用彈性盒子布局，采用rpx響應式長度單位，即1rpx=0.5px=1物理像素

 

 

• about.wxml

這里用<navigator>組件實現頁面跳轉，用url傳遞數據，跳轉的頁面在tabbar上需要將open-type設置為switchTar，點擊“每周推薦”可以跳轉到weekly頁

 

<view class="container">
 <image src="/image/gg.jpg" class="about-banner"></image>
 <text class="info">每周好書推薦</text>
<view>
 
 <navigator url="/pages/weekly/weekly"  open-type="switchTab" style="display:inline" hover-class="cc" class=".cf">每周推薦</navigator>
 <text>每天給你一本好書</text>
</view>
 <text>這是我做的第一個小程序，功能很簡單，只是用來練練手</text>
</view>

•  weekly.wxml

用<view>組件將整個頁面塊狀結構，使用<swiper>組件實現左右滑動切換不同的推薦，<swiper>組件有值得注意兩點：

1） swiper內只可放置<swiper-item/>組件，否則會導致未定義的行為。

2）swiper-item組件僅可放置在swiper內，寬高自動設置為100%。

用wx:for=""方法將數據循環遍歷渲染到視圖層 使用 wx:if="{{condition}}" 進行條件渲染，當condition為true時，攜帶 wx:if 這個可知屬性的標簽才會被渲染顯示；

這里還用了自定義用戶屬性，自定義屬性語法以data-開頭，自定義用戶數據最后被封裝到事件對象之中，而且作為currentTarget中的dataset；

用bindtap="f1"給tab事件綁定一個數據處理函數f1,f1是在這個button所在的頁面所在的頁面對象中定義的，當這個button元素被點擊時候，它上面會觸發一個tab事件，框架就會將這個事件發生時候的信息封裝到事件對象中，然后將事件對象傳遞到這里綁定的事件處理函數f1中處理 

注意： bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡

 

 

•  weekly.js

 

數據區

 一開始做出來的weekly頁里的信息只是在wxml里進行硬編碼，但是每周推薦的電影是不斷變化，這個缺點是小程序並不能動態的從服務器獲取，然后渲染到小程序的視圖當中進行顯示，此時就需要學會數據綁定，在小程序框架中，每個頁面所需要的各種數據，都是集中在這個頁面所注冊的頁面對象中定義。通過調用page()函數來給這個頁面注冊這個頁面所需要的頁面對象 ，頁面對象data屬性里 thismovie作為分量屬性即內部狀態變量 ，這樣在開發者工具調試器appdata可以對內部變量進行查看和修改。

 

系統頁面事件

.onLoad頁面加載時觸發，一個頁面只會調用一次，可以在onload的參數中獲取當前打開頁面路徑的參數

onShareAppMessage 監聽用戶點擊頁面內轉發按鈕或者右上角“轉發”按鈕的行為，並自定義轉發內容

通過點擊weekiy頁能顯示出對應圖書詳情信息，需要對detail頁進行參數化處理，將視圖層的圖書id傳遞到它所調用的邏輯層的事件處理函數,前面我們在wxml自定義了用戶屬性data-book-id來綁定對應的圖書id以記錄圖書的id。這樣currentTarget中的dataset有了bookId屬性，這樣也關聯了原本weekly.js中定義的id,當事件處理函數需要當前組件的關鍵數據的時候，我們可以這些關鍵數據在這個組件上額類似data-這種方式聲明的自定義屬性進行設置，這些自定屬性會在事件發生的時候被抽取出來封裝到事件對象中傳遞給對應的事件處理函數進行使用，所以我們需要調用的話就是 event.currenttarget.dataset.bookId就能取到bookId所對應的id值。

Page({

data:{

thisWeeklybook:[

{ name: "生活研究",

comment: "隱秘、纏繞。一個自我回溯、向他人開放、與生活溝通、充滿反諷張力的世界。",

imagePath: "/image/jf.jpg",

rating: 8.7,

id: 34792458

},

{

name: "統治世界",

comment: "感覺有很多地方和宋鴻兵的貨幣戰爭是一個意思，不過這個加上了種族TS和滅絕政策。感覺還是有那么一點意思的。",

imagePath: "/image/cc.jpg",

rating: 5.3,

id: 5974574

},

{

name: "異類",

comment: "所有的成功人士都是幸運的，外部因素的綜合大於個人努力，但是個人努力也不可或缺。 ",

imagePath: "/image/gc.jpg",

rating: 8.0,

id: 25863621

}

],

count: 0,

},

onLoad: function (option) {

this.setData({

currentIndex: this.data.thisWeeklybook.length - 1

})

},

f0: function(event){

this.setData({

currentIndex: this.data.thisWeeklybook.length - 1

}

)

},

f1: function(event){

var books = event.currentTarget.dataset.bookId

console.log(books)

wx.navigateTo({

url: '/pages/detail/detail?id=' + books,

})

},

onShareAppMessage: function(){

return{

title: "每周推薦"

}

}

})

•  detail.js

需要將weekly頁的id參數傳遞給detail頁，我們可以用onLoad: function (options) {} ,options為頁面跳轉所帶來的參數

通過wx.request來調用豆瓣的獲取電影條目信息API,由於官方的API文檔已經下線，豆瓣 API 服務可能計划對外關閉。我調用了一個第三方的豆瓣 API 的代理服務，不需要api key。注意：網絡請求的referer header不可設置

一開始在success中使用this.setData總是報錯，原來success方法指向閉包，所以this屬於閉包，由此在success回調函數里不能直接使用this.setDat().如果要使用，可以在閉包之外先把this賦值給另一個變量。

 

 

 三、最后

 

•  icon圖來源：https://icons8.com/
• 豆瓣api代理服務：https://douban.uieee.com/
• 源碼地址：https://github.com/mxy62/weapp-book