阅读 132

微信小程序事件流和生命周期以及组件使用(二)

一、事件流

  1. 事件冒泡:从点击的元素开始触发,向上事件传播
阻止事件冒泡:event.stopProPagation()
复制代码
  1. 事件捕获:多上级元素传递,传递到最具体的元素
btn.addEventListener('click',function() {//回调},true)
复制代码

二、小程序中事件冒泡和阻止冒泡

bind+事件名="方法名"  向上传递事件,即事件冒泡
catch+事件名="方法名"  阻止事件冒泡
复制代码

三、小程序生命周期

1. 整体小程序的生命周期:

```
App({

  onLaunch() {},   监听小程序初始化,只触发一次
  onShow(){},小程序启动或切换到前台运行
  onHide(),小程序切换到后台运行
  
})
```
复制代码

2. 小程序页面级别的生命周期:

```
Page({
  //页面创建完,只触发一次,通常获取后台数据或接收另一个页面的传参时使用
	onLoad() {},
	//进入页面就会触发
	onShow() {},
	//页面离开时触发
	onHide() {},
	//监听页面初次渲染完成
	onReady() {},
	//监听页面卸载,类似于vue中destroyed
	onUnload() {}
	onReachBottom() {
    console.log('到底页面底部')
  },
  //下拉触发
  onPullDownRefresh() {
    console.log('onPullDownRefresh')
  },
  //点击右上角分享时触发
  onShareAppMessage() {
    
  }
})
```
复制代码

3. 微信小程序的路由管理

两种路由触发模式:

1.标签方式触发
   
  vue:
   <router-link to="">
   
  小程序:<navigator url="要中转的路径?key=value">
  
  接收:通过另一个页面在onload生命周期中接收 
   
2.编程式触发

  vue:
  this.$router.push()
  
  小程序跳转:
  
  wx.navigateTo()  带历史回退
  wx.redirectTo() 不保留历史,跳转到另一个页面,不能返回到上一页面  this.$router.replace()
  wx.switchTab() 只跳转到tabBar页面,不带回退
  wx.reLaunch() 即能跳转到tabBar页面,也能跳转到非tabBar页面,不带历史回退
  
  
复制代码

4.动态样式

  • 小程序支持的选择器:class选择器,id选择器,标签选择器,群组选择器,伪对象(:before,:after)

  • 可以对class做动态样式处理,例如:

   <button class="{{ index===currentIndex? 'active':'' }}" >
          {{ item.typename }}
    </button>
复制代码

5.数据请求

JS原生:XMLHttpRequest,fetch
jQuery:$.ajax,$.getJSON,$.post(),$.get()
Vue:axios
React:fetch
微信小程序:wx.request() 与jQuery的$.ajax类似

wx.request({
  url:'', //请求的接口地址
  method:'get|post|put|delete',//请求方式 
  header:{},//设置请求头
  data:{}, //传参
  success() {}, //成功返回
  fail() {},// 失败返回

})

注意:

1.小程序请求的接口必须是https协议
2. 请求接口之前要提前配置接口请求:
  第一种方法:在微信小程序后台配置request合法域名
  第二种方法:在开发者工具--详情--本地配置--勾选‘不校验合法域名’

上拉加载更多
1.onReachBottom() {} 页面自带的生命周期
2.scroll-view  实现局部区域的滚动和加载更多
复制代码

6.组件

  • 内置组件:微信小程序封装好的组件,直接拿来就能使用
    • swiper:轮播组件,必须要和swiper-item配合使用
例如:

    <swiper 
        class='banner'
        indicator-dots="true"
        indicator-color="#f00"
        indicator-active-color="#ff0"
        circular="true"
      >
      <swiper-item wx:for="{{ banners }}" wx:key="{{ item.id }}">
        <image src="{{ item.imgurl }}"></image>
      </swiper-item>
    </swiper>
    
    参考:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
    

复制代码
  • scroll-view:局部滚动组件,也可以做上拉加载,下拉刷新,例如:
  <scroll-view 
      scroll-y="true" 
      style="height:{{ height }}px;"
      bindscrolltolower="lower" 
  >
   
    <view class="movie-item" wx:for="{{ moveList }}" wx:key="{{ index }}">
        <image src="{{ item.images.small }}"></image>
         <view clas="movie-title">
            {{ item.title }}
         </view>
      
      </view>


  </scroll-view>
复制代码
  • navigator
  • video或audio
  • 表单相关的组件(即小程序表单标签)
    • button
    • input
    • picker

综上就是部分小程序事件及生命周期和组件使用

文章分类
前端