小程序生命周期+组件的生命周期+promise封装wx.request

小程序的生命周期：

1.生命周期：

生命周期是指一个小程序从创建到销毁的一系列过程

 2.小程序生命周期分为三部分：

应用级别： App()来注册一个小程序 ；
页面级别： 通过Page()来注册一个页面；
组件级别： 通过Component()来注册一个组件；

（1） 应用级别的生命周期：

App({
  onLaunch: function(options) {
    // 监听小程序初始化。小程序初始化完成时（全局只触发一次）
  },
  onShow: function(options) {
    // 监听小程序显示。小程序启动，或从后台进入前台显示时
  },
  onHide: function() {
    // 监听小程序隐藏。小程序从前台进入后台时
  },
  onError: function(msg) {
    console.log(msg) // 错误监听函数。小程序发生脚本错误，或者 api 调用失败时触发，会带上错误信息
  },
  onPageNotFound: function(res) {
    // 页面不存在监听函数。小程序要打开的页面不存在时触发，会带上页面信息回调该函数
  },
  globalData: 'I am global data'
    //全局变量
})

---

用户首次打开小程序，触发 onLaunch 方法（全局只触发一次）。
小程序初始化完成后，触发 onShow 方法，监听小程序显示。
小程序从前台进入后台，触发 onHide 方法。
小程序从后台进入前台显示，触发 onShow 方法。
小程序后台运行一定时间，或系统资源占用过高，会被销毁。
全局的 getApp() 函数可以用来获取到小程序 App 实例。

（2）页面级别： 

onReady（）监听页面的初始渲染
onShow（）监听页面的显示
onHide（）监听页面的隐藏
onPullDownRefresh（）下拉刷新的钩子函数
onReachBottom（）上拉到底的钩子函数

Page({
  data: {
    // 页面的初始数据
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期回调—监听页面加载
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成
  },
  onShow: function() {
    // 生命周期回调—监听页面显示
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载
  },
//  ---------------以下不是生命周期钩子函数----------------
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角转发
  },
  onPageScroll: function() {
    // 页面滚动触发事件的处理函数
  },
  onResize: function() {
    // 页面尺寸改变时触发
  },
  onTabItemTap(item) {
    // 当前是 tab 页时，点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 任意的函数，在页面的函数中用 this 可以访问
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 任意数据，在页面的函数中用 this 可以访问
  customData: {
    hi: 'MINA'
  }
})

（3） 组件的生命周期：

• created()：组件实例刚刚被创建好时触发。
• attached()：在组件完全初始化完毕、进入页面节点树后触发。
• detached() 组件离开页面节点树后触发。

 3.使用promise封装wx.request

---

在根目录下创建service目录和env目录

先在env目录中创建index.js文件

//三个环境变量
module.exports={
  "dev":{//开发环境
    "baseUrl":"https://api-hmugo-web.itheima.net/api/public/v1"
  },
  "pro":{//生产环境
    "baseUrl":"https://www.baidoapi.com/api/public/v1"
  },
  "test":{//测试环境
    "baseUrl":"https://www.test.com/api/public/v1"
  }
}

 在service文件夹中创建api.js文件

// 只放url

module.exports={
  'lunbo':'/home/swiperdata',
  "login":"/login",
  'cate':"/category"
}

在service文件夹中创建request.js文件 

module.exports=function axios(url,method,data){
  
  return new Promise((resolve,reject)=>{
   wx.request({
     url: url,
     method:method,
     data:Object.assign({},data), //使用浅拷贝
     success(res){//成功回调
       resolve(res);
     },
     fail(err){//失败回调
       reject(err)
     }
   })
  })
}

在service中创建http.js文件 

// 定义各种各样的请求方法

const env=require('../env/index')  //导入上面创建的环境变量
const api=require('./api')         //导入接口
const axios=require('./request')   //导入封装的axios方法

// 根据当前环境手动选择baseUrl
const baseURL=env.dev.baseUrl;


// 定义轮播接口请求方法
function lunbo(url,method,data){
  return axios(baseURL+url,method,data)
}

function login(){

}

function cate(){

}

module.exports={//到处接口
  lunbo,
  login,
  cate
}

注意：在页面中要通过引入多个接口进行渲染数据，这样会导致代码繁琐以及显着代码臃肿，所以建议我们将接口挂载到全局app.js文件中

---

app.js中

  globalData: {//全局变量
    userInfo: null,
    axios//挂载到globalData里面或者外面都可以

  },
  axios

 在home.js中我们通过 const app =getApp（）获取实例

   app.axios.lunbo('/home/swiperdata','get',{}).then(res=>{
    //  console.log(res);
    this.setData({
      swiperList:res.data.message
    })
   })