【微信小程序】3 - 数据绑定、模板引用、事件

文章目录

1、数据绑定
2、模板的操作和引用
3、微信小程序事件调用和原理操作

事件分类

布局：主要是弹性布局 + rpx

1、数据绑定

数据绑定：WXML中的一种数据呈现方式；
运用JS的data对象完成的WXML数据的动态显示

微信里没有window对象，没有dom模型结构，不能像在js里那样找到元素innerHTML;

<view>
<view>
姓名 : {{yourname}}
</view>

<!-- 基础数据绑定 -->
<!-- 直接写yourname 系统认为这是一个字符串，放在{{}}系统认为这是一个变量 -->
<view>
姓名 : {{'yourname'}}
<!-- {{}}里也可以放字符串，放'' 里就是字符串 -->
</view>
<view class='{{score <60 ? "color-red" : "color-green"}}'>
分数:{{score}}
<!-- 属性值也可以放变量，由变量就要有{{}}，且字符串要加''' -->
</view>
<view id='item-{{id}}'>
{{'学号：'+ num1 + num2}}
<!-- 字符串拼接 -->
</view>
-----------------------------
<view>
<checkbox checked='{{false}}'></checkbox>
<!-- 布尔值必须放在{{}}里，不然会被识别成字符串，不会转换成真假值 -->
</view>
<view>{{a}}{{b}}+{{c}}</view>
<!-- 在{{}}里面字符串和变量拼接要用+，在{{}}外面什么都不用，自己拼接 -->
<view>
{{'学校：'}}{{obj.school}}
</view>
<view>
爱好：{{favs[0]}}
</view>

-----------条件渲染--------------

<view wx:if='{{true}}'>
小刘的分数：
<!-- wx:if 认为所有的字符串都是真，所以表达式要放在{{}}里 -->
</view>

<view wx:if='{{score >= 80}}'>
优秀
</view>
<view wx:elif='{{score >= 60}}'>
及格
</view>
<view wx:else>
不及格
</view>
<!-- wx:if  / wx:elif  /wx:else -->
<block wx:if='{{false}}'>
11111
</block>
<!-- block: 不属于wxml的语法，只是条件渲染的一部分结构 
他是个内联元素，如果wx:if <block>里的内容才运行和显示，如果为false,则不显示，而且代码里也没有相关内容,解析的时候不做了
-->

<!-- wx:if  和 hidden 不同： wx:if 是惰性操作，外面不满足条件，里面就不执行 -->
-------------列表渲染--------------
<view wx:for='{{favs}}' wx:key="unique" wx:for-index='key' wx:for-item = 'value'>
<!-- {{index}}:{{item}} -->
{{key}}:{{value}}
</view>

<block wx:for='{{[yourname,score,obj.school]}}' wx:key="unique">
  <view>{{item}}</view>
</block>
<!-- 组合可以直接在{{}}里进行组合，构成新的对象或数组 -->

</view>

Page({
  /**
   * 页面的初始数据 ， 数据绑定的所有接口都由data 和外部对接
   */
  data: {
    yourname:'小刘',
    score:70,
    id:1,
    num1:'0708',
    num2:'3288',
    a:2,
    b:1,
    c:700,
    obj:{
      school:'矿大'
    },
    favs:['吃','玩','睡']
  },

})

2、模板的操作和引用

模板帮我们把某些模块进行一次定义，然后可以在各个地方调用；

把页面里重复使用的东西提取出来；

<!-- 定义模板:  name="studentInfo"   定义模板的名字 -->
<template name="studentInfo">
  <view>
    姓名：{{name}}
  </view>
  <view>
    年龄：{{age}}
  </view>
</template>

<!-- 调用模板 ： is="studentInfo"  使用哪个模板-->
<template is="studentInfo" data='{{name,age}}'></template>
<!-- 这是传的单个的数据（变量） -->
-------------传对象-------------------------
<template name="studentInfo1">
  <view>
    姓名：{{studentInfo1.name}}
  </view>
  <view>
    年龄：{{studentInfo1.age}}
  </view>
</template>


<template is="studentInfo1" data='{{studentInfo1}}'></template>
----对象结构传值----
<template name="studentInfo1">
  <view>
    姓名：{{name}}
  </view>
  <view>
    年龄：{{age}}
  </view>
</template>


<template is="studentInfo1" data='{{...studentInfo1}}'></template>
-----------传数组--------------------------
<template name="studentInfo2">
<block wx:for='{{studentInfoLists}}' wx:key='unique'>
  <view>
    姓名11：{{item.name}}
  </view>
  <view>
    年龄11：{{item.age}}
  </view>
</block>
  
</template>


<template is="studentInfo2" data='{{studentInfoLists}}'></template>

----数组结构传值----
<!-- 定义的时候不变 -->
<template name="studentInfo1">
  <view>
    姓名：{{name}}
  </view>
  <view>
    年龄：{{age}}
  </view>
</template>

<!-- 使用的时候遍历数组 -->
<block wx:for='{{studentInfoLists}}' wx:key='unique'>

<template is="studentInfo1" data='{{...item}}'></template>
</block>

-----根据值选择不同的模板 -------
<template name="studentInfo2">
  <view>
    name:{{name}}
  </view>
  <view>
    age:{{age}}
  </view>
</template>


<block wx:for='{{studentInfoLists}}' wx:key='unique'>
<template is="{{num % 2 === 0 ? 'studentInfo1' : 'studentInfo2'}}" data='{{...item}}'></template>
<!-- num是偶数，用模板studentInfo2 -->
</block>

--------- 引用模板文件 -------
<!-- 新建文件夹templates  把模板 xx.wxml 文件 放到这个文件夹里，然后引入 -->

<import src='/templates/temp1.wxml'/>
<!-- import 引入，引用没有继承性：a 引用b,b引用c  ，c不能直接在a中显示；不建议写模板嵌套 -->
<!-- import 有作用域的概念， -->

<template is="temp1" data='{{score,num}}'></template>

<!-- --------------引用 和 导入 ----------- -->
<!-- 引用是import
导入是include--不是把数据拿过去，而是把页面的一部分内容搬过来
也是在文件夹templates 中新建一个footer.wxml -->
<!-- import 引入的模板放在template标签里，这是include 导入的，而且导入的时候是在哪放就在哪引 -->
<include src='/templates/footer.wxml'/>

3、微信小程序事件调用和原理操作

js 事件调用模型
事件由3部分组成：事件源、事件监听、事件处理程序

微信小程序事件是视图层到逻辑层的通讯方式
事件是用户与微信小程序的交互的通讯接口
在JS中就有事件操作的概念，微信小程序的更加简便
小程序是单向的；

使用方式
以“bind+事件类型”或“catch+事件类型” 作为用户的事件绑定监听器，连接事件源和事件处理程序
事件处理程序写与JS函数中
注意:必须遵守微信小程序js对象的书写规范

bindtap 单触摸模式，单击；
bindlongtap 长按

bindtouchstart
bindtouchmove
bindtouchend
bindtouchcancel
touch是手指事件，手指放在手机屏幕上移动过程中的开始、移动、结束和取消

表单上面：
bindinput 对输入框改变时触发，通过event获得改变的值
移动端鼠标事件（悬停，移动到）是不存在的；

<text bindtap='func1'>点我</text>
<!-- 1、事件源是text，我们完成了一个事件的绑定（监听bindtap单击事件） 
2、一旦对事件源有触发，那么func1自动开始运行，
3. 运行的时候对事件源的操作，我们可以在func1中得到一个事件的回参event,event是系统给的；
-->
<text bindtap='{{eventFunc}}'>点我1</text>
<!-- 也可以绑定一个变量，变量值是事件名 -->

事件分类

冒泡和非冒泡
事件冒泡：bind开头的- 会执行向上冒泡

非事件冒泡：catch开头的 - 会阻止向上冒泡

<view id="outer" bindtap="handleTap1">
  outer view1
  <view id="middle" catchtap="handleTap2">
    middle view2
    <view id="inner" bindtap="handleTap3">
      inner view3
    </view>
  </view>
</view>
<!-- 
点击inner view3 触发：handleTap3 和 handleTap2
点击middle view2 触发：handleTap2 
点击outer view1触发：handleTap1 
 -->

事件捕获
事件捕获是在事件冒泡的基础上实现的反向操作，可以帮我们在事件冒泡之前再做一个事件的处理；

可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>
<!-- 点击里面的inner view 先触发外面的事件捕获handleTap2 ，再触发里面的事件捕获handleTap4 然后是内部的事件处理函数handleTap3 然后冒泡到外面的事件处理函数handleTap1 -->

捕获先执行，事件处理函数后执行：–事件捕获的执行点优于/早于事件处理函数（事件绑定函数），

捕获是从外到里，事件处理函数是从里到外

这样就增加了在事件处理之前的一个操作；

Eva3288

发布了57 篇原创文章 · 获赞 4 · 访问量 1万+

私信关注