# 必备技能

## 1.onLoad和onShow

| onLoad            | onShow                                         |
| ----------------- | ---------------------------------------------- |
| 监听页面加载            | 监听页面显示                                         |
| 一个页面只会调用一次        | 页面每次出现都会触发                                     |
| 参数中获取打开当前页面路径中的参数 | 参数中获取打开当前页面路径中的参数（app.js中例外，参数在options.query中） |

## 2.页面事件处理函数

| **onPullDownRefresh()**               | **onReachBottom()**                 | **onPageScroll(Object)**       |
| ------------------------------------- | ----------------------------------- | ------------------------------ |
| 监听用户下拉刷新事件                            | 监听用户上拉触底事件                          | 监听用户滑动页面事件                     |
| json中配置" enablePullDownRefresh": true | json中 设置触发距离`onReachBottomDistance` | scrollTop： 页面在垂直方向已滚动的距离（单位px） |
| wx.stopPullDownRefresh可以停止当前页面的下拉刷新。  | 在触发距离内滑动期间，本事件只会被触发一次               | --                             |

## 3.数据

```
// 使用数据
this.data.参数名
// 改变数据(数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）)
this.setData({
    参数名: 参数值
}, function() { // setData引起的界面更新渲染完毕后的回调函数
    
})
```

## 4.路由

| navigateTo      | switchTab      | navigateBack |
| --------------- | -------------- | ------------ |
| 打开新页面           | Tab 切换         | 页面返回         |
| 只能打开非 tabBar 页面 | 只能打开 tabBar 页面 | --           |

## 5.全局应用实例

> 1.在app.js中 App()设置globalData
>
> 2.获取实例
>
> ```
> var app = getApp()
> app.globalData.参数名
> ```
>
> 3.改变实例数据
>
> ```
> app.globalData.参数名 = 参数值
> ```

## 6.`wx:if` vs `hidden`

| wx:if         | hidden    |
| ------------- | --------- |
| 控制销毁或重新渲染     | 控制显示与隐藏   |
| 只使用一次时选择wx:if | 需要频繁切换时使用 |

## 7. bindtap vs  catchtap

| bindtap      | catchtap     |
| ------------ | ------------ |
| 不会阻止冒泡事件向上冒泡 | 可以阻止冒泡事件向上冒泡 |

{% hint style="info" %}

```
以bind开头的事件类型不会阻止冒泡事件向上冒泡；以catch开头的事件类型可以阻止冒泡事件向上冒泡
```

{% endhint %}

## 8.事件对象绑定和获取

> 1.组件上通过 data-参数名="参数值" 绑定
>
> 2.通过 e.currentTarget.dataset.参数名 获取参数值

## 9.组件通信与事件

> 1.父传子
>
> ```
> // 父组件
> <component name="component" bindmyevent="onMyEvent" />
> // 子组件
> Component({
>     properties: {
>         name: String
>     }
> })
> ```
>
> 2.子传父
>
> ```
> // 子组件
> this.triggerEvent('myevent', myEventDetail, myEventOption)
> // 父组件
> onMyEvent: function(e){
>     e.detail // 自定义组件触发事件时提供的detail对象
> }
> ```

## 10.父组件使用子组件方法

```
// 父组件
<component id="component " />
this.selectComponent("#component ").close()
// 子组件的方法
close() {
    console.log('触发子组件方法')
}
```

## 11.behaviors

`behaviors` 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”

```
var myBehavior = require('my-behavior')
Component({
    behaviors: [myBehavior]
})
```

## 12.数据缓存

{% tabs %}
{% tab title="设置缓存" %}

| wx.setStorage(Object) | wx.setStorageSync(key， data) |
| --------------------- | ---------------------------- |
| 异步存储                  | 同步存储                         |
| {% endtab %}          |                              |

{% tab title="获取缓存" %}

| wx.getStorage(Object) | wx.getStorageSync(key) |
| --------------------- | ---------------------- |
| 异步获取                  | 同步获取                   |
| {% endtab %}          |                        |
| {% endtabs %}         |                        |

## 13.常用交互

| wx.showModal(Object) | wx.showToast(Object) | wx.showLoading(Object) |
| -------------------- | -------------------- | ---------------------- |
| 显示模态对话框              | 显示消息提示框              | 显示 loading 提示框         |
