微信小程序开发之十三 —— 生命周期与用户信息获取

本文链接：https://blog.csdn.net/weixin_45079619/article/details/107542415

文章目录

学习前后

上一篇：微信小程序开发之十二 —— 数据携带
下一篇：微信小程序开发之十四 —— 数据表单

小程序与页面的生命周期

看文档

学一门新技术关键就是看技术文档啊，看吧，也挺多的，先了解个大概。
小程序：App(Object object)
页面：Page(Object object)

Console就对了

直接在这些函数下面都Console一下然后多编译运行几次仔细观察看看结果如何。
app.js

  onLaunch: function (opts) {
    console.log('app的onLaunch监听小程序初始化',opts
    }

    this.globalData = {}
  },
  onShow(opts){
    console.log('onShow监听小程序启动或切前台',opts)
  },
  onHide(){
    console.log('onHide监听小程序切后台')
  }

页面.js

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onLoad监听页面加载", options)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady监听页面初次渲染完成")
  },

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

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide监听页面隐藏")
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload监听页面卸载")
  },

然后多切换编译几次观察控制台变化来了解这个过程。
onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。
onShow(Object object)
小程序启动，或从后台进入前台显示时触发。

场景值

运行时可以看到控制台的数据中有个scene为1001，这个是场景值，场景值用来描述用户进入小程序的路径方式。
官方文档: 场景值
这个了解下就好，在开发工具的显示框上方有个模拟操作，点击出现个Home和返回两个按钮，点击Home会切换场景值，可以来模拟切换小程序进入方式。

用户登录与信息获取

官方文档：wx.login、wx.getSetting
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

登录流程时序

APP.js

App({
  onLaunch: function () {
    wx.login({
      success(res){
        console.log('wx.login得到的数据',res)
      }
    })
 
    wx.getSetting({
      success(res){
        console.log('wx.getSetting得到的数据',res)
      }
    })
  },
 
  globalData: {
    userInfo: null
  }
})

运行结果：

可以看到wx.getSetting会得到errMsg和用户当前的权限设置AuthSetting，wx.login会得到errMsg和code，code是用户的登录凭证，用处可前面的小程序登录时序图.

获取用户信息wx.getUserInfo

获取前先判断用户是否允许，可以从authSetting对象里看scope.userInfo属性是否为true，其他信息类似。

wx.getSetting({
      success(res){
        console.log('wx.getSetting得到的数据',res)
        if (res.authSetting["scope.userInfo"]){
          wx.getUserInfo({
            success(res){
              console.log("wx.getUserInfo得到的数据",res)
            }
          })
        }
      }
    })

在控制台的useriinfo在看的用户信息。

推荐使用button获取用户信息

小程序官方已经不建议开发者用wx.getUserInfo来获取用户信息了，而是建议通过button的方式来获取，对用户的体验更好，也就是用户只有点击了按钮，用户信息才会被获取。
我们在页面.wxml写一个按钮，按钮类型open-type=“getUserInfo”,必须是这个类型，然后使用bindgetuserinfo绑定一个事件即可。

<button open-type="getUserInfo" bindgetuserinfo="getUserInformation">点击获取用户信息</button>

.js的data添加一个userInfo对象

data: {
    userInfo:{}
  },

js的数据响应函数，同时把用户信息传给globalData

getUserInformation: function(e){
    console.log('getUserInformation')
    let app = getApp()
    app.globalData.userInfo = e.detail.userInfo
    console.log('getUserInformation赋值的全局变量', app.globalData.userInfo)
    this.setData({
      userInfo: e.detail.userInfo,
    })
  }

把得到的数据渲染出来

<view>{{userInfo.nickName}}</view>
<view>{{userInfo.country}}</view>
<image mode="widthFix" style="width:64px;height:64px" src="{{userInfo.avatarUrl}}"></image>