文章目录
- 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 -->
- 捕获先执行，事件处理函数后执行：–事件捕获的执行点优于/早于事件处理函数（事件绑定函数），
- 捕获是从外到里，事件处理函数是从里到外
这样就增加了在事件处理之前的一个操作；
