标签：用户信息 推荐 fse 表示 asc 成就 公司 oba print
学习链接：http://www.w3cschool.cn/weixinapp/
因为其实并非原创，但是并没有什么好的类别可选，所以修改成：“翻译”了。
文档结构介绍
--- [D] pages
--- [D] utils
--- [F] app.js
--- [F] app.json
--- [F] app.wxssApp
应用程序全局实例，在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;{{}}）和条件渲染（wx:if）使用两个嵌套的大括号方式
Page({
data: {
name: ‘lizc‘,
index: 0,
condition: true,
flag: 0,
a: 1,
b: 2,
c: 3,
str: ‘world‘
}
});普通绑定：
<view>{{name}}</view>
组件属性绑定: 必须使用引号引起来，在js改变index值的时候，页面会自动刷新最新值
<view id="item-{{index}}"></view>
控制属性：即属性值是需要通过满足一定条件达到目的
<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>使用<block>块标签来使用条件判断控制多个组件的行为，<block>只起到分组的作用，并不会真的渲染到出来
<block wx:if="{{flag > 0}}">
<view>组件一</view>
<view>组件二</view>
</block>算术运算
<view>{{a}} + {{b}} + c</view>
<view>‘hello‘ + {{str}}</view>对象绑定
其实和普通类型绑定差不多
<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>用来定义代码片段，完成之后可以在其他地方通过模版直接套用该模版中组件。
模版定义：
<!--
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
原生事件属性列表：
type: 即当前事件类型（tap / touch）；currentTarget：表示当前组件信息集合；target: 通过打印看了下，console.log( event.currentTarget == event.target ); 结果：false，说明 currentTarget 和 target 不是同一个对象，但是里面的东西应该都是当前目标的属性(不是很确定)；看文档解释是：触发事件的组件的属性集合（currentTarget是当前，target是触发事件的组件，不是很明白区别在哪？？）timeStamp: 这个时间也不知道是啥，应该不是点击动作时间也不是响应时间，有2.8秒之久。（理解错误，正确：事件生成的时间戳）自定义事件对象属性列表：
detail: 当前组件的坐标(x, y)；触摸事件对象属性列表：
touches：这个接触的对象数组，难道是和事件冒泡有关？表示网上冒泡的父对象集合？？瞎猜，应该是：当前触摸事件的触摸点信息数组；changedTouches: 应该和上面的touches有联系，解释为：当前变化的触摸点信息的数组；以下是各事件属性的内容，很容易理解
target: id, dataset, offsetLeft, offsetTop，dataset要解释下：表示事件源组件上的自定义属性data-的集合；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‘; // 而驼峰式写法会被转成全小写形式因此推荐使用 - 连接符去书写自定义数据属性
touches：触摸点数组，触摸点对象 Touch 或 CanvasTouch 的集合，表示当前页面上所有触摸点的集合，包含属性：
Touch 对象
identifier： 触摸点标识符，类型：Number，应该是个类似标记的东西，或者索引之类的，唯一；pageX, pageY：相对于整个文档而言，距离文档左上角的 x 和 y 轴的距离；clientX, clientY：相对于可是区域而言，xy 轴的距离 CanvasTouch对象：
identifier: 同上；x, y：这个只有一个坐标，即相对画布左上角而言的坐标；changedTouches：表示发生变化的触摸点对象集合，比如该触摸点发生了touchstart, touchmove, touchend, touchcancel变化；
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： 事件生成时的时间戳；我还把它当成了程序运行时间~~~~, 也就是该页面打开到事件触发时的这段时间。
事件类型：冒泡和非冒泡
冒泡事件：（除以下冒泡事件之外的其他事件均为非冒泡事件）
非冒泡事件
<form/>标签的submit事件<input/>标签的input事件<scroll-view/>标签的scroll事件特殊事件：
<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>
事件总结：
event;bindtap, bindtouch*;event.currentTarget 和 event.target; id：事件组件对象的id； target：自定义属性集合 dataset（属性定义：data-my-name，使用：event.target.dataset.myName）; offsetLeft/offsetTop： 事件组件的 left/top 实际值。event.timeStamp，单位：（ms）；event.touches（Touch: identifier, pageX/pageY, clientX/clientY; CanvasTouch: identifier, x/y ）；event.changedTouches；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点多下班，周六还要加班。
忍不住要吐槽，不吐不快。。。。。。
新开发任务总算完结了，后期测试也算告终，其实也不是什么复杂的东西，只是今年刚进公司对公司业务这块并不是非常熟悉，所以花了点时间。现在搞完了自己也算有点成就感，嘿嘿~~！！！
槽点2：来了快一年，接触过无数厂家的前端代码，有些写的复杂的让人头疼，给人感觉就是：我就是要写的这么复杂，甚至对象嵌套多达6-7层（Σ( ° △ °|||)︴），显得我牛逼呀，哈哈~~~，是SB吧 - -！。还有一些厂家代码确实非常不错，对象，原型，闭包，命名等等，都是用的溜溜转，也学到不少东西。
槽点3：代码风格，代码格式，代码规范，规范，规范啊，重要的事情说三遍，包括本公司的代码，和大多数其他厂家的代码，代码几乎没有任何规范，格式缩进命名等等，每次看到那种代码，我真想跳楼，
本来就一个很小的BUG，因为代码问题，硬是要花半天甚至一天才能找到问题点，然后发现其实就是个变量用错地方，或者是哪个单词写错了。
这一年来，经历了很多事情和看了很多代码，对自己要求也严格了
g/global什么的也好啊，个人比较喜欢用g开头去定义全局变量）；好了，很久没记录什么了，也快放假回去过年了，虽然最近烦心事多，还是要好好努力下去不是，30岁或许是道砍，也或许不是，端看自己怎么去看待和对待自己的人生了，多年来的感受只有一点：做自己最热爱的事情，让你能彻夜不眠还乐在其中的事情，那才是人生的乐趣，一味的为了生活而生活何尝不是行尸走肉般的活着。
给自己加把油，加油！
这一年来很艰辛，也很感谢我的兄弟朋友们能一直给与我帮助和鼓励，感谢你们！
最后感谢我的老婆，这几年不管风雨不管中间有多少苦难都不离不弃从无怨言，还一直鼓励着我，同时还给我带来一个很可爱的小闺女，谢谢我的老婆，有你的陪伴和鼓励，我会一直努力下去，加油！
2017年，我来了，哈哈哈哈！
标签：用户信息 推荐 fse 表示 asc 成就 公司 oba print
原文地址：http://blog.csdn.net/gccll/article/details/54140177
