小程序学习笔记-视图层

2018-12-13 本文已影响285人赵客缦胡缨v吴钩霜雪明

视图层

视图层有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传入的数据

四.事件

小程序的事件：
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}}</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: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
        })
    }

小程序学习笔记-视图层

视图层

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

一.数据绑定

二.数据渲染

三.模板：

四.事件

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

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

兼容性解决：

JSON:配置文件

js:和其他的一样

猜你喜欢

热点阅读