• 微信小程序的生命周期和路由


    小程序的生命周期

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

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

    2.小程序页面中的生命周期

     1 Page({
     2   //页面创建完,只触发一次,通常获取后台数据或接收另一个页面的传参时使用
     3     onLoad() {
     4         //一般获取数据是在这个生命周期中进行的
     5         },
     6     //进入页面就会触发
     7     onShow() {},
     8     //页面离开时触发
     9     onHide() {},
    10     //监听页面初次渲染完成
    11     onReady() {},
    12     //监听页面卸载,类似于vue中destroyed
    13     onUnload() {}
    14     onReachBottom() {
    15     console.log('到底页面底部')
    16   },
    17   //下拉触发
    18   onPullDownRefresh() {
    19     console.log('onPullDownRefresh')
    20   },
    21   //点击右上角分享时触发
    22   onShareAppMessage() {
    23     
    24   }
    25 })    

    3.微信小程序的路由

     1 两种路由触发模式:
     2 
     3 1.标签方式触发
     4    
     5   小程序:<navigator url="要中转的路径?key=value">
     6   
     7   接收:通过另一个页面在onload生命周期中接收 
     8    
     9 2.编程式触发
    10   小程序跳转:
    11   wx.navigateTo()  //带历史回退
    12   wx.redirectTo() //不保留历史,跳转到另一个页面,不能返回到上一页面          
    13   wx.switchTab() //只跳转到tabBar页面,不带回退
    14   wx.reLaunch() //即能跳转到tabBar页面,也能跳转到非tabBar页面,不带历史回退    

    4.小程序的数据请求

     1 wx.request({
     2   url:'', //请求的接口地址
     3   method:'get|post|put|delete',//请求方式 
     4   header:{},//设置请求头
     5   data:{}, //传参
     6   success() {}, //成功返回
     7   fail() {},// 失败返回
     8 
     9 })
    10 
    11 //注意:
    12 //1.小程序请求的接口必须是https协议,不能请求本地的数据
    13 //2. 请求接口之前要提前配置接口请求:
    14   //第一种方法:在微信小程序后台配置request合法域名
    15   //第二种方法:在开发者工具--详情--本地配置--勾选‘不校验合法域名’
    16 //3.请求成功和失败的回调最好写成箭头函数的形式  
    17     //普通函数的话  this指向的是钩子函数  请求回来的数据用this.setData时会出错
    18     //加一个let _this=this  就可以了   
    19     //箭头函数的形式可以完全避免这种麻烦
  • 相关阅读:
    [转]网站架构收集 朱燚:
    SQLServer 2005 海量数据解决方案 分区表 朱燚:
    【轻松一下】女朋友的保健作用 朱燚:
    A tip when running javascript dynamically 朱燚:
    【组图】地震前线归来心中的震撼 朱燚:
    系统自动启动程序之十大藏身之所 朱燚:
    [轻松一下]90%的男人想作的事情 朱燚:
    JavaScript的9个陷阱及评点 朱燚:
    【转】c++中的sizeof 朱燚:
    PG数据库中相关操作
  • 原文地址:https://www.cnblogs.com/mxnl/p/13443689.html
Copyright © 2020-2023  润新知