微信小程序_生命周期_学习记录

小程序生命周期

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

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

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

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

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

两种路由触发模式：

1)标签方式触发

		<navigator url="要中转的路径?key=value">
   		接收：通过另一个页面在onload生命周期中接收 

2)编程式触发

	  wx.navigateTo()  带历史回退
      wx.redirectTo() 不保留历史，跳转到另一个页面，不能返回到上一页面 
      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