微信小程序，学习笔记（一）框架，视图层

微信小程序，学习笔记（一）框架，视图层

学习链接：http://www.w3cschool.cn/weixinapp/

因为其实并非原创，但是并没有什么好的类别可选，所以修改成：“翻译”了。

熟悉

文档结构介绍

--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxss

全局变量、对象、方法

普通类型

对象

• App

  应用程序全局实例，在app.js中定义，每个程序只有一个实例，可以通过如下方式获取

  var app = getApp();

  该对象内容，全局属性或全局方法可以在这里面定义

  App({
      onLaunch: function () { ...... },
  
      getUserInfo: function () { ...... },
  
      // 全局变量对象
      globalData： {
          userInfo: null
      },
  
      globalIndex: 0
  });

  使用方法：

  var app = getApp();
  
  // 保存用户信息
  var userInfo = app.globalData.userInfo;
  
  // 普通类型全局变量
  var index = app.globalIndex;

视图层（View）

数据绑定（{{}}）和条件渲染（wx:if）

使用两个嵌套的大括号方式

Page({
    data: {
        name: 'lizc',
        index: 0,
        condition: true,
        flag: 0,
        a: 1,
        b: 2,
        c: 3,
        str: 'world'
    }
});

1. 普通绑定：

   <view>{{name}}</view>

2. 组件属性绑定: 必须使用引号引起来，在js改变index值的时候，页面会自动刷新最新值

   <view id="item-{{index}}"></view>

3. 控制属性：即属性值是需要通过满足一定条件达到目的

   <view wx:if="{{condition}}"></view>

   也可以是条件表达式，或运算表达式：
   <view hidden="{{flag ? true : false}}"></view>

   多级条件判断，如：if ... elif ... else

   <view wx:if="{{flag !== 0}}">flag不为0的时候才显示这个view</view>
   <view wx:elif="{{flag > 0 && flag < 8}}">flag取值在 0 ~ 8 之间的值时候显示这个</view>
   <view wx:else>上面两个都不满足显示条件的时候就会显示这个</view>

4. 使用<block>块标签来使用条件判断控制多个组件的行为，<block>只起到分组的作用，并不会真的渲染到出来

   <block wx:if="{{flag > 0}}">
       <view>组件一</view>
       <view>组件二</view>
   </block>

5. 算术运算

   <view>{{a}} + {{b}} + c</view>
   <view>'hello' + {{str}}</view>

6. 对象绑定

   其实和普通类型绑定差不多

   <view>{{obj.name}} + array[0]</view>

PS: 使用条件来控制view时候，和hidden属性的比较
- view的条件判断，会在条件中的值发生变化的时候，会先销毁原先的，然后满足条件的时候重新渲染和销毁
- hidden属性控制view的显示和隐藏，这个属性的组件始终会被渲染，只是在需要的时候控制它的隐藏和显示

最后比较得出：如果需要频繁频繁切换的情况下用hidden属性控制，如果在绑定的数据基本不变的情况下使用wx:if条件来控制

列表渲染（wx:for）

• wx:for，可以同时生成多个元素

  参数属性说明：

  • wx:key="unique..."：指定组件的唯一标识，列表发生变化需要保持自身的状态和特征不发生变化，并且能在重新渲染的时候，重新排序；
  • wx:key="*this"：功能同上，但这个是要求项目中的item本身是唯一的，也就是你需要用到的属性值是唯一；
  • wx:for-index="index"：指定循环的下标变量名，默认：index；
  • wx:for-item="item": 指定当前项变量名，默认：item

  例如：

  <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
  
  // dates： 需要遍历的数据对象
  // 'unique'： 数据项的唯一标识符
  // 'idx'： 指定的下标变量名
  // 'date'：指定的当前数据的变量名
  // 指定之后可以在属性中直接使用'idx', 'date'变量，例如，上例的'id': "ctl-list-{{idx}}，这里就用到了'idx'来添加属性'id'
  
  // 生成后的实际结果：
  <view class="ctl-list-row" id="ctl-list-0">1/4</view>
  <view class="ctl-list-row" id="ctl-list-1">1/3</view>
  <view class="ctl-list-row" id="ctl-list-2">1/2</view>
  <view class="ctl-list-row" id="ctl-list-3">1/1</view>
  <view class="ctl-list-row" id="ctl-list-4">12/31</view>
  <view class="ctl-list-row" id="ctl-list-5">12/30</view>
  <view class="ctl-list-row" id="ctl-list-6">12/29</view>

模版（template）

用来定义代码片段，完成之后可以在其他地方通过模版直接套用该模版中组件。

• 模版定义：

  <!--
      index: Integer
      msg: String
      date: String
  
      参数可以是可用的任意类型
  -->
  <template name="tplName>
      <view>
          <text>{{index}}: {{msg}}</text>
          <text>Date: {{date}}</text>
      </view>
  </template>

• 模版使用：通过模版名称

  <template is="tplName" data="{{...item}}" />
  
  // 数据，模版所需要的数据
  Page({
      data: {
          item: {
              index: 0,
              msg: 'hello',
              date: '2017-1-4'
          }
      }
  });
  
  // wxml结构中效果：
  <view>
      <text>0: hello template</text>
      <text>Date: 2017-1-4</text>
  </view>
  
  // 实际显示效果：
  0： hello template, Date: 2017-1-4

• 模版和列表wx:for结合使用，同时生成多个模版

  使用的时候使用半闭合标签，以及需要使用到is=""来指定模版名称去使用的指定模版

  <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-item="it" />
  
  // wxml结构中效果
  <view>
      <text>0: hello template</text>
      <text>, Date: 2017-1-4</text>
  </view>
  <view>...</view>
  <view>...</view>
  <view>...</view>
  
  // 显示效果，即多个重复模版
  
  0： hello template, Date: 2017-1-4
  0： hello template, Date: 2017-1-4
  0： hello template, Date: 2017-1-4
  0： hello template, Date: 2017-1-4
  
  // 尝试了下去修改 index 值，未成功，暂时还不知道怎么弄
  
  <template is="tplName" data="{{...item}}" wx:for="{{[0, 1, 2, 3]}}" wx:for-index="index" wx:for-item="it" />
  

• 运行时通过条件判断来决定使用哪个模版

  <!-- 运行时决定使用哪种模版 -->
  <template name="tpl1">
      <view>template first</view>
  </template>
  
  <template name="tpl2">  
      <view>template first</view>
  </template>
  
  // 运行时根据`is=""`中的语句来判断，决定使用的是'tpl1'还是'tpl2'
  <block wx:for="{{[1, 2, 3, 4, 5, 6]}}">
      <template is="{{item % 2 === 0 ? 'tpl2' : 'tpl1'}}" />
  </block>

PS: 生成的模版拥有自己独立的作用域，因此所使用的数据必须是data=中指定的数据

事件处理

• 点击事件：bindtap

  例如：<button class="button button-refresh" bindtap="refreshDateTbl">refresh</button>

  // 绑定的函数在Page中定义，事件函数的参数为 event 事件对象
  
  Page({
      refreshDateTbl: function ( event ) {
          var that = this,
              index = that.data.index + 1,
              len = that.data.dates.length;
  
          if ( index >= len ) {
            index = 0;
          }
  
      that.setData({index: index});
  
      console.log( event );
    }
  });
  

  从输出结果得出，event 对象主要包含以下部分

  changedTouches:Array[1]
  currentTarget:Object
  detail:Object
  target :Object
  timeStamp:2881
  touches:Array[1]
  type:"tap"
  

• 事件对象：event

  原生事件属性列表：

  1. type: 即当前事件类型（tap / touch）；
  2. currentTarget：表示当前组件信息集合；
  3. target: 通过打印看了下，console.log( event.currentTarget == event.target ); 结果：false，说明 currentTarget 和 target 不是同一个对象，但是里面的东西应该都是当前目标的属性(不是很确定)；看文档解释是：触发事件的组件的属性集合（currentTarget是当前，target是触发事件的组件，不是很明白区别在哪？？）
  4. timeStamp: 这个时间也不知道是啥，应该不是点击动作时间也不是响应时间，有2.8秒之久。（理解错误，正确：事件生成的时间戳）

  自定义事件对象属性列表：

  1. detail: 当前组件的坐标(x, y)；

  触摸事件对象属性列表：

  1. touches：这个接触的对象数组，难道是和事件冒泡有关？表示网上冒泡的父对象集合？？瞎猜，应该是：当前触摸事件的触摸点信息数组；
  2. changedTouches: 应该和上面的touches有联系，解释为：当前变化的触摸点信息的数组；

  以下是各事件属性的内容，很容易理解

  1. target: id, dataset, offsetLeft, offsetTop，dataset要解释下：表示事件源组件上的自定义属性data-的集合；

  2. currentTarget: id, ‘dataset,tagName`；

     dataset：自定义属性集合，其中自定义属性 data- 中必须都为小写，需要使用 - 作为连接符， 自定义后的属性都会出现在事件对象的dataset对象上，举例：

     <view data-my-name="lizc" data-myAge="30"></view>

     最终 name 和 age 可以通过如下方式去调用

     event.target.dataset.myName === 'lizc'; // `-` 连接的都会转成驼峰式
     event.target.dataset.myage === '30'; // 而驼峰式写法会被转成全小写形式

     因此推荐使用 - 连接符去书写自定义数据属性

  3. touches：触摸点数组，触摸点对象 Touch 或 CanvasTouch 的集合，表示当前页面上所有触摸点的集合，包含属性：

     Touch 对象

     • identifier： 触摸点标识符，类型：Number，应该是个类似标记的东西，或者索引之类的，唯一；
     • pageX, pageY：相对于整个文档而言，距离文档左上角的 x 和 y 轴的距离；
     • clientX, clientY：相对于可是区域而言，xy 轴的距离

     CanvasTouch对象：

     • identifier: 同上；
     • x, y：这个只有一个坐标，即相对画布左上角而言的坐标；

  4. changedTouches：表示发生变化的触摸点对象集合，比如该触摸点发生了touchstart, touchmove, touchend, touchcancel变化；

  5. detail：跟自定义事件有关，自定义事件携带的数据，不是很明白，具体内容有待考证。

PS1: 中午休息了会，打开代码，随便点击了几下按钮，突然发现这个timestamp可能是什么鬼了！！！

下面是打印

```

Object {type: "tap", timeStamp: 5053127, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053311, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5053496, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054722, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5054936, target: Object, currentTarget: Object, detail: Object…}
Object {type: "tap", timeStamp: 5055120, target: Object, currentTarget: Object, detail: Object…}

new Date() 一下：

new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
new Date(5053127)
Thu Jan 01 1970 09:24:13 GMT+0800 (中国标准时间) 

结果发现相差了 1:24:13，这不是刚刚启动程序那会!!!!

```

从而得出结论：这个timestamp应该就是程序运行的时间，单位：（ms）

PS2: 好傻！！看完事件大概，居然没继续往下看，文档下面就有每个属性的明确解释

timeStamp： 事件生成时的时间戳；我还把它当成了程序运行时间~~~~, 也就是该页面打开到事件触发时的这段时间。

• 事件类型：冒泡和非冒泡

  冒泡事件：（除以下冒泡事件之外的其他事件均为非冒泡事件）

  1. touchstart: 手指刚碰触到屏幕的时候触发的事件；
  2. touchmove：手指触摸后移动时触发；
  3. touchcancel:手指触摸动作被打断，即非正常退出触摸，如来电或短信等；
  4. touchend：手指触摸结束；
  5. tap：手指触摸，即点击事件，触摸即离开；
  6. longtap：手指触摸后超过350ms再离开，会被判定为长按。

  非冒泡事件

  1. <form/>标签的submit事件
  2. <input/>标签的input事件
  3. <scroll-view/>标签的scroll事件

  特殊事件：

  1. <canvas />的触摸事件不可冒泡，因此没有 currentTarget，理解：因为不存在冒泡行为，也就是说被点击事件和当前事件组件永远只可能是同一个组件。

• target 和 currentTarget 对比分析

  测试代码：日期列表，点击日期行，通过事件冒泡去触发父组件的tapDateRow事件

  <view  bindtap="tapDateRow" id="ctl-list-date" class="ctl-list-date">
    <view wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
  </view>
  
  // tap 后输出：
  
  // 点击的当前行，即：event.target
  Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
  
  // 绑定事件的组件，即：event.currentTarget
  Object {id: "ctl-list-date", offsetLeft: 0, offsetTop: 0, dataset: Object}

  从输出可知，target即你点击的那个组件，也就是触发点击事件的组件，而 currentTarget 是你绑定点击事件的那个组件，如果点击事件句柄同时绑定在被点击的那个组件上，那么这两个对象是不是应该是指同一个组件呢？（猜测对一半错一半，验证如下：）

  // 日期列表
  <view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row">{{dates[index + idx].desc}}</view>
  </view>
  
  // 点击日期行事件处理句柄
  tapDateRow: function ( event ) {
    console.log( event.target );
    console.log( event.currentTarget );
    console.log( event.currentTarget === event.target );
  }
  
  // 输出
  Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
  Object {id: "ctl-list-0", offsetLeft: 0, offsetTop: 0, dataset: Object}
  false
  

  结论：通过输出可知，两个对象的内容是一模一样的，说明这两个属性都是代表着当前被点击的组件，但是两者却不是指向同一个空间，即该组件。说明这两个对象具有自己独立的内存空间，而非在绑定事件和触发事件对象相同时都指向同一个内存空间。

• 事件绑定：bind 和 catch，即冒泡和非冒泡

  bind:

  bindtap, bindtouchstart, bindtouchmove, bindtouchcancel, 
  bindtouchend, bindlongtap, ......

  catch:

  catchtap, catchtouchstart, catchtouchmove,catchtouchcancel, 
  catchtouchend, catchlongtap, ......

  例如：

  <view id="view1" bindtap="f3">
      <view id="view2" catchtap="f2">
          <view id="view3" bindtap="f1">
          </view>
      </view>
  </view>
  

  1. 点击 view3 会调用 f1, 然后调用 f2，到此结束，因为 view2 用的是非冒泡绑定，阻止了事件继续往上冒泡到 view1；
  2. 点击 view2 只会调到 f2；
  3. 点击 view1 只会调到 f1；

事件总结：

1. 事件对象：event;
2. 事件类型：冒泡和非冒泡；
3. 事件绑定：bindtap, bindtouch*;
4. 事件源和触发源：event.currentTarget 和 event.target;
   a. id：事件组件对象的id；
   b. target：自定义属性集合 dataset（属性定义：data-my-name，使用：event.target.dataset.myName）;
   c. offsetLeft/offsetTop： 事件组件的 left/top 实际值。
5. 事件戳： event.timeStamp，单位：（ms）；
6. 触摸点对象：event.touches（Touch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y ）；
7. 变化的触摸点对象：event.changedTouches；
8. 自定义事件携带的数据对象：event.detail。

引用

引用外部文件方式：import 和 include，两个引入刚好相反或者说互补，前者是引入文件中的模版代码template，而后者是引入文件中除了template定义的之外的所有代码完整拷贝到当前位置。

• import

  使用import引入时不能嵌套引入，即：加入 a.wxml 中引入了 b.wxml 中的模版，然后 b.wxml 引入了 c.wxml 中的模版，那么 a.wxml 中也无法直接引入 c.wxml 中的模版。

  <!-- a.wxml -->
  <template name="tplA">
      <view id="id_a"></view>
  </template>

  <!-- b.wxml -->
  <import src="a.wxml" />
  <template name="tplB">
      <view id="id_b"></view>
  </template>
  
  // 引入 a.wxml 中模版
  <template is="tplA" />

  <!-- c.wxml -->
  <import src="b.wxml" />
  <template is="tplB" />  <!-- 引用模版生效 -->
  <template is="tplA" /> <!-- 引用模版无效 -->

  未报错，只是警告，但也可知import无法嵌套跨文件引入：

  Fri Jan 06 2017 15:53:55 GMT+0800 (中国标准时间) WXML Runtime warning
  Template "tplA" not found.

• include

  这个引入的是除了template定义之外的所有代码，相当于将代码拷贝到当前位置。

  <!--a.wxml-->
  <template name="tplA">
      <view>AAAAAAAAAAAAAAAAAAAAAAAA</view>
  </template>
  
  <view>header</view>

  <!--b.wxml-->
  <template name="tplB">
      <view>BBBBBBBBBBBBBBBBBBBBBB</view>
  </template>
  
  <view>footer</view>

  <!--c.wxml-->
  <include src="a.wxml" />
  <view>body</view>
  <include src="b.wxml" />

  结果： 如下，只是单纯引入了除 template 之外的代码，并且是拷贝到 inlucde 使用的当前位置

  <page>
  <view>header</view>
  <view>body</view>
  <view>footer</view>
  </page>

总结：该文主要是根据 W3CSchool 上的资料，学习记录下来的（后续也会一直学习微信小程序的东西）其实也基本差不多是 copy 到一起了吧，不过这样有助于记忆，没有什么技术含量的东西。最近一段时间有点忙，博客什么的压根都没上过，一个人在负责一块还是感觉有点人手不足的，这段时间几乎每天都是10点，11点多下班，周六还要加班。

忍不住要吐槽，不吐不快。。。。。。

1. 槽点1：组内来了两个应届生，组长之前就说好了让我一个跟着我让我带着，一起帮忙负责这一块，可是说是这么说，中途不停的给他安排其他任务，我总感觉是说安排到我这，就是来打酱油的，最后还是的自己去弄，后面又新接了一个开发的任务，搞的人都快搞虚了，不过也算是乐在其中吧，还是比较喜欢创造新东西，每天不停的去给别人填坑也是种苦，宝宝心里苦~！）

新开发任务总算完结了，后期测试也算告终，其实也不是什么复杂的东西，只是今年刚进公司对公司业务这块并不是非常熟悉，所以花了点时间。现在搞完了自己也算有点成就感，嘿嘿~~！！！

1. 槽点2：来了快一年，接触过无数厂家的前端代码，有些写的复杂的让人头疼，给人感觉就是：我就是要写的这么复杂，甚至对象嵌套多达6-7层（Σ( ° △ °|||)︴），显得我牛逼呀，哈哈~~~，是SB吧 - -！。还有一些厂家代码确实非常不错，对象，原型，闭包，命名等等，都是用的溜溜转，也学到不少东西。

2. 槽点3：代码风格，代码格式，代码规范，规范，规范啊，重要的事情说三遍，包括本公司的代码，和大多数其他厂家的代码，代码几乎没有任何规范，格式缩进命名等等，每次看到那种代码，我真想跳楼，
   本来就一个很小的BUG，因为代码问题，硬是要花半天甚至一天才能找到问题点，然后发现其实就是个变量用错地方，或者是哪个单词写错了。

这一年来，经历了很多事情和看了很多代码，对自己要求也严格了

1. 变量名可以稍微长点（不能太长哦，:-)），但一定要表达清楚其意义，让人一看到就知道是干什么的（继续吐槽：全局变量漫天飞，还命名毫无语义感，不找找还真不知道是干嘛的，另外也很少见过全局变量用一种约定方式去定义，比如说：前面统一加上个公司英文符号也好撒，或者你前面加个g/global什么的也好啊，个人比较喜欢用g开头去定义全局变量）；
2. 代码风格，包括缩进，空格的使用，有了进一步的认知和运用；
3. 另外还就是一种思想：面向对象思想，真的很重要，包括新开发的任务上也运用上了，不过水平有限，也只是简单的运用而已；

好了，很久没记录什么了，也快放假回去过年了，虽然最近烦心事多，还是要好好努力下去不是，30岁或许是道砍，也或许不是，端看自己怎么去看待和对待自己的人生了，多年来的感受只有一点：做自己最热爱的事情，让你能彻夜不眠还乐在其中的事情，那才是人生的乐趣，一味的为了生活而生活何尝不是行尸走肉般的活着。

给自己加把油，加油！

这一年来很艰辛，也很感谢我的兄弟朋友们能一直给与我帮助和鼓励，感谢你们！

最后感谢我的老婆，这几年不管风雨不管中间有多少苦难都不离不弃从无怨言，还一直鼓励着我，同时还给我带来一个很可爱的小闺女，谢谢我的老婆，有你的陪伴和鼓励，我会一直努力下去，加油！

2017年，我来了，哈哈哈哈！