微信小程序学习三之 事件绑定传参 及 样式引入

微信小程序事件绑定通过 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目前支持的选择器主要有：

下一篇将介绍微信小程序自定义组件及组件之间的通信。