一、 框架类

1.Template引入与component构造器引入，应该选择哪一个？

只是展示用，建议使用template，组件中涉及到较多的逻辑，建议使用component。 因为template没有自己的js文件，所以在列表中涉及到列表子项独立的操作，建议将列表子项写成component。

示例代码： page文件

<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList为page传入的数据-->
<template is="statement-goodlist" data="{{goodList}}"/>

2.wxs文件的使用

Wxs更多的是作为一个过滤器使用，.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的  标签引用。 .wxs模块中引用其他 wxs 文件模块，可以使用 require 函数。

示例代码 page文件--类似过滤器效果

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

3.生命周期

 /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 前进-跳转到其他页面的时候
  },
  
/**
 * 生命周期函数--监听页面卸载
 */
onUnload: function () {
  // 后退-点击当前页面返回的时候
}

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

组件

父亲pages

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

1-2.组件传递内容给页面

给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。

页面

<!-- 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”事件
    }
  }
})

// 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
    })
  }
})

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

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

// 修改某个数组的动态的值 --- 提前将数组对象准备好
// 索引index是变量， value是变量
var shipmentTypeObj = "shipmentType[" + index + "].code"
this.setData({[shipmentTypeObj]: value})