视图层
视图层有wxml何wxss组成
将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
wxml :WXML（WeiXin Markup Language）是框架设计的一套标签语言
一.数据绑定
动态数据来源： Page({})的data:{}
绑定目标： Mustache 语法 {{ }}
作用对象： 标签内容
<view> {{ logs }} </view>; 组件属性：<block wx:for-item="{{ logs }}"></view>Mustache 语法在微信小程序中的另一个用途： 用在关键字上：
<checkbox checked="{{ false }}" ></checkbox>,注意此处去掉大括号会编译为字符串，达不到目的运算： 可以在{{}}中进行简易的运算，参考vue的数据绑定
// 三目运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
// 算术运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
// 逻辑判断
<view wx:if="{{length > 5}}"> </view>
// 字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
// 组合运算
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
// 最终组合成的对象是 {for: 1, bar: 2}
......
二.数据渲染
-
列表渲染
- wx.for=”{{ arr }}”, 默认送了两个参数： {{ index }} 和 {{ item }} , 分别为数组元素下标和对应的数组元素
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } })- 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"> <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"> <view wx:if="{{i <= j}}"> {{i}} * {{j}} = {{i * j}} </view> </view> </view>- block： wx:for, 渲染一个包含多节点的块：
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view > <view> {{item}} </view> </block>- wx:key ??? 取值为 this(指向for循环的item本身，并且item不会变化的)，或者string，为循环中对象的键
-
条件渲染
-
wx:if=”{{ condition }}”
<view wx:if="{{condition}}"> True </view> 也可以用 wx:elif 和 wx:else 来添加一个 else 块： <view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view> block: wx: if 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>- wx:if 和 hidden
-
1. wx: if是惰性的，只有在if条件改变时才会改变渲染，初始加载耗费性能较小，后续条件改变有更高的消耗，适合运行时条件不大可能会改变的渲染
2. hidden始终都会保持渲染，只是切换显示和隐藏，初始加载耗费性能较多，后续影响较小，适合频繁切换显示和隐藏
三.模板：
- 定义模板：使用name属性，作为模板的名字。然后在内定义代码片段
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
- 使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入（is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：）
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
- 模板作用域：模板有自己的作用域，只能使用data传入的数据
四.事件
-
小程序的事件：
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 id, dataset, touches。
-
事件的具体用法
- 在组件中绑定一个事件处理函数
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> - 在Page的定义中写上相应的处理函数，参数是event
- 在组件中绑定一个事件处理函数
Page({
tapName: function(event) {
console.log(event)
}
})
-
事件分类：冒泡事件(事件向父组件传递)和非冒泡事件
-
wx的冒泡事件：
- touchstart — 手指触摸动作开始
- touchmove — 手指触摸后移动
- touchcancel — 手指触摸动作被打断，如来电提醒，弹窗
- touchend — 手指触摸动作结束
- tap — 手指触摸后马上离开
- longtap — 手指触摸后，超过350ms再离开
未作特殊说明的都是非冒泡事件
-
-
- 事件绑定：事件绑定的写法同组件的属性，以 key、value 的形式。 - key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart - value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。 - bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。 - 事件对象： 当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。打印事件event即可查看事件对象
type: 事件类型
timeStamp: 从打开页面到触发事件所经过的毫秒数
target： 触发事件的源组件，包含组件ID，触发事件的tagName，dataset(事件源组件上由data-开头的自定义属性组成的对象集合)
currentTarget： 事件绑定的当前组件，属性同上
-
touches： touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。
touch对象属性：
- identifier — 触摸点的标识符
- pageX, pageY — 距离文档左上角的距离，文档的左上角为原点
- clientX, clientY — 距离页面可显示区域（屏幕除去导航条）左上角距离
CanvasTouch 对象: - identifier — 触摸点的标识符
- x,y — 距离 Canvas 左上角的距离
changedTouches：changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）
detail： 自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
五.引用：WXML 提供两种文件引用方式import和include。
- import:import可以在该文件中使用目标文件定义的template
// item.wxml
<template name="item">
<text>{{text}}</text>
</template>
// index.wxml
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
// import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
- include: include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
wxss:WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 具有 CSS 大部分特性,同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。与 CSS 相比我们扩展的特性有：
+ 尺寸单位
rpx: 规定屏幕宽度为750rpx，即宽度为375px的屏幕(iphone6)共有750个物理像素，则750rpx = 375px = 750物理像素
+ 样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
内联样式：框架组件上支持使用 style(<view style="color:{{color}};" />)、class(同css3) 属性来控制组件的样式。
+ 全局样式和局部样式： app.wxss 和 page.wxss (后者样式会覆盖前者)
兼容性解决：
问题来源： 低版本的微信程序不兼容新的小程序API，
-
解决方法： 判断是否支持用户的手机。
if (wx.openBluetoothAdapter) { wx.openBluetoothAdapter() } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) }
