您的位置：首页 > 移动开发 > 微信开发

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

2017-01-06 17:14 831 查看

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

学习链接：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'
}
});

普通绑定：

<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>

模版（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

原生事件属性列表：

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

：相对于整个文档而言，距离文档左上角的

和

轴的距离；

clientX

clientY

：相对于可是区域而言，

xy

轴的距离

CanvasTouch

对象：

identifier

: 同上；

：这个只有一个坐标，即相对画布左上角而言的坐标；

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

事件类型：冒泡和非冒泡

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

touchstart: 手指刚碰触到屏幕的时候触发的事件；

touchmove：手指触摸后移动时触发；

touchcancel:手指触摸动作被打断，即非正常退出触摸，如来电或短信等；

touchend：手指触摸结束；

tap：手指触摸，即点击事件，触摸即离开；

longtap：手指触摸后超过350ms再离开，会被判定为长按。

非冒泡事件

<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>

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

点击 view2 只会调到 f2；

点击 view1 只会调到 f1；

事件总结：

事件对象：

event

;

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

事件绑定：

bindtap

bindtouch*

;

事件源和触发源：

event.currentTarget

和

event.target

;

a.

id

：事件组件对象的

id

；

b.

target

：自定义属性集合

dataset

（属性定义：

data-my-name

，使用：

event.target.dataset.myName

）;

c.

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点多下班，周六还要加班。

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

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

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

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

槽点3：代码风格，代码格式，代码规范，规范，规范啊，重要的事情说三遍，包括本公司的代码，和大多数其他厂家的代码，代码几乎没有任何规范，格式缩进命名等等，每次看到那种代码，我真想跳楼，

本来就一个很小的BUG，因为代码问题，硬是要花半天甚至一天才能找到问题点，然后发现其实就是个变量用错地方，或者是哪个单词写错了。

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

变量名可以稍微长点（不能太长哦，:-)），但一定要表达清楚其意义，让人一看到就知道是干什么的（继续吐槽：全局变量漫天飞，还命名毫无语义感，不找找还真不知道是干嘛的，另外也很少见过全局变量用一种约定方式去定义，比如说：前面统一加上个公司英文符号也好撒，或者你前面加个

g/global

什么的也好啊，个人比较喜欢用

开头去定义全局变量）；

代码风格，包括缩进，空格的使用，有了进一步的认知和运用；

另外还就是一种思想：面向对象思想，真的很重要，包括新开发的任务上也运用上了，不过水平有限，也只是简单的运用而已；

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

给自己加把油，加油！

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 微信框架微信小程序 Javascript

相关文章推荐

新的分享

章节导航

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