视图层

视图层有wxml何wxss组成将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

wxml :WXML（WeiXin Markup Language）是框架设计的一套标签语言

一.数据绑定

动态数据来源： Page({})的data:{}
绑定目标： Mustache 语法
作用对象：标签内容<view> </view>; 组件属性： <block wx:for-item=""></view>
Mustache 语法在微信小程序中的另一个用途：用在关键字上： <checkbox checked="false" ></checkbox>,注意此处去掉大括号会编译为字符串，达不到目的

运算：可以在中进行简易的运算，参考vue的数据绑定

    // 三目运算
    <view hidden=""> Hidden </view>
  
    // 算术运算
    <view>  +  + d </view>
    Page({
    data: {
        a: 1,
        b: 2,
        c: 3
    }
    })
  
    // 逻辑判断
    <view wx:if=""> </view>
    // 字符串运算
    <view>hello</view>
    Page({
    data:{
        name: 'MINA'
    }
    })
  
    // 组合运算
    <template is="objectCombine" data=""></template>
    Page({
    data: {
        a: 1,
        b: 2
    }
    })
    // 最终组合成的对象是 {for: 1, bar: 2}
  
    ......

二.数据渲染

列表渲染

wx.for=””, 默认送了两个参数：和 , 分别为数组元素下标和对应的数组元素

    <view wx:for="">
        : 
    </view>
   
    Page({
    data: {
        array: [{
        message: 'foo',
        }, {
        message: 'bar'
        }]
    }
    })

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名：

    <view wx:for="" wx:for-item="i">
        <view wx:for="" wx:for-item="j">
            <view wx:if="">
                 *  = 
            </view>
        </view>
    </view>

block： wx:for, 渲染一个包含多节点的块：

    <block wx:for="">
        <view> : </view  >
        <view>  </view>
    </block>

wx:key ??? 取值为 this(指向for循环的item本身，并且item不会变化的)，或者string，为循环中对象的键

条件渲染
- wx:if=””
```
    <view wx:if=""> True </view>
     
    也可以用 wx:elif 和 wx:else 来添加一个 else 块：
    <view wx:if=""> 1 </view>
    <view wx:elif=""> 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属性，作为模板的名字。然后在内定义代码片段
```
    
    <template name="msgItem">
        <view>
            <text> :  </text>
            <text> 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="">
        <template is=""/>
    </block>
```
- 模板作用域：模板有自己的作用域，只能使用data传入的数据
四.事件
- 小程序的事件：
  1. 事件是视图层到逻辑层的通讯方式。
  2. 事件可以将用户的行为反馈到逻辑层进行处理。
  3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  4. 事件对象可以携带额外信息，如 id, dataset, touches。
- 事件的具体用法
  1. 在组件中绑定一个事件处理函数<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
  2. 在Page的定义中写上相应的处理函数，参数是event
```
    Page({
        tapName: function(event) {
            console.log(event)
        }
    })
```
- 事件分类：冒泡事件(事件向父组件传递)和非冒泡事件
  1. wx的冒泡事件：
    - touchstart — 手指触摸动作开始
    - touchmove — 手指触摸后移动
    - touchcancel — 手指触摸动作被打断，如来电提醒，弹窗
    - touchend — 手指触摸动作结束
    - tap — 手指触摸后马上离开
    - longtap — 手指触摸后，超过350ms再离开
  2. 未作特殊说明的都是非冒泡事件
- ```
- 事件绑定：事件绑定的写法同组件的属性，以 key、value 的形式。
- key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
- value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
- bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
- 事件对象：当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。当组件触发事件时，逻辑层 ```
绑定该事件的处理函数会收到一个事件对象。打印事件event即可查看事件对象
1. type: 事件类型
2. timeStamp: 从打开页面到触发事件所经过的毫秒数
3. target：触发事件的源组件，包含组件ID，触发事件的tagName，dataset(事件源组件上由data-开头的自定义属性组成的对象集合)
4. currentTarget：事件绑定的当前组件，属性同上
5. touches： touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。表示当前停留在屏幕上的触摸点。
  
  touch对象属性：
  - identifier — 触摸点的标识符
  - pageX, pageY — 距离文档左上角的距离，文档的左上角为原点
  - clientX, clientY — 距离页面可显示区域（屏幕除去导航条）左上角距离 CanvasTouch 对象:
  - identifier — 触摸点的标识符
  - x,y — 距离 Canvas 左上角的距离
6. changedTouches：changedTouches 数据格式同 touches。表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）
7. detail：自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。
五.引用：WXML 提供两种文件引用方式import和include。
- import:import可以在该文件中使用目标文件定义的template
```
    // item.wxml    
    <template name="item">
        <text></text>
    </template>
   
    // index.wxml  
    <import src="item.wxml"/>
    <template is="item" data=""/>
   
    // import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
```
- include: include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置
```
    
    <include src="header.wxml"/>
    <view> body </view>
    <include src="footer.wxml"/>
   
    
    <view> header </view>
   
    
    <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:;" />)、class(同css3) 属性来控制组件的样式。 + 全局样式和局部样式： app.wxss 和 page.wxss (后者样式会覆盖前者)

兼容性解决：

问题来源：低版本的微信程序不兼容新的小程序API，

解决方法：判断是否支持用户的手机。

    if (wx.openBluetoothAdapter) {
        wx.openBluetoothAdapter()
    } else {
        // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
        wx.showModal({
            title: '提示',
            content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
    }

小程序学习笔记视图层

视图层

wxml :WXML（WeiXin Markup Language）是框架设计的一套标签语言

一.数据绑定

二.数据渲染

三.模板：

四.事件

五.引用：WXML 提供两种文件引用方式import和include。

wxss:WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

兼容性解决：

JSON:配置文件

js:和其他的一样

CATALOG

FEATURED TAGS

FRIENDS