微信小程序基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

一、事件冒泡如何处理

	在微信小程序中的事件绑定有两种 一种是 bindtab 来绑定点击事件,但是bindtap是无法处理事件冒泡
	而第二种catchtap 也可以来绑定点击事件 ,可以用来解决事件冒泡 

下面是案例

<view class="pre" bindtap="pre">{
  {a}}
<!-- 不阻止事件冒泡 -->
<view class="chil"  bindtap="chil">{
  {b}}</view>
<view>{
  { utils.priceFormat(160)}}</view>
</view>



触发事件我也写一下
 pre(e){
console.log('pre',e);
 },
 chil(e){
  console.log('chil',e);
  // e.stopPropagation()
 },

这就是上面这段代码的样式,当我点击你真牛这一块的时候 控制台就会输出

所以我们只需要触发chil 这个事件,但是pre 的事件也一起被触发了,所以我们要处理这个事件冒泡,
如何处理事件冒泡

<view class="pre" bindtap="pre">{
  {a}}
<!-- 阻止冒泡catchtap-->
<view class="chil"  catchtap="chil">{
  {b}}</view>
<view>{
  { utils.priceFormat(160)}}</view>
</view>

``

这一块我把bindtap 转换为了 catchtap 这样的话我们怎么点"你真牛"这个区域,也只会弹出
![在这里插入图片描述](https://img-blog.csdnimg.cn/52aa7b8b048f49288e363f2fddae9d74.png)
所以这样就处理了事件冒泡

二.小程序的模板

这边我们根据官方文档来一波演示
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
我用代码来实现

<template >
<view class="pre" bindtap="pre">{
   {
   a}}
<!-- 阻止冒泡catchtap-->
<view class="chil"  catchtap="chil">{
   {
   b}}</view>
<view>{
   {
    utils.priceFormat(160)}}</view>
</view>
</template>

这一块就是简单的一个模板

然后我们可以通过name属性来给这个模块命名,直接上代码

//我们这里给这个template 命名为hah
<template name="hah">
<view class="pre" bindtap="pre">{
   {
   a}}
<!-- 阻止冒泡catchtap-->
<view class="chil"  catchtap="chil">{
   {
   b}}</view>
<view>{
   {
    utils.priceFormat(160)}}</view>
</view>
</template>

那如何使用模板呢, 我们可以通过is属性来声明自己需要使用的模板 我们还可以通过data属性想模板中传值
看代码