1. 小程序中常用的事件

1. tap bindtap或者bind:tap 类似于HTML中的点击事件
2. input bindinput或者bind:input 文本框的输入事件
3. change bindchange或bind:change 状态改变的事件

1.1 bindtap和catchtap的区别

bindtap事件会发生事件往上冒泡，catchtap会阻止事件冒泡

2. 小程序传承的方法

2.1 属性绑定传参

   1. 可以使用data-属性传递参数
   <view bindtap="playTap" data-name="cowBoy" data-like="羽毛球"></view>
    
   2.获取值
   playTap:function(e) {
      console.log(e.currentTarget.dataset);    
      // {name:"cowBoy",like:"羽毛球"}
   }

注意：data-中，不允许有大写字母，且不能存放对象

2.2 声明式导航传参

navigate 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：参数与路径之使用 ? 分隔参数键与参数值用 = 相连，不同参数用 & 分隔

<navigator url="/pages/message/message?name=zs&age=20">消息页面</navigator>

3. 全局样式和局部样式

全局样式：在 app.wxss 文件中定义的样式为全局样式，作用于每一个页面。
局部样式：在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。

注意：

当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式。
当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。

4. 条件渲染

4.1 wx:if

在小程序中，使用 wx:if="{{ condition }}" 来判断是否需要渲染该代码块，当wx:if={{true}}时候显示，false时则隐藏。

<view wx:if="{{ condition }}">True</view>
<!-- 也可以使用 wx:elif 和 wx:else 来添加判断 -->

<view wx:if="{{ type === 1 }}">男</view>
<view wx:elif="{{ type === 2 }}">女</view>
<view wx:else>保密</view>

结合标签使用 wx:if

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性。标签只起包裹作用，不参与页面渲染。

<block wx:if="{{true}}">
<view>view1</view>
    <view>view2</view>
</block>

4.2 hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的现实与隐藏

<view hidden="{{ condition }}">条件为 true 隐藏，条件为 false 显示</view>

4.3 wx:if 与 hidden 比较

wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 通过控制样式的方式（display： none/block）控制元素的现实与隐藏

频繁切换是，建议使用 hidden，减少重绘与回流

控制条件复杂时，建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换（开发当中，考虑性能更好）

5. 自定义组件

一般情况下，自定义组件在components 文件中，首先创建文件夹，然后右键选中components 创建与文件夹相同的组件。

6. 路由跳转

注意：（小程序中页面栈最多十层，我们在开发微信小程序中，页面跳转时要考虑页面栈问题）

wx.switchTab(Object object)

只能跳转到tabBar页面，并关闭其他所有非tabBar页面
wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面
wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

微信小程序笔记