微信小程序开发3—

事件处理

index.wxml

<!--index.wxml-->
<view bindtap="viewTapHandle"><button bindtap="tapHandle">click me</button>
</view>

index.js

//index.js
//获取应用实例
const app = getApp()Page({// data// on xxx// 定义用于界面层的事件处理函数tapHandle(e){// e 指的是事件参数console.log(e)},viewTapHandle (e){console.log(1,e)}
})

解决方案：通过 catchcap 绑定的事件不会有冒泡

<!--index.wxml-->
<view bindtap="viewTapHandle"><!-- <button bindtap="tapHandle">click me</button> --><!-- 通过 catchcap 绑定的事件不会有冒泡 --><button catchtap="tapHandle">click me</button>
</view>

bindtap属性只能去指定函数的名字，并不能写一个表达式

params.wxml

<!--pages/params/params.wxml-->
<!-- 可以通过  data-xx  属性，给 事件处理函数 传递额外的参数 -->
<view><text>item 1 </text><button bindtap="removeHandle" data-id="1">remove</button>
</view>
<view><text>item 2 </text><button bindtap="removeHandle" data-id="2">remove</button>
</view>
<view><text>item 3 </text><button bindtap="removeHandle" data-id="3">remove</button>
</view>
<view><text>item 4 </text><button bindtap="removeHandle" data-id="4">remove</button>
</view>

params.js

// pages/params/params.js
Page({removeHandle(e){console.log(e)}
})

单向数据流

index.wxss

/**index.wxss**/
input{border: 1px solid #ccc;margin: 20px;
}

index.wxml

<!--index.wxml-->
<text>{{foo}}</text>
<input value="{{foo}}"  bindinput="inputChangeHandle"  />

index.js

//index.js
//获取应用实例
const app = getApp()Page({data:{foo:'hello wechat app'},inputChangeHandle(e){// e.target  当前文本框console.log(e.detail.value)//将界面上的数据再次同步回 数据源上this.data.foo=e.detail.value//setData  1. 改变数据源//         2. 通知框架，数据源变了，需要重新渲染页面this.setData({foo:e.detail.value})}
})

WXSS vs CSS

rpx 可以根据屏幕宽度进行自适应。规定屏幕宽度为750 rpx 。

导入样式。公用样式是放在公共目录下的

app.wxss 是所有的页面都会用到的样式

@import "../../common.wxss"

微信小程序开发3——事件处理相关推荐

自学微信小程序开发第二天-事件处理、数据流
自学微信小程序开发第二天-事件处理.数据流事件处理绑定冒泡事件阻止冒泡事件互斥事件事件传参事件对象的属性数据流实例:登录页面案例之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...
python开发微信小程序-Python 开发者的微信小程序开发实践
导读在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
现学现卖微信小程序开发（二）
现学现卖微信小程序开发(一) 现学现卖微信小程序开发(三):引入Rx,为小程序插上翅膀一个Todo应用的小程序版好的,那么下一步我们就先照猫画虎,新建一个todos文件夹,然后一套四样同名文件准备 ...
微信小程序开发之路（一）
今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点.在开始之前先了解下微信小程序是个什么东西吧. 微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mi ...
微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发系列二：微信小程序的视图设计
大家如果跟着我第一篇文章微信小程序开发系列一:微信小程序的申请和开发环境的搭建一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列 ...
【微信小程序开发•系列文章七】websocket
2019独角兽企业重金招聘Python工程师标准>>> 为什么需要websocket? 传统的实时交互的游戏,或服务器主动发送消息的行为(如推送服务),如果想做在微信上,可能你会使用 ...
微信小程序开发入门篇
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的& ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...

微信小程序开发3——事件处理

事件处理

单向数据流

WXSS vs CSS

微信小程序开发3——事件处理相关推荐

最新文章

热门文章