Mini programa de aprendizaje de WeChat (1)

Completado recientemente. . . . El mensajero aún no ha llegado, así que me tomó 3 días aprender el mini programa. Escuché que es fácil de aprender después de aprender Vue. Sí, he sido vago durante una semana, jeje ( )

evento:

enlazar: burbujeará
captura: enlazará y no burbujeará
Inserte la descripción de la imagen aquí

ciclo vital

Inserte la descripción de la imagen aquí

 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    

  },

Obtener información de usuario

Inserte la descripción de la imagen aquí
No es necesario considerar si obtener los datos directamente

Si la información del usuario se obtiene con éxito en los
datos, los datos se obtienen cuando

Inserte la descripción de la imagen aquí
se carga la página
Inserte la descripción de la imagen aquí

Inserte la descripción de la imagen aquí
Estos son los pasos finales.
Finalmente lo resolví. . . Indignante

<view class="indexContainer">
  <image class="avatar" src='{
    
    {userInfo.avatarUrl}}'></image>
  <button bindgetuserinfo='handleGetUserInfo' style='display:{
    
    {isShow? "block" : "none"}}' open-type="getUserInfo">获取用户登录信息</button>
  <text class="userName"> hello {
    
    {
    
    userInfo.nickName}}</text>
  <view bindtap="handleParent" class="goStudy">
    <text catchtap="handleChild">开启小程序之旅</text>
  </view>
</view>

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    msg: '气球',
    userInfo: {
    
    },
    isShow: true
  },
  handleParent(){
    
    
    console.log('父元素')
  },
  handleChild() {
    
    
    console.log('子元素')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.getUserInfo()
  },
  getUserInfo(){
    
    
    // 判断用户是否授权了
    wx.getSetting({
    
    
      success: data => {
    
    
        console.log('用户授权',data)
        if (data.authSetting['scope.userInfo']) {
    
    
          this.setData({
    
    
            isShow: false
          })
        } else {
    
    
          //没有授权
          this.setData({
    
    
            isShow: true
          })
        }
      }
    })
    wx.getUserInfo({
    
    
      success: data => {
    
    
        //在这里要用箭头函数 普通函数this指向会有问题
        // 因为在getUserInfo这个api中success回调函数肯定不是当前页面调用的
        console.log(data)
        this.setData({
    
    
          userInfo: data.userInfo
        })
      },
      fail: () => {
    
    
        console.log("获取用户失败")
      }
    })
  },
  handleGetUserInfo(data){
    
    
    console.log('用户点击了',data)
    if(data.detail.rawData){
    
    
      //用户点击的是允许
      this.getUserInfo()
    }
  },

Este es el caso. En primer lugar, debemos entender estos en el documento:
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
Inserte la descripción de la imagen aquí
getUserInfo se ejecuta cuando la página ha sido ingresada e inicializada. Si no está autorizada, no se moverá nada adentro porque ingresará la devolución de llamada de falla. Lo anterior el ajuste de la interfaz es claro., y
si la autorización tenía, en la pantalla normal, realizar abajo, que no tienen nada que decir
en este momento cuando la charla nunca autorizó entrar, haga clic en el botón, cuadros emergentes, haga clic en permitir, (aquí No sé cómo siempre quiso saber la autorización Sí, solo sé que los datos de autorización son diferentes después de hacer clic en Permitir. Más tarde, supuse que hizo clic en la opción permitir de forma predeterminada, que se considera autorización. Me he quedado aquí por un mucho tiempo.)
Luego es mostrar el botón oculto por si autorizar o no, y se usa el operador ternario. Hay un problema, "" "", utilicé dos comillas dobles como esta, y se reportó un error . En
resumen, ya sea "" o "", siempre que sea diferente

style='display:{
    
    {isShow? "block" : "none"}}'

Al principio quería rendirme y esperar hasta mañana, pero insistí. . . Siento que el pequeño programa es laborioso para revisar los documentos y todavía está cambiando, se cumple hoy y seguirá mañana.

Supongo que te gusta

Origin blog.csdn.net/weixin_46013619/article/details/104633090
Recomendado
Clasificación