绑定组件事件处理函数:
bindtap
<view id="tap" data-hi="wechat" bindtap="tapName">点击</view>
Page({
tapName:function(event){
console.log(event)
}})
冒泡和不冒泡
bind时间绑定不会阻止冒泡事件,catch事件绑定可以阻止冒泡事件。
(bindtap/catchtap)
<view id="outter" bindtap="handletap1">
outer view
<view id="middle" catchatap="handletap2">
middle view
<view id="inner" bindtap="handltap3">
inner view
</view>
</view>
</view>
模板引用
wxml提供两种文件引用方式import、include
import 在文件中使用目标文件定义的template,但是不会import目标文件中的import的template。
main.wxml
<template name="main">
<p>main wxml{{main}}</p>
</template>
index.wxml
<import src="main.wxml"/>
<template is="main" data="{{main:'native'}}"/>
include可以将目标文件除了<template/>的整个代码引入。相当于拷贝到include位置上。
index.wxml
<include src="header.wxml"/>
<view>body</view>
<include src="footer.wxml"/>
***********WXSS*******************
扩展特性
尺寸单位:
rpx:750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
1rem = (750/20)rpx
wxss导入wxss:@import
main.wxss
.h3{font-size:39px;}
index.wxss
@import "main.wxss";
.h5{color:#fff;}
内联样式:
<view style="color:{{color}};"/>
<view class="normaClass"/>