前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序登陆封装(自用版)欢迎指正

微信小程序登陆封装(自用版)欢迎指正

作者头像
骤雨重山
发布2022-06-27 10:45:46
7630
发布2022-06-27 10:45:46
举报
文章被收录于专栏:骤雨重山

https://static.4ce.cn/gh/uxiaohan/GitImgTypecho@master/usr/uploads/2022/07/2623010086.mp4

index.wxml

代码语言:javascript
复制
    我想要你的头像和昵称,可以嘛~
    
      不可以
      好的
    
  



  
    韩小韩博客 wwww.vvhan.com
    登录成功
    
    Nick:{{userInfo.nickName}}
    OpenId:{{userInfo.openid}}
  


  点击登录

index.js

代码语言:javascript
复制
const app = getApp()
Page({
  data: {
    // 登陆按钮现实隐藏
    loginBtn: false,
    // 全局是否登陆
    loginShow: false,
    // 用户信息
    userInfo: {}
  },
  async onLoad() {
    const _res = await app._checkLogin()
    this.setData({
      loginBtn: _res,
      loginShow: _res,
      userInfo: app.globalData.userInfo
    })
  },
  // 登陆
  async _login() {
    const _res = await app._getUserInfo()
    _res && this.setData({
      userInfo: app.globalData.userInfo,
      loginBtn: false
    }), this.onLoad()

  },
  // 关闭登陆弹窗
  onClose(e) {
    this.setData({
      loginBtn: e.type == "click" ? !this.data.loginBtn : false
    })
  }
})

app.js

代码语言:javascript
复制
App({
  onLaunch: function () {
    // 全局变量
    this.globalData = {
      openId: wx.getStorageSync('openId'),
      userInfo: wx.getStorageSync('userInfo')
    };
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明:
        //   env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境(第一个创建的环境)
        // env: 'my-env-id',
        traceUser: true,
      });
    }
    // 微信小程序获取版本更新
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
    })
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '小韩提示',
        content: '新版来袭,速来体验!',
        success: function (res) {
          if (res.confirm) {
            updateManager.applyUpdate()
          }
        }
      })
    })
    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
    });

    // 获取OpedId
    this._getOpenId()
  },
  // 获取用户OpenId
  _getOpenId() {
    ((this.globalData.openId || '') == '') && wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      this.globalData.openId = res.result.openid;
      wx.setStorageSync('openId', res.result.openid)
    }).catch(res => {
      console.error(res)
    });
  },
  // 判断是否登陆
  async _checkLogin() {
    const _this = this
    return new Promise((resolve) => {
      wx.checkSession({
        success: function (_res) {
          const _userInfo = wx.getStorageSync('userInfo');
          resolve((_userInfo || '') === '')
        },
        fail: async function (_res) {
          await wx.login({})
          resolve(true)
        }
      })
    })
  },
  // 获取用户信息并存储
  async _getUserInfo() {
    return new Promise((resolve) => {
      wx.getUserProfile({
        desc: 'get用户信息',
        success: async res => {
          res.userInfo.openid = this.globalData.openId
          this.globalData.userInfo = res.userInfo
          wx.setStorageSync('userInfo', res.userInfo)
          resolve(true)
        },
        fail: () => {
          resolve(false)
        }
      });
    })
  },
});
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • index.wxml
  • index.js
  • app.js
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档