編寫第二個頁面：新聞閱讀列表頁面

筆記內容：編寫第二個頁面：新聞閱讀列表頁面
筆記日期：2018-01-06

使用Swiper組件構建輪播圖

關于Swiper組件的官方描述文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html

示例：
post.wxml文件：

<view>
  <!-- 需要在父節點里定義寬高，indicator-dots屬性指定顯示輪播圖的小點，縱向滾動則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='2000' >
    <!-- 每一項里都放了一個圖片 -->
    <swiper-item>
      <image src='/images/wx.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/iqiyi.png'></image>
    </swiper-item>
  </swiper>
</view>

post.wxss文件：

swiper{
  width:100%;
  height:500rpx
}

swiper image{
  width:100%;
  height:500rpx
}

運行結果：

構建新聞列表

json配置文件的官方參考文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

注：除了app.json之外的json文件都只能配置window屬性，由于只能配置window屬性所以就不需要顯式標明了，直接設置window中的屬性+值即可。

構建一個簡單的新聞列表示例：
post.wxml文件：

<view>

  <!-- 需要在父節點里定義寬高，indicator-dots屬性指定顯示輪播圖的小點，縱向滾動則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='5000'>
    <!-- 每一項里都放了一個圖片 -->
    <swiper-item>
      <!-- 使用絕對對路徑 -->
      <image src='/images/wx.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/iqiyi.png'></image>
    </swiper-item>
  </swiper>

  <view class='post-container'>
    <view class='post-author-date'>
      <image src='/images/avatar/1.png' class='post-author'></image>
      <text class="post-date">Jan 06 2018</text>
    </view>
    <text class='post-title'>正是蝦肥蟹壯時</text>
    <image class='post-image' src='/images/post/crab.png'></image>
    <text class='post-content'>
    “山明水凈夜來霜，數樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂。”金秋時節，天高云淡，秋風送爽，氣候宜人。秋風秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。
    </text>
    <view class='post-like'>
      <!-- 使用相對路徑 -->
      <image src='../../images/icon/chat.png' class='post-like-img' ></image>
      <text class='post-like-font'>92</text>
      <image src='../../images/icon/view.png' class='post-like-img' ></image>
      <text class='post-like-font' >65</text>
    </view>
  </view>

  <view class='post-container'>
    <view class='post-author-date'>
      <image src='/images/avatar/2.png' class='post-author'></image>
      <text class="post-date">Jan 03 2018</text>
    </view>
    <text class='post-title'>比利·林恩的中場戰事</text>
    <image class='post-image' src='/images/post/bl.png'></image>
    <text class='post-content'>
    伊拉克戰爭時期，來自美國德州的19歲技術兵比利·林恩（喬·阿爾文 Joe Alwyn 飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規模不大卻激烈非常的遭遇戰，戰斗中林恩所在的B班班長（范·迪塞爾 Vin Diesel 飾）遭到當地武裝分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。
    </text>
    <view class='post-like'>
      <!-- 使用相對路徑 -->
      <image src='../../images/icon/chat.png' class='post-like-img' ></image>
      <text class='post-like-font'>92</text>
      <image src='../../images/icon/view.png' class='post-like-img' ></image>
      <text class='post-like-font' >65</text>
    </view>
  </view>

</view>

post.wxss文件：

swiper{
  width:100%;
  height:600rpx
}

swiper image{
  width:100%;
  height:600rpx
}
.post-container{
  display: flex;
  flex-direction: column;
  margin-top:20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}
.post-author-date{
  margin: 10rpx 0px 20rpx 10rpx ;
}
.post-author{
  width: 30px;
  height: 60rpx;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{
  margin-left: 16px;
  width: 100%;
  height: 340rpx;
  margin: auto 0;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-img{
  height: 16px;
  width: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

post.json文件：

{
    "navigationBarBackgroundColor": "#405f80",
    "navigationBarTitleText": "文與字"
}

運行結果：

js文件結構與Page頁面的生命周期

小程序中的js文件結構與我們平時在web前端開發中的js文件有些差別，在小程序中需要把變量、函數等代碼寫到Page( )里。有點像json注冊信息一樣，在格式上也有點像，以下是小程序工具自動生成的js文件代碼：

Page({

  /**
   * 頁面的初始數據
   */
  data: {

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    console.log("onready")
  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {
    console.log("onshow")
  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {
    console.log("onUnload")
  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

從以上生成的代碼可以看到，所有的函數都寫在Page里，而且如果js文件中沒有這個Page就會報錯，所以即便不寫代碼也要寫個空Page在那。

官方給出的關于page頁面生命周期的文檔：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html

數據綁定

在實際開發中，我們的數據都是需要臨時從服務器上download下來的，例如在web開發中我們都是通過JavaScript腳本代碼去請求服務器，得到服務器返回的數據然后將其在頁面上顯示出來，在小程序中也是如此。

在小程序中獲取腳本文件的數據是通過數據綁定的機制來獲取的，不需要像web中那樣通過getElementById函數來獲得元素對象，然后再設置到元素上，例如：

  data: {
    date:"Jan 06 2018"
    title:"正是蝦肥蟹壯時"
  },

然后在wxml中通過兩個大括號就可以獲得值了：

<text class="post-date">{{date}}</text>
<text class='post-title'>{{title}}</text>

注：在小程序中，這種數據綁定是單向的。

現在我們就可以把數據都轉移到js文件中，然后通過數據綁定機制來在xwml中獲得數據：
post.js代碼：

  // 寫在這個函數內是為了在頁面加載時就加載數據
  onLoad: function (options) {
    var post_content1={
      date:"Jan 06 2018",
      title:"正是蝦肥蟹壯時",
      post_img:"/images/post/crab.png",
      content:"“山明水凈夜來霜，數樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂。”金秋時節，天高云淡，秋風送爽，氣候宜人。秋風秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",
      view_num:"112",
      collect_num:"96",
      author_img:"/images/avatar/1.png"
    }
    // 調用這個方法就相當于把數據都寫在data里了
    this.setData(post_content1);
  },

post.wxml代碼：

  <view class='post-container'>
    <view class='post-author-date'>
      <image src='{{author_img}}' class='post-author'></image>
      <text class="post-date">{{date}}</text>
    </view>
    <text class='post-title'>{{title}}</text>
    <image class='post-image' src='{{post_img}}'></image>
    <text class='post-content'>{{content}}</text>
    <view class='post-like'>
      <!-- 使用相對路徑 -->
      <image src='../../images/icon/chat.png' class='post-like-img' ></image>
      <text class='post-like-font'>{{view_num}}</text>
      <image src='../../images/icon/view.png' class='post-like-img' ></image>
      <text class='post-like-font' >{{collect_num}}</text>
    </view>
  </view>

從以上兩個對應的代碼片段可以看到，數據綁定機制的方便之處。

注意：我們都知道在一些標簽的屬性上需要提供布爾類型的值，例如，之前提到過swiper的vertical屬性，但是有時候會遇到明明給的值是false，卻依舊還是垂直滾動，這是因為給的并不是布爾值，而是一個false字符串，在小程序中只要字符串不為空都會被認為是true，解決這種問題就需要使用數據綁定的語法來設定值：

<!-- 這種方式給的是字符串 -->
<swiper vertical="false">

<!-- 這種方式給的才是布爾值 -->
<swiper vertical="{{false}}">

關于嵌套數據的拿值方式：
在設置數據屬性的時候可以把一組同類的數據都設置在一個數據里形成一個數組形式，例如我把設置照片路徑數據的屬性都統一寫在img屬性里：

 img:{
        post_img: "/images/post/crab.png",
        author_img: "/images/avatar/1.png"
 },

拿值的時候通過訪問符 . 來訪問就可以了， 例如：父屬性.子屬性 就可以了：

<image src='{{img.author_img}}' class='post-author'></image>
<image class='post-image' src='{{img.post_img}}'></image>

控制一個標簽顯示/隱藏的語法：
小程序里有一個語法可以控制標簽的顯示或隱藏：

<!-- false: 隱藏，true: 顯示 -->
<image wx:if="{{false}}" src='{{img.author_img}}' class='post-author'></image>

使用數據綁定機制：

<!-- js代碼 -->
img_condition:true,

<!-- wxml代碼 -->
<image wx:if="{{img_condition}}" src='{{img.author_img}}' class='post-author'></image>

運算：
在兩個大括號中可以進行一些簡單的運算，例如：數值型的數據可以進行算術運算，字符串則可以進行字符串連接運算等。

簡單的加法運算示例：

<!-- js代碼 -->
a:1,
b:2,
c:3

<!-- wxml代碼 -->
<text class="post-date">{{a+b+c}}</text>

以下是官方的參考文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

使用wx-for來改寫新聞列表

以上我們雖然通過數據綁定解決了動態加載服務器數據的問題，但是還有一個問題就是組件代碼重復太多，因為上線使用后不可能只有兩篇文章，會有很多篇文章。如果每一篇文章都得重復的去拷貝相同的代碼就有點麻煩了，所以我們還需要解決這個代碼重復的問題——使用for循環：

1.首先將js文件中的數據整合成一個數組：

onLoad: function (options) {
    // 將數據整合成數組類型
    var posts_content = [
      {
        date: "Jan 06 2018",
        title: "正是蝦肥蟹壯時",
        post_img: "/images/post/crab.png",
        author_img: "/images/avatar/1.png",
        content: "“山明水凈夜來霜，數樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂。”金秋時節，天高云淡，秋風送爽，氣候宜人。秋風秋陽中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤。",
        view_num: "112",
        collect_num: "96",
      },
      {
        date: "Jan 03 2018",
        title: "比利·林恩的中場戰事",
        post_img: "/images/post/bl.png",
        author_img: "/images/avatar/2.png",
        content: "伊拉克戰爭時期，來自美國德州的19歲技術兵比利·林恩（喬·阿爾文 Joe Alwyn 飾）因為一段偶然拍攝的視頻而家喻戶曉。那是一次規模不大卻激烈非常的遭遇戰，戰斗中林恩所在的B班班長（范·迪塞爾 Vin Diesel 飾）遭到當地武裝分子的伏擊和劫持，而林恩為了營救班長不惜鋌而走險沖鋒陷陣。",
        view_num: "92",
        collect_num: "65",
      }
    ]

    // 因為是數組，所以需要使用這種方式將數據填充到data里
    this.setData({
      posts_key: posts_content
    });
  },

2.使用for循環來進行數據綁定：

<view>
  <!-- 需要在父節點里定義寬高，indicator-dots屬性指定顯示輪播圖的小點，縱向滾動則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='5000'>
    <!-- 每一項里都放了一個圖片 -->
    <swiper-item>
      <!-- 使用絕對對路徑 -->
      <image src='/images/wx.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/vr.png'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/iqiyi.png'></image>
    </swiper-item>
  </swiper>

  <!-- wx:for需要接收一個數組、集合類型的值，wx:for-item用于設置一個變量來代表子元素 -->
  <!-- wx:for-index用于設置一個變量來代表下標值 -->
  <block wx:for="{{posts_key}}" wx:for-item="item" wx:for-index="index" >
    <view class='post-container'>
      <view class='post-author-date'>
        <image src='{{item.author_img}}' class='post-author'></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class='post-title'>{{item.title}}</text>
      <image class='post-image' src='{{item.post_img}}'></image>
      <text class='post-content'>{{item.content}}</text>
      <view class='post-like'>
        <!-- 使用相對路徑 -->
        <image src='../../images/icon/chat.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.view_num}}</text>
        <image src='../../images/icon/view.png' class='post-like-img'></image>
        <text class='post-like-font'>{{item.collect_num}}</text>
      </view>
    </view>
  </block>
</view>

注：wx:for-item和wx:for-index不設置也可以，因為默認值就是item和index，直接用就可以了。

可以看到以上示例使用循環后就減少了很多重復性的代碼。

小程序的事件機制（冒泡與非冒泡）

到目前為止，我們就編寫好了兩個頁面——啟動頁面和新聞列表頁面，現在我們需要通過小程序的事件機制，讓我們點擊啟動頁面的時候，就能夠進入到新聞列表頁面。

以下是官方給出的事件使用文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

我們需要用到的事件是 tap ，這個事件相當于html中的click事件。小程序中有個規定，需要在事件名稱前加上bind或者catch。例如我要使用tap事件，那么就需要在前面加上bind或者catch，結合起來就是bindtap或catchtap。

示例：

welcome.wxml文件代碼：

<!-- wxml是編寫小程序骨架的文件 -->
<!-- view和html中的div是一樣的 -->
<view class="container">
  <!-- 無需導入wxss文件 -->
  <image class="user-avatar" src="/images/image.png"></image>
  <text class="user-name">Hello Wolrd！</text>
  <!-- 注冊tap事件，值對應的是函數名稱 -->
  <view class="moto-container" bindtap='onTap' >
    <text class="moto">開啟小程序之旅</text>
  </view>
</view>

welcome.js文件代碼：

// 所有代碼都需要寫在Page里
Page({
  onTap:function(){
    // 通過wx.redirectTo方法來實現頁面跳轉
    wx.redirectTo({
      // 不需要指明后綴名，小程序會自動識別
      url: "../posts/post",
    })
  }
})

編寫完以上代碼后，就可以點擊啟動頁中的view組件跳轉到新聞列表頁面了。

redirectTo方法是重定向方式的跳轉，這種方式的跳轉是完全跳轉到另一個頁面中，由于重定向跳轉會卸載掉當前頁面，這個過程會觸發Page生命周期中的Unload事件。示例：

Page({
  onTap:function(){
    wx.redirectTo({
      url: "../posts/post",
    })
  },
  onUnload:function(){
    console.log("unloading this page");
  }
})

運行結果：

從運行結果可以看到，沒有返回上一級頁面的按鈕

控制臺打印結果：

unloading this page

另一種跳轉方式是使用navigateTo方法進行跳轉，這個方法只會導航到另一個頁面，當前頁面只是隱藏掉，所以跳轉之后還可以返回上一級頁面，同樣的這個過程也會觸發相應的事件，這個事件就是onHide事件。示例：

Page({
  onTap:function(){
    // 與redirectTo方法的使用方式基本是一樣的
    wx.navigateTo({
        url: "../posts/post",
    });
  },
  onHide:function(){
    console.log("hideing this page");
  }
})

運行結果：

控制臺打印結果：

hideing this page

以上演示的navigateTo方法只是部分結構，完整的結構如下：

Page({
  onTap:function(){
    wx:wx.navigateTo({
      url: '../posts/post',
      success: function(res) { // 跳轉成功后的回調函數

      },
      fail: function (res) {  // 跳轉失敗后的回調函數

      },
      complete: function (res) {  // 無論跳轉成功或失敗都會回調的函數

      },
    })
  },
})

注：redirectTo方法也是一樣的，完整結構也是會有三個回調函數。

冒泡事件與非冒泡事件的區別：

冒泡事件就是當父節點和子節點都有監聽事件時，觸發子節點的事件也會一并觸發父節點的事件。但是觸發父節點的事件并不會觸發子節點的事件，這種機制就是冒泡事件，示例：

wxml代碼：

<view class="moto-container" bindtap='onContainerTap' >
    <text class="moto" bindtap='onSubTap'>開啟小程序之旅</text>
</view>

js代碼：

Page({
  onContainerTap:function(){
    console.log("excute onContainerTap");
  },
  onSubTap:function(){
    console.log("excute onSubTap");
  }
})

觸發子節點的事件后控制臺的打印結果：

excute onSubTap
excute onContainerTap

觸發父節點的事件后控制臺的打印結果：

excute onContainerTap

非冒泡事件則是反之，觸發子節點的事件并不會觸發父節點的事件。

在小程序中，我們可以阻止事件的冒泡，讓原本有冒泡性質的事件指定為非冒泡性質，方法也很簡單，就是把bind改為catch即可，示例：

<view class="moto-container" catchtap='onContainerTap' >
    <text class="moto" catchtap='onSubTap'>開啟小程序之旅</text>
</view>

js代碼不變，觸發子節點的事件后控制臺的打印結果：

excute onSubTap

觸發父節點的事件后控制臺的打印結果：

excute onContainerTap

注：在小程序中，絕大多數的事件都是冒泡事件。

至于哪些事件是冒泡事件，哪些事件是非冒泡事件，可以參照以下的官方說明文檔：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html