編寫第二個(gè)頁(yè)面：新聞閱讀列表頁(yè)面

筆記內(nèi)容：編寫第二個(gè)頁(yè)面：新聞閱讀列表頁(yè)面
筆記日期：2018-01-06

使用Swiper組件構(gòu)建輪播圖

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

示例：
post.wxml文件：

<view>
  <!-- 需要在父節(jié)點(diǎn)里定義寬高，indicator-dots屬性指定顯示輪播圖的小點(diǎn)，縱向滾動(dòng)則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='2000' >
    <!-- 每一項(xiàng)里都放了一個(gè)圖片 -->
    <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
}

運(yùn)行結(jié)果：

構(gòu)建新聞列表

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

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

構(gòu)建一個(gè)簡(jiǎn)單的新聞列表示例：
post.wxml文件：

<view>

  <!-- 需要在父節(jié)點(diǎn)里定義寬高，indicator-dots屬性指定顯示輪播圖的小點(diǎn)，縱向滾動(dòng)則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='5000'>
    <!-- 每一項(xiàng)里都放了一個(gè)圖片 -->
    <swiper-item>
      <!-- 使用絕對(duì)對(duì)路徑 -->
      <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'>正是蝦肥蟹壯時(shí)</text>
    <image class='post-image' src='/images/post/crab.png'></image>
    <text class='post-content'>
    “山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r(shí)節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽(yáng)中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤(rùn)。
    </text>
    <view class='post-like'>
      <!-- 使用相對(duì)路徑 -->
      <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'>比利·林恩的中場(chǎng)戰(zhàn)事</text>
    <image class='post-image' src='/images/post/bl.png'></image>
    <text class='post-content'>
    伊拉克戰(zhàn)爭(zhēng)時(shí)期，來自美國(guó)德州的19歲技術(shù)兵比利·林恩（喬·阿爾文 Joe Alwyn 飾）因?yàn)橐欢闻既慌臄z的視頻而家喻戶曉。那是一次規(guī)模不大卻激烈非常的遭遇戰(zhàn)，戰(zhàn)斗中林恩所在的B班班長(zhǎng)（范·迪塞爾 Vin Diesel 飾）遭到當(dāng)?shù)匚溲b分子的伏擊和劫持，而林恩為了營(yíng)救班長(zhǎng)不惜鋌而走險(xiǎn)沖鋒陷陣。
    </text>
    <view class='post-like'>
      <!-- 使用相對(duì)路徑 -->
      <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": "文與字"
}

運(yùn)行結(jié)果：

js文件結(jié)構(gòu)與Page頁(yè)面的生命周期

小程序中的js文件結(jié)構(gòu)與我們平時(shí)在web前端開發(fā)中的js文件有些差別，在小程序中需要把變量、函數(shù)等代碼寫到Page( )里。有點(diǎn)像json注冊(cè)信息一樣，在格式上也有點(diǎn)像，以下是小程序工具自動(dòng)生成的js文件代碼：

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },

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

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

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

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
   */
  onHide: function () {
    console.log("onHide")
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
   */
  onUnload: function () {
    console.log("onUnload")
  },

  /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
   */
  onPullDownRefresh: function () {

  },

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

  },

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

  }
})

從以上生成的代碼可以看到，所有的函數(shù)都寫在Page里，而且如果js文件中沒有這個(gè)Page就會(huì)報(bào)錯(cuò)，所以即便不寫代碼也要寫個(gè)空Page在那。

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

數(shù)據(jù)綁定

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

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

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

然后在wxml中通過兩個(gè)大括號(hào)就可以獲得值了：

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

注：在小程序中，這種數(shù)據(jù)綁定是單向的。

現(xiàn)在我們就可以把數(shù)據(jù)都轉(zhuǎn)移到j(luò)s文件中，然后通過數(shù)據(jù)綁定機(jī)制來在xwml中獲得數(shù)據(jù)：
post.js代碼：

  // 寫在這個(gè)函數(shù)內(nèi)是為了在頁(yè)面加載時(shí)就加載數(shù)據(jù)
  onLoad: function (options) {
    var post_content1={
      date:"Jan 06 2018",
      title:"正是蝦肥蟹壯時(shí)",
      post_img:"/images/post/crab.png",
      content:"“山明水凈夜來霜，數(shù)樹深紅出淺黃。試上高樓清入骨，豈如春色嗾人狂?！苯鹎飼r(shí)節(jié)，天高云淡，秋風(fēng)送爽，氣候宜人。秋風(fēng)秋陽(yáng)中，碩果墜掛枝頭，玉米撫須含笑，高粱引頸高歌，豆莢飽滿圓潤(rùn)。",
      view_num:"112",
      collect_num:"96",
      author_img:"/images/avatar/1.png"
    }
    // 調(diào)用這個(gè)方法就相當(dāng)于把數(shù)據(jù)都寫在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'>
      <!-- 使用相對(duì)路徑 -->
      <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>

從以上兩個(gè)對(duì)應(yīng)的代碼片段可以看到，數(shù)據(jù)綁定機(jī)制的方便之處。

注意：我們都知道在一些標(biāo)簽的屬性上需要提供布爾類型的值，例如，之前提到過swiper的vertical屬性，但是有時(shí)候會(huì)遇到明明給的值是false，卻依舊還是垂直滾動(dòng)，這是因?yàn)榻o的并不是布爾值，而是一個(gè)false字符串，在小程序中只要字符串不為空都會(huì)被認(rèn)為是true，解決這種問題就需要使用數(shù)據(jù)綁定的語(yǔ)法來設(shè)定值：

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

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

關(guān)于嵌套數(shù)據(jù)的拿值方式：
在設(shè)置數(shù)據(jù)屬性的時(shí)候可以把一組同類的數(shù)據(jù)都設(shè)置在一個(gè)數(shù)據(jù)里形成一個(gè)數(shù)組形式，例如我把設(shè)置照片路徑數(shù)據(jù)的屬性都統(tǒng)一寫在img屬性里：

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

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

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

控制一個(gè)標(biāo)簽顯示/隱藏的語(yǔ)法：
小程序里有一個(gè)語(yǔ)法可以控制標(biāo)簽的顯示或隱藏：

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

使用數(shù)據(jù)綁定機(jī)制：

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

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

運(yùn)算：
在兩個(gè)大括號(hào)中可以進(jìn)行一些簡(jiǎn)單的運(yùn)算，例如：數(shù)值型的數(shù)據(jù)可以進(jìn)行算術(shù)運(yùn)算，字符串則可以進(jìn)行字符串連接運(yùn)算等。

簡(jiǎn)單的加法運(yùn)算示例：

<!-- 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來改寫新聞列表

以上我們雖然通過數(shù)據(jù)綁定解決了動(dòng)態(tài)加載服務(wù)器數(shù)據(jù)的問題，但是還有一個(gè)問題就是組件代碼重復(fù)太多，因?yàn)樯暇€使用后不可能只有兩篇文章，會(huì)有很多篇文章。如果每一篇文章都得重復(fù)的去拷貝相同的代碼就有點(diǎn)麻煩了，所以我們還需要解決這個(gè)代碼重復(fù)的問題——使用for循環(huán)：

1.首先將js文件中的數(shù)據(jù)整合成一個(gè)數(shù)組：

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

    // 因?yàn)槭菙?shù)組，所以需要使用這種方式將數(shù)據(jù)填充到data里
    this.setData({
      posts_key: posts_content
    });
  },

2.使用for循環(huán)來進(jìn)行數(shù)據(jù)綁定：

<view>
  <!-- 需要在父節(jié)點(diǎn)里定義寬高，indicator-dots屬性指定顯示輪播圖的小點(diǎn)，縱向滾動(dòng)則使用vertical屬性 -->
  <swiper indicator-dots='true' autoplay='true' interval='5000'>
    <!-- 每一項(xiàng)里都放了一個(gè)圖片 -->
    <swiper-item>
      <!-- 使用絕對(duì)對(duì)路徑 -->
      <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需要接收一個(gè)數(shù)組、集合類型的值，wx:for-item用于設(shè)置一個(gè)變量來代表子元素 -->
  <!-- wx:for-index用于設(shè)置一個(gè)變量來代表下標(biāo)值 -->
  <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'>
        <!-- 使用相對(duì)路徑 -->
        <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不設(shè)置也可以，因?yàn)槟J(rèn)值就是item和index，直接用就可以了。

可以看到以上示例使用循環(huán)后就減少了很多重復(fù)性的代碼。

小程序的事件機(jī)制（冒泡與非冒泡）

到目前為止，我們就編寫好了兩個(gè)頁(yè)面——啟動(dòng)頁(yè)面和新聞列表頁(yè)面，現(xiàn)在我們需要通過小程序的事件機(jī)制，讓我們點(diǎn)擊啟動(dòng)頁(yè)面的時(shí)候，就能夠進(jìn)入到新聞列表頁(yè)面。

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

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

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

示例：

welcome.wxml文件代碼：

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

welcome.js文件代碼：

// 所有代碼都需要寫在Page里
Page({
  onTap:function(){
    // 通過wx.redirectTo方法來實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)
    wx.redirectTo({
      // 不需要指明后綴名，小程序會(huì)自動(dòng)識(shí)別
      url: "../posts/post",
    })
  }
})

編寫完以上代碼后，就可以點(diǎn)擊啟動(dòng)頁(yè)中的view組件跳轉(zhuǎn)到新聞列表頁(yè)面了。

redirectTo方法是重定向方式的跳轉(zhuǎn)，這種方式的跳轉(zhuǎn)是完全跳轉(zhuǎn)到另一個(gè)頁(yè)面中，由于重定向跳轉(zhuǎn)會(huì)卸載掉當(dāng)前頁(yè)面，這個(gè)過程會(huì)觸發(fā)Page生命周期中的Unload事件。示例：

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

運(yùn)行結(jié)果：

從運(yùn)行結(jié)果可以看到，沒有返回上一級(jí)頁(yè)面的按鈕

控制臺(tái)打印結(jié)果：

unloading this page

另一種跳轉(zhuǎn)方式是使用navigateTo方法進(jìn)行跳轉(zhuǎn)，這個(gè)方法只會(huì)導(dǎo)航到另一個(gè)頁(yè)面，當(dāng)前頁(yè)面只是隱藏掉，所以跳轉(zhuǎn)之后還可以返回上一級(jí)頁(yè)面，同樣的這個(gè)過程也會(huì)觸發(fā)相應(yīng)的事件，這個(gè)事件就是onHide事件。示例：

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

運(yùn)行結(jié)果：

控制臺(tái)打印結(jié)果：

hideing this page

以上演示的navigateTo方法只是部分結(jié)構(gòu)，完整的結(jié)構(gòu)如下：

Page({
  onTap:function(){
    wx:wx.navigateTo({
      url: '../posts/post',
      success: function(res) { // 跳轉(zhuǎn)成功后的回調(diào)函數(shù)

      },
      fail: function (res) {  // 跳轉(zhuǎn)失敗后的回調(diào)函數(shù)

      },
      complete: function (res) {  // 無論跳轉(zhuǎn)成功或失敗都會(huì)回調(diào)的函數(shù)

      },
    })
  },
})

注：redirectTo方法也是一樣的，完整結(jié)構(gòu)也是會(huì)有三個(gè)回調(diào)函數(shù)。

冒泡事件與非冒泡事件的區(qū)別：

冒泡事件就是當(dāng)父節(jié)點(diǎn)和子節(jié)點(diǎn)都有監(jiān)聽事件時(shí)，觸發(fā)子節(jié)點(diǎn)的事件也會(huì)一并觸發(fā)父節(jié)點(diǎn)的事件。但是觸發(fā)父節(jié)點(diǎn)的事件并不會(huì)觸發(fā)子節(jié)點(diǎn)的事件，這種機(jī)制就是冒泡事件，示例：

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");
  }
})

觸發(fā)子節(jié)點(diǎn)的事件后控制臺(tái)的打印結(jié)果：

excute onSubTap
excute onContainerTap

觸發(fā)父節(jié)點(diǎn)的事件后控制臺(tái)的打印結(jié)果：

excute onContainerTap

非冒泡事件則是反之，觸發(fā)子節(jié)點(diǎn)的事件并不會(huì)觸發(fā)父節(jié)點(diǎn)的事件。

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

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

js代碼不變，觸發(fā)子節(jié)點(diǎn)的事件后控制臺(tái)的打印結(jié)果：

excute onSubTap

觸發(fā)父節(jié)點(diǎn)的事件后控制臺(tái)的打印結(jié)果：

excute onContainerTap

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

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

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