# 微信小程序--交互 目录结构
[toc]
---
## 微信小程序--交互
### 一、数据交互（初始数据）
* data 是页面第一次渲染使用的初始数据。
* 页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
* 可以在 {{ }} 内进行简单的运算，数据绑定
> js示例：
```js
Page({
data: {
title: '射雕',
array: [
{'id':1,'name':'欧阳克'},
{'id':2,'name':'黄蓉'},
{'id':3,'name':'郭靖'}
]
}
})
```
> wxml示例：
```html
<view>标题：{{ title }}</view>
<view>ID：{{ array[0].id }} --- 姓名：{{ array[0].name }}</view>
```
---
### 二、字符串运算
```html
<view>{{ '欧阳克'+'黄蓉' }}</view>
```
---
### 三、算数运算
```html
<view>{{ 1+1 }}</view>
```
---
### 四、三元运算
> js示例：
```js
Page({
data: {
title: '射雕'
}
})
```
> wxml示例：
```html
<view>姓名：{{ title ? '欧阳克' : '黄蓉' }}</view>
```
---
### 五、逻辑判断
> js示例：
```js
Page({
data: {
title: '射雕',
array: [
{'id':1,'name':'欧阳克'},
{'id':2,'name':'黄蓉'},
{'id':3,'name':'郭靖'}
],
number : 10
}
})
```
> wxml示例：
```html
<view wx:if="{{ title }}">标题：{{ title }}</view>
<view wx:if="{{ number > 10 }}">人数：{{ number }}</view>
<view wx:if="{{ number > 5 }}">1</view>
<view wx:elif="{{ number > 2}}">2</view>
<view wx:else>3</view>
```
---
### 六、循环
* 使用 wx:for-item 可以指定数组当前元素的变量名
* 使用 wx:for-index 可以指定数组当前下标的变量名
> js示例：
```js
Page({
data: {
title: '射雕',
array: [
{'id':1,'name':'欧阳克'},
{'id':2,'name':'黄蓉'},
{'id':3,'name':'郭靖'}
]
}
})
```
> wxml示例：
```html
<view wx:if="{{ title }}">标题：{{ title }}</view>
<view wx:for="{{ array }}">ID：{{ item.id }} --- 姓名：{{ item.name }}</view>
<view wx:for="{{ array }}" wx:for-index="idx" wx:for-item="itemName">下标：{{idx}} --- ID：{{ itemName.id }} --- 姓名：{{ itemName.name }}</view>
```
---
### 七、`bindtap` 绑定自定义事件
* 事件是视图层到逻辑层的通讯方式
* 事件可以将用户的行为反馈到逻辑层进行处理
* 事件对象可以携带额外信息，自定义传值：data- 进行传值
> js示例：
```js
Page({
zidingyi(){
console.log('我是自定义方法');
},
ouyangke(e){
console.log(e);
}
})
```
> wxml示例：
```html
<view bindtap="zidingyi">自定义方法</view>
<view bindtap="ouyangke" data-id="1" data-name="欧阳克">自定义方法带传值</view>
```
---
### 八、动态设置初始数据
* this 代表当前文件
* this.setData 设置data里的数据
> js示例：
```js
Page({
data: {
title: '射雕'
},
zidingyi(){
this.setData({
title : '欧阳克'
})
}
})
```
> wxml示例：
```html
<view bindtap="zidingyi">标题：{{ title }}</view>
```
---
### 九、block组件
* block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
> js示例：
```js
Page({
data: {
title: '射雕'
},
zidingyi(){
this.setData({
title : '欧阳克'
})
}
})
```
> wxml示例：
```html
<block wx:if="{{title}}">
<view bindtap="zidingyi">标题：{{ title }}</view>
</block>
```
---
### 十、组件属性：hidden
* hidden 组件带hidden属性，会被隐藏，但组件存在
* wx:if 惰性的，如果在初始渲染条件为 false，框架什么也不做，组件不存在
> wxml示例：
```html
<view wx:if="{{title}}">标题：{{ title }}</view>
<view hidden>标题：欧阳克</view>
```
---
### 十一、组件 绑定自定义事件
* 小程序的组件有很多默认动作，可以绑定自定义事件
#### 1、input组件
**属性**|**类型**|**描述**
---|---|---
bindinput|eventhandle|键盘输入时触发
bindfocus|eventhandle|输入框聚焦时触发
bindblur|eventhandle|输入框失去焦点时触发
bindconfirm|eventhandle|点击完成按钮时触发
>> js示例：
```js
Page({
a(){
console.log('键盘输入时触发');
},
b(){
console.log('输入框聚焦时触发');
},
c(){
console.log('输入框失去焦点时触发');
},
d(){
console.log('点击完成按钮时触发');
}
})
```
>> wxml示例：
```html
<input bindinput="a" bindfocus="b" bindblur="c" bindconfirm="d" />
```
#### 2、picker组件
**属性**|**类型**|**描述**
---|---|---
bindcancel|eventhandle|取消选择时触发
bindchange|eventhandle|value 改变时触发 change 事件
>> js示例：
```js
Page({
a(){
console.log('取消选择时触发');
},
b(e){
console.log('value 改变时触发 change 事件');
console.log(e);
}
})
```
>> wxml示例：
```html
<picker mode="region" bindcancel="a" bindchange="b">
<view>请选择：</view>
</picker>
```
#### 3、checkbox-group组件、radio-group组件
**属性**|**类型**|**描述**
---|---|---
bindchange|eventhandle|value 改变时触发 change 事件
>> js示例：
```js
Page({
a(e){
console.log('value 改变时触发 change 事件');
console.log(e);
}
})
```
>> wxml示例：
```html
<checkbox-group bindchange="a">
<checkbox value="1" checked />欧阳克
<checkbox value="2" color="red" />黄蓉
<checkbox value="3" disabled />郭靖
</checkbox-group>
<radio-group bindchange="a">
<radio value="1" checked="true" />欧阳克
<radio value="2" color="red" />黄蓉
<radio value="3" />郭靖
<radio value="4" />杨康
</radio-group>
```
- 序言
- PHP基础
- 认识PHP
- 环境安装
- PHP语法
- 流程控制
- PHP数组
- PHP函数
- PHP类与对象
- PHP命名空间
- PHP7新特性
- PHP方法库
- PHP交互
- 前后端交互
- 项目常规开发流程
- MySQL数据库
- 会话控制
- Ajax分页技术
- 细说函数
- 类与对象
- 对象进阶
- 类与对象进阶
- OOP面向对象
- 设计模式
- 路由与模板引擎
- 异常类
- PHP爬虫
- PHP抓取函数
- PHP匹配函数
- 正则表达式
- PHP字符串函数
- 抓取实战
- PHP接口
- 了解接口
- PHP插件
- PHPSpreadsheet
- ThinkPHP6
- 安装
- 架构
- 数据库
- 数据库操作
- 视图
- 模版
- 模型
- 杂项
- 命令行
- 交互
- 微信小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- 百度小程序
- 介绍
- 配置
- 组件
- 交互
- API
- 其他知识
- Linux
- 服务器上线流程
- 安装svn
- MySQL
- 认识MySQL
- MySQL函数
- 杂项
- composer依赖管理工具