VX小程序（二）

一、app.js

每个微信小程序必须在app.js中进行程序的注册，并且只能注册一次。因此，主逻辑文件app.js

中必须包含注册的方法。

1.1 App（）

App()函数用来注册一个小程序。接受一个object参数，其指定小程序的生命周期函数等。

ooject类型：onLaunch、onShow、onHide、onError、onPageNotFound、其他。

App({
  onLaunch: function(options) { 
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function(msg) {
    console.log(msg)
  },
  onPageNotFound(res) {
     wx.redirectTo({
       url: 'pages/...'
     })
   }，
  globalData: 'I am global data'
})

注意：

①App()必须在app.js中注册，且不能注册多个。

②不要在定义于App()内的函数中调用getApp()，使用this就可以拿到app实例。

③不要在onLaunch的时候调用getCurrentPage()，此时page还没有生成。

④通过getApp()获取实例之后，不要私自调用生命周期函数。

二、数据绑定

    数据绑定使用"Mustache"语法（双大括号）将变量包起来。

三、列表渲染和条件渲染

    3.1 列表渲染 wx:for 

        使用 wx:for-item 可以指定数组当前元素的变量名，

        使用 wx:for-index 可以指定数组当前下标的变量名：

    3.2 条件渲染 wx:if 、wx:elif和wx:else    

    wx:ifvshidden

    因为wx:if之中的模板也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

    同时wx:if也是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

    相比之下，hidden就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

    一般来说，wx:if有更高的切换消耗而hidden有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用hidden更好，如果在运行时条件不大可能改变则wx:if较好。

四、template模板

<!--定义模板  -->
<template name="msgItem">
  <view>
    <text> qqqqq </text>
    <text> 22222 </text>
  </view>
</template>
<!--使用模板  -->
<template is="msgItem"/>

使用is属性，声明需要的使用的模板，然后将模板所需要的data传入；

is属性也可以使用Mustache语法，来动态决定具体需要渲染哪个模板；

五、事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如id, dataset, touches。

5.1 事件分类

事件分为冒泡事件和非冒泡事件

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
3. bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
   

WXML的冒泡事件列表：

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longtap	手指触摸后，超过350ms再离开

5.2 dataset

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。书写方式：以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

六、引用 import和include

    6.1 import

        import可以在该文件中使用目标文件定义的template  //<import src="item.wxml"/>

    6.2 include

    include可以将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置 //include src="header.wxml"/>

    PS:import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。