只(zhi)是展示用，建(jian)議(yi)(yi)使(shi)用template，組件中涉及到較多的邏輯，建(jian)議(yi)(yi)使(shi)用component。 因為template沒有自己(ji)的js文件，所以在列(lie)表中涉及到列(lie)表子項獨(du)立的操作，建(jian)議(yi)(yi)將列(lie)表子項寫(xie)成component。

示例(li)代(dai)碼： page文件(jian)

<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList為page傳入的數據-->
<template is="statement-goodlist" data="{{goodList}}"/>

2.wxs文件的使用

Wxs更多(duo)的(de)是作為一個過濾(lv)器使用(yong)(yong)，.wxs 文件(jian)可(ke)以被其(qi)他的(de) .wxs 文件(jian) 或 WXML 中(zhong)的(de)  標(biao)簽引用(yong)(yong)。 .wxs模塊中(zhong)引用(yong)(yong)其(qi)他 wxs 文件(jian)模塊，可(ke)以使用(yong)(yong) require 函(han)數。

示(shi)例代碼(ma) page文件--類似(si)過濾(lv)器(qi)效(xiao)果(guo)

<!--wxml-->
<!--引用-->
<wxs src="../../assets/wxs/phonenum.wxs" module="phone" />
<!--使用-->
<text class='statement-adress-cellphone'>{{phone.phone(AddressInfo.phone)}}</text>

3.生命周期

/**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {
    // 前進-跳轉到其他頁面的時候
  },
  
/**
 * 生命周期函數--監聽頁面卸載
 */
onUnload: function () {
  // 后退-點擊當前頁面返回的時候
}

利(li)用這兩個生命周(zhou)期可(ke)以解決的(de)(de)問(wen)題(ti)： 防止用戶快速切(qie)換(huan)頁(ye)面(mian)(mian)（A->B）。導(dao)致(zhi)動態設置導(dao)航欄(lan)(lan)中(zhong)的(de)(de)文字(zi)顯(xian)(xian)示出現錯誤 快速切(qie)換(huan)頁(ye)面(mian)(mian)可(ke)能導(dao)致(zhi)A頁(ye)面(mian)(mian)中(zhong)的(de)(de)異步數(shu)(shu)據還未返回(hui)，致(zhi)使(shi)當(dang)切(qie)換(huan)到B頁(ye)面(mian)(mian)的(de)(de)時候A數(shu)(shu)據才返回(hui)，使(shi)得導(dao)航欄(lan)(lan)顯(xian)(xian)示的(de)(de)文字(zi)為(wei)A頁(ye)面(mian)(mian)的(de)(de)導(dao)航欄(lan)(lan)標(biao)題(ti)。（即：A頁(ye)面(mian)(mian)的(de)(de)導(dao)航欄(lan)(lan)標(biao)題(ti)為(wei)hello，B頁(ye)面(mian)(mian)的(de)(de)導(dao)航欄(lan)(lan)標(biao)題(ti)為(wei)world,當(dang)快速由A->B,此時雖然在B頁(ye)面(mian)(mian)，但是導(dao)航欄(lan)(lan)標(biao)題(ti)顯(xian)(xian)示的(de)(de)是hello，而不是world）

參(can)考鏈接: 小(xiao)程序中的生命周期onHide和onUnload

二、 通信類

如果說數(shu)(shu)據(ju)是(shi)(shi)汽車(che)的(de)(de)話(hua)，傳遞的(de)(de)通(tong)道或方(fang)式就(jiu)是(shi)(shi)汽車(che)要(yao)行(xing)駛的(de)(de)道路。所以，數(shu)(shu)據(ju)驅動型的(de)(de)框架，我們少不了要(yao)學習如何建設這條"道路"，讓"汽車(che)"高速行(xing)駛。

1.頁面與組件通信

1-1.頁面傳遞內容給組件

page為(wei)頁面的屬性名

components 為組件的(de)外部屬性名, 用properties對象接收

頁面

<!-- Wxml --> 
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
  data: {
      page: '父親pages'
  }
})

組件

父(fu)親pages

<!-- Wxml --> 
<!-- Js -->
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    components: { // 屬性名
      type: String
    }
  },
  /**
   * 組件的方法列表
   */
  methods: {
    onTap: function () {
      let page = this.data.components
      console.log(page)  // 我是父親pages
    }
  }
})

1-2.組件傳遞內容給頁面

給(gei)組件(jian)設置myevent事(shi)件(jian)，通(tong)過(guo)this.triggerEvent('myevent', myEventDetail) 觸發該myevent事(shi)件(jian)并傳遞內容，在(zai)頁(ye)面用onMyEventshi事(shi)件(jian)監聽傳遞過(guo)來(lai)的數據(ju)。

頁面

<!-- Wxml --> 
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
  // 監聽myevent事件
  onMyEvent: function (e) {
    console.log('接收a組件傳遞的內容:', e.detail) // '我是a組件'
  }
})

組件

<!-- Wxml -->
<!-- 在自定義組件"components-a"中 -->
<button bindtap="onTap">點擊</button>
<!-- Js -->
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = '我是a組件'
      this.triggerEvent('myevent', myEventDetail) // 觸發組件上的“myevent”事件
    }
  }
})

2.組件與組件通信

兩個無任何關聯的組件：通過全局變量或本地緩存傳遞數據

兩個有關聯的組件(jian)(jian)(同一(yi)個父頁面下(xia))： 通過上面的方法，用(yong)組件(jian)(jian) => 頁面 => 組件(jian)(jian) 的方式傳(chuan)遞數據。

3.頁面之間的通信

3-1.使用全局變量 app.globalData

3-2.使用本地緩存 wx.setStorageSync

3-3.url傳遞

// A頁面-傳遞數據
// 需要注意的是，wx.switchTab 中的 url 不能傳參數。
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male'
})


// B頁面-接收數據
// 通過onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) //  raymond is male
    this.setData({
      option: option
    })
  }
})

3-4.后一級頁面對前一級頁面的數據的管理(通過獲取到頁面對象進行數據操作)

這(zhe)個方法的精髓，是通過獲取到其(qi)他頁面的對(dui)象原型(xing)， 然后通過原型(xing)方法 setData 對(dui)當前對(dui)象管(guan)理的 data 進行修改(gai) ，

示例如下：

// pageE.js
Page({
  data: {
    index: 1
  }
})

當跳轉到下(xia)一個頁面 F 之(zhi)后，假定在(zai) F 中(zhong)有(you)操(cao)作(zuo)需要對 E 中(zhong)的數據有(you)修改，則(ze)可以使用(yong)以下(xia)方法：

// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})

這(zhe)個方法可以操(cao)作頁(ye)面堆棧里面的(de)頁(ye)面的(de)數據， 可以做(zuo)到(dao)讓后一級頁(ye)面對(dui)上級頁(ye)面群的(de)數據管理 。

參(can)考(kao)鏈接： 愛范兒-頁面之間(jian)的數(shu)據傳遞(di)

4.頁面與模板之間的通信

頁面

<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
  
<!-- JS -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

傳入模(mo)板的除了變(bian)量，還可以是事件方(fang)法對象。例(li)如，模(mo)板中的點(dian)擊事件，可以傳遞(di)到使用模(mo)板的元素中。

三 、技巧類

1. 索引是變量，修改數組的值

根據文檔(dang)，采(cai)用'array[0].text':'changed data'的格式。但是我(wo)們實際應用中(zhong)需要改變(bian)的索引值往往是動態的，所以，改裝一下如下：

示例代碼：

// 修改某個數組的動態的值 --- 提前將數組對象準備好
// 索引index是變量， value是變量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})