微信小程序学习总结（2）

青旅半醒 2022-01-20 00:21 377阅读 0赞

# 微信小程序学习总结（2） #

## 一、微信小程序的程序生命周期 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70][]

讲解：

onLaunch方法：小程序启动之后，在 `app.js` 定义的 `App` 实例的 `onLaunch` 回调会被执行:

onShow方法：

## 二、页面的生命周期 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1][]

讲解：onload方法： 是在该页的程序代码加载并且渲染完页面之后就调用了

onShow方法：是在页面加载完显示在屏幕上的时候开始调用

onReady方法：是在onShow方法之后调用，

onHide方法：是在本页面中打开一个子页面的时候（打开新窗口），调用该方法

onUnload方法:是在关闭页面的时候调用的

## 三、微信小程序的页面路由 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2][]

## 四、事件类型和事件对象 ##

常见的事件类型

<table> 
 <thead> 
  <tr> 
   <th align="left">类型</th> 
   <th align="left">触发条件</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">touchstart</td> 
   <td align="left">手指触摸动作开始</td> 
  </tr> 
  <tr> 
   <td align="left">touchmove</td> 
   <td align="left">手指触摸后移动</td> 
  </tr> 
  <tr> 
   <td align="left">touchcancel</td> 
   <td align="left">手指触摸动作被打断，如来电提醒，弹窗</td> 
  </tr> 
  <tr> 
   <td align="left">touchend</td> 
   <td align="left">手指触摸动作结束</td> 
  </tr> 
  <tr> 
   <td align="left">tap</td> 
   <td align="left">手指触摸后马上离开</td> 
  </tr> 
  <tr> 
   <td align="left">longpress</td> 
   <td align="left">手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</td> 
  </tr> 
  <tr> 
   <td align="left">longtap</td> 
   <td align="left">手指触摸后，超过350ms再离开（推荐使用longpress事件代替）</td> 
  </tr> 
  <tr> 
   <td align="left">transitionend</td> 
   <td align="left">会在 WXSS transition 或 wx.createAnimation 动画结束后触发</td> 
  </tr> 
  <tr> 
   <td align="left">animationstart</td> 
   <td align="left">会在一个 WXSS animation 动画开始时触发</td> 
  </tr> 
  <tr> 
   <td align="left">animationiteration</td> 
   <td align="left">会在一个 WXSS animation 一次迭代结束时触发</td> 
  </tr> 
  <tr> 
   <td align="left">animationend</td> 
   <td align="left">会在一个 WXSS animation 动画完成时触发</td> 
  </tr> 
 </tbody> 
</table>

当事件回调触发的时候，会收到一个事件对象，对象的详细属性如下表所示。

事件对象属性 type是类型的意思，填类型值，所以肯定是String

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">String</td> 
   <td align="left">事件类型</td> 
  </tr> 
  <tr> 
   <td align="left">timeStamp</td> 
   <td align="left">Integer</td> 
   <td align="left">页面打开到触发事件所经过的毫秒数</td> 
  </tr> 
  <tr> 
   <td align="left">target</td> 
   <td align="left">Object</td> 
   <td align="left">触发事件的组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td align="left">currentTarget</td> 
   <td align="left">Object</td> 
   <td align="left">当前组件的一些属性值集合</td> 
  </tr> 
  <tr> 
   <td align="left">detail</td> 
   <td align="left">Object</td> 
   <td align="left">额外的信息</td> 
  </tr> 
  <tr> 
   <td align="left">touches</td> 
   <td align="left">Array</td> 
   <td align="left">触摸事件，当前停留在屏幕中的触摸点信息的数组</td> 
  </tr> 
  <tr> 
   <td align="left">changedTouches</td> 
   <td align="left">Array</td> 
   <td align="left">触摸事件，当前变化的触摸点信息的数组</td> 
  </tr> 
 </tbody> 
</table>

这里需要注意的是target和currentTarget的区别，currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

### 事件捕捉和事件处理 ###

#### 案例1： ####

index.wxss

.container-A { 
      border: solid;
      border-width: 5rpx;
      width: 50%;
      border-color:red  
    }
    .container-B { 
      margin: 10rpx;
      border: solid;
       border-width: 5rpx;
      border-color:yellow
    }
    .container-C { 
      margin: 10rpx;
      border: solid;
       border-width: 5rpx;
      border-color:blue
    }

index.js

Page({ 
      clickA(){ 
        console.log('click container-A')
      },
      clickB() { 
        console.log('click container-B')
      },
      clickC() { 
        console.log('click container-C')
      },
    })

index.wxml

<view class='container-A' bindtap='clickA'>
       container-A
       <view class='container-B' bindtap='clickB'>
         container-B
         <view class='container-C' bindtap='clickC'>
         container-C
         </view>
       </view>
    </view>

运行效果： 从下图可以看出事件处理是从里到外的方向执行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3][]

## 五、常用组件 ##

### 1.view组件 ###

index.wxml:

前置解释：

①hover-class是当我们手指按下去的时候的样式（手指按下去就相当于是手指从该组件上经过嘛！）

②hover-stop-propagation="true"代表“当我们点击该子组件时，只触发该子组件的点击事件，不会触发父组件的点击事件”

③hover-start-time="500"的意思是“当我们手指按下去500ms之后触发hover-class样式”

④hover-stay-time="300"的意思是“当我们的手指离开时，hover-class样式持续的时间为300ms”

<view class="section">
        <view>view组件</view>               
        <view class="view-parent-container" hover-class="hover-parent-container">
            <view class="view-container" 
                hover-class="hover-container" //hover-class是当我们手指按下去的时候的样式
                hover-stop-propagation="true"
                hover-start-time="500"
                hover-stay-time="300">
            </view>
        </view>
    </view>

index.wxss

.view-parent-container { 
        width: 300rpx;
        height: 300rpx;
        background: yellowgreen;
    }
    .hover-parent-container { 
        background: blue;
    }
    .view-container { 
        width: 200rpx;
        height: 200rpx;
        background: chocolate;
        /* transition: all .5s; */
    }
    .hover-container { 
        background: rgba(0,0,0,0.7)
    }

我们来看index.wxml的页面运行效果吧

先看手指未点击之前的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4][]

再看手指点击里层那个棕色方框之后的效果： 很明显里层的方框颜色变了，但是由于在子组件里面定义了hover-stop-propagation=“true”，所以外层方框的颜色不会受到影响

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5][]

问题：如果我们去掉hover-stop-propagation="true"会怎么样呢？

答：去掉hover-stop-propagation="true"之后，我们再次点击里层棕色方框，发现外层方框的hover-class也能呗触发，如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 6][]

### 2.scroll view ###

**scrollview.wxml：**

前置讲解： scroll-top： 滚动条滚动的过程中旁边有一个滑轮，代表我们滚动到哪里了，scroll-top的值就代表目前滚动到的位置

<view>scroll-view组件</view>
    <view class="section">
        <view class="section__title">竖向滚动</view>
        <scroll-view style="height: 200px;" 
            scroll-y              //scroll-y是指纵向滚动
            bindscrolltoupper="upper"    //bindscrolltoupper是指滚动到顶部时，触发我们自定义                                           //的“upper”方法
            bindscrolltolower="lower" //滚动到底部时，触发我们自定义的“lower”方法
            bindscroll="scroll"   //只要产生滚动，滚动时就触发我们自定义的“scroll”方法
            scroll-into-view="{
       {toView}}"//值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则                                      //在哪个方向滚动到该元素，比如本例设置的是scroll-y是指纵向滚                                       //动
            scroll-top="{
       {scrollTop}}"  //滚动条的滑轮滑到哪里了，scroll-top的值就代表目前滚动到的位置
          
            enable-back-to-top="true" //iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
           
            scroll-with-animation="true">  //在设置滚动条位置时使用动画过渡
    
            <view id="green" class="scroll-view-item bc_green"></view>
            <view id="red" class="scroll-view-item bc_red"></view>
            <view id="yellow" class="scroll-view-item bc_yellow"></view>
            <view id="blue" class="scroll-view-item bc_blue"></view>
        </scroll-view>
    
        <view class="btn-area">
            <button size="mini" bindtap="tap">click me to scroll into view </button>
            <button size="mini" bindtap="tapMove">click me to scroll</button>
        </view>
    </view>
    
    //下面的代码是关于横向滚动的
    <view class="section">
        <view class="section__title">横向滚动</view>
        <scroll-view class="scroll-view_H" scroll-x >
            <view id="green" class="scroll-view-item_H bc_green"></view>
            <view id="red" class="scroll-view-item_H bc_red"></view>
            <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
            <view id="blue" class="scroll-view-item_H bc_blue"></view>
        </scroll-view>
    </view>

**scrollview.js**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70]: /images/20220120/57c2ed72aaa84431abdb0c9ea7471170.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 1]: /images/20220120/d36568d1c76f4e0e93933d0e50615053.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 2]: /images/20220120/372fd59791a34e048c5851a4090a69b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 3]: /images/20220120/5bbce558e9ee4fbcbc21f440ce6be76e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 4]: /images/20220120/ac4838ccccf54e0b9d0d7a500bce544f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 5]: /images/20220120/61b6e1505bed4c54850132da4db3332e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjQxOTU3_size_16_color_FFFFFF_t_70 6]: /images/20220120/ce14cd2e13764a53a991adaf2b4601c2.png