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

Posted 若叶岂知秋vip

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序，学习笔记框架，视图层相关的知识，希望对你有一定的参考价值。

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

学习链接：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年，我来了，哈哈哈哈！








以上是关于微信小程序，学习笔记框架，视图层的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序入门笔记6（视图层）

微信小程序学习笔记-2-常用组件介绍

微信小程序视图层WXML_小程序条件渲染

微信小程序框架

微信小程序框架

微信小程序学习Course 2 事件