微信小程序的生命周期

1小程序全局的生命周期

主要有如下四个（在app.js中）
onLaunch 启动-（本地存储，登录）
onShow前台展示-开始播放与运行
onHide后台运行-停止播放与运行）
onError发生错误-监听处理错误）

 onError(){
    console.log("小程序生命周期：onError小程序发送错误")
    // 提示与重启
  },
  onHide(){
    console.log("小程序生命周期：onHide小程序后台运行")
    // 停止播放
  },
  onShow(){
    console.log("小程序生命周期：onShow小程序前台展示")
    // 恢复播放
  },
  onLaunch() {
    console.log("小程序生命周期：onLaunch页面启动")
    // 本地存储，系统信息获取，登录获取code

2.页面的生命周期(局部)

onLoad 加载完-（获取页面传参，初始化，网络请求，本地出错）
onReady首次渲染完毕-（获取节点）
onShow前台显示
onHIde后台运行
onUnload 页面被卸载

* 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log("页面生命周期：onLoad加载")
    // 1. 发起网络请求2. 获取页面传递的参数3. 页面本地存4. 初始化
  },  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log("页面生命周期：onReady第一次渲染完成")
    // 1. 操作节点（没有window，document.getxxx,document.getElement）
    // 创建一个选中器
    const query = wx.createSelectorQuery()
    // 选中h1节点 获取他的边界
    query.select('.h1').boundingClientRect()
    // 获取窗口的位置信息
    query.selectViewport().scrollOffset();
 
    // 执行命令返回结果
    query.exec(function(res){
      // 获取元素的边界信息，bottom，top ，left，right，height，width
      console.log(res[0]);
      // 窗口信息 scrollHeight  scrollLeft: 0  scrollTop: 0  scrollWidth: 320
      console.log(res[1]);
      
    })
    // create创建Selector选择器，query查询；bounding边界Client客户界面Rect区域
    // Viewport视口，scrollOffset滚动与偏移
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
      console.log("页面生命周期：onShow页面前台显示")
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log("页面生命周期：onHide后台运行")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log("页面生命周期：onUnload页面被卸载")
    // 当页面被移除页面栈时候执行（redirect会移出，navigateBack移出）
    // 小程序页面栈总共5层
  },

3.固定的回调函数

onPullDownRefresh：下拉刷新

  onPullDownRefresh() {
    console.log("下拉刷新回调函数")
    // 在配置.json中 "enablepullDownRefresh":true
    // wx.stopPullDownRefresh()//停止下拉刷新
  },

onReachBottom：上拉触底
onShareAppMessage：右上角分享

  onShareAppMessage() {
      // 默认以当前页面的截图
      // 实际中，可以网络请求一个数组，从数组随机的获取一组参数
      return {
        title:"送你50元现金红包",
        path:"/pages/yidian/yidian",
        imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"
      }
  },

onShareTimeline：分享到朋友圈

// 分享到朋友圈
  onShareTimeline(){
    // 不返回也是有个默认的当前页面效果的
    return {
      title:"给，这是你喜欢的",
      query:"?name=mumu&age=18",
      imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=500"
    }
  },

onPageScroll：页面滚动 e.scrollTop：页面滚动的距离

 onPageScroll(e){
    //  当页面的滚动距离大于100时候显示回到顶部
    if(e.scrollTop>100){
      this.setData({showTop:true})
    }else{
      // 否则隐藏回到顶部
      this.setData({showTop:false})
    }
  },
  // 回到顶部
  goTop(){
    // 页面滚动到0的位置，时间为600毫秒
    wx.pageScrollTo({
      duration: 600,
      scrollTop:0,
    })
  }

onTabitemTap：页面底部栏被点击

4.获取节点信息

在页面创建标签

//wxml页面
<view class="h1">
  中华人民共和国
</view>

在js中构建方法

//js中
onReady() {
    console.log("页面生命周期，onReady第一次渲染完成");
    // 可以操作节点
    //创建一个选中器
    const query = wx.createSelectorQuery()
    //选中h1节点，获取它的边界
    query.select(".h1").boundingClientRect()
    //获取窗口的位置信息
    query.selectViewport().scrollOffset()
    //执行命令返回结果
    query.exec(function(res){
      //获取元素的边界信息 ，bottom，top，left,height,width
      console.log(res[0]);
      //窗口信息 scrollHeight scrollLift scrollTop scrollWidth
      console.log(res[1]);
      //create创建 Selector选择器  query查询 bounding边界 ，Client客户界面 Rect区域
      //Viewport视口 scrollOffset 滚动与偏移
    })
},

5.微信内置api

1.界面
wx.showModal：显示模态框
wx.showToast：显示提示
wx.showLoading：加载提示
wx.setNavigationBarTitle：设置标题栏的文本
wx.setNavigationBarColor：设置标题栏的颜色（背景颜色和字体颜色）
2.网络请求：wx.request()
3.用户头像
4.登录
5.图片与文件

//wxml页面
<image src="{{pic}}" mode="aspectFill" bindtap="downPic"></image>
<button type="warn" bindtap="upImg">上传图片</button>

js配置

//js
upImg(){
    var that  =  this;
    // 选择图片
    // wx.chooseImage({
    // 选择媒体
    wx.chooseMedia({
      count: 1, //媒体数量
      success(res){
        console.log(res)
        // 获取选择的第0个图片临时地址
        var tempFile = res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
            console.log(res);
            // 转换为js对象
            var data = JSON.parse(res.data);
            // 更新图片信息
            that.setData({pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },
  downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        // 把临时文件保存到相册(需要用户授权)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            // 提示保存成功
            wx.showToast({
              title: '下载图片成功',
              icon:"none"
            })
          }
        })
      }
    })
  },

6.系统信息
7.网络