# 微信小程序--交互 目录结构 [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> ```