微信小程序-事件绑定、样式引入、模板引用

绑定组件事件处理函数：

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"/>