微信小程序事件绑定通过 bind 进行实现,如 bindTap、bindInput、bindChange 等,具体的事件绑定需要查看微信小程序组件(微信小程序组件)的事件属性。
事件绑定及传参
- 不含参数传递
// wxml button按钮的点击事件绑定
<button bindTap="getName"></button>
// js
Page({
data: {
},
getName(){
console.log('获取到name了')
}
})
- 参数传递:在标签中定义data属性:
data-参数名="参数值"
,js中通过事件对象拿到参数:e.currentTarget.dataset
,所有的参数将会以对象键值对的方式存储在这里面。
注意:一定不可以通过括号传参!比如:bindTap="getName('jack')"
,微信小程序会将getName('jack')
整体作为一个方法名,而不是认为getName是方法名。
// wxml button按钮的点击事件绑定
<button bindTap="getName" data-name="{{name}}"></button>
// js
Page({
data: {
name: 'jack'
},
getName(e){
// e为事件对象
console.log(`name是:${e.currentTarget.dataset.name}`)
}
})
微信样式文件
微信样式文件后缀为.wxss
,和css相比,wxss扩展的特性有:
-
增加响应式单位rpx
rpx
可以根据屏幕宽度进行自适应,且规定屏幕宽度为750rpx
,如在iPhone6上,屏幕宽度为375px
,那么375px = 750rpx
,则1px = 2rpx
-
样式导入
wxss支持通过@import
进行样式导入功能,但支支持相对路径。
// common.wxss
.active {
color: red
}
// app.wxss
@import './style/common.wxss'
注意:wxss不支持 *
通配符,因此下面的代码是无效的
* {
padding: 0,
margin: 0
}
可以改用为:
/* 微信小程序不支持通配符 * */
page, view, text, swiper, swiper-item, image, navigator {
padding: 0;
margin: 0;
box-sizing: border-box;
}
wxss目前支持的选择器主要有:
下一篇将介绍微信小程序自定义组件及组件之间的通信。