wx微信小程序部分逻辑

html 复制代码
<view class="w-main">
  <text class="w-title">{{title}}</text>
  <text class="w-desc">{{desc}}</text>
  <block>
    <!-- 头像选择按钮,根据需要决定是否显示 -->
    <view class="nickname-wrapper">
      <text class="nickname-label">头像</text>
      <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
        <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
      </button>
    </view>

    <view class="nickname-wrapper">
      <text class="nickname-label">昵称</text>
      <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
    </view>
  </block>

  <block>
    <button bindtap="onAuthLogin" open-type="getUserInfo" class="w-login-btn" theme='primary'>
      确认授权登录
    </button>
  </block>
</view>
js 复制代码
const app = getApp(); //通过getApp()方法,能够获取App的实例,从而获取app.js文件中定义的公共数据globalData
// const defaultAvatarUrl = '../../images/no-login.png' // 先将avatarUrl设置为一个常量
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: '登录确认',
    desc: '为保障您的账户安全,请确认是本人登录',
    openId: '',
    sessionKey: '',
    scene: '',
    userInfo: {
      avatarUrl: defaultAvatarUrl,
      nickName: '',
      avatarUrlBase64: ''
    },
    hasUserInfo: false,
    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      scene: decodeURIComponent(options.scene)
    })
    this.getOpenId();
  },

  getOpenId() {
    wx.login({
      success: res => {
        console.log("用户登录的临时凭证是:" + res.code);
        // 保存this到变量that中
        const that = this;
        wx.request({
          url: 'https://juejin.plus/prod-api/wx/public/getOpenId',
          method: 'POST',
          data: {
            code: res.code,
            scene: that.data.scene ? that.data.scene : '-1' // 使用that代替this
          },
          success: function (res) {
            if (res.data.code == 200) {
              console.log("用户openid:", res);
              // 使用变量that来引用页面实例
              that.setData({
                openId: res.data.data.openId,
                sessionKey: res.data.data.sessionKey
              });
            } else {
              wx.showToast({
                title: "用户openid获取失败",
                duration: 1000,
                icon: 'none',
                mask: true
              })
            }
          },
          fail: function (err) {
            console.log("失败")
          }
        });
      }
    });
  },

  onAuthLogin(e) {
    if (this.data.userInfo.avatarUrlBase64 === '') {
      wx.showToast({
        title: "请选择头像",
        duration: 1000,
        icon: 'none',
        mask: true
      })
      return
    }
    if (this.data.userInfo.nickName === '') {
      wx.showToast({
        title: "请输入昵称",
        duration: 1000,
        icon: 'none',
        mask: true
      })
      return
    }
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        const that = this;
        that.setData({
          isLogin: true
        });
        console.log("用户信息:", res)
        var params = {
          'openId': that.data.openId,
          'sessionKey': that.data.sessionKey,
          'encryptedData': res.encryptedData,
          'rawData': res.rawData,
          'signature': res.signature,
          'iv': res.iv,
          'scene': that.data.scene ? that.data.scene : '-1',
          'nickName': that.data.userInfo.nickName,
          'avatarUrlBase64': that.data.userInfo.avatarUrlBase64,
        }
        console.log("param:", params)
        wx.request({
          url: 'https://juejin.plus/prod-api/wx/public/getWxUserInfo',
          method: 'POST',
          data: params,
          success: function (res) {
            if (res.data.code == 200) {
              that.setData({
                isLogin: true
              });
              app.globalData.loginState = true;
              console.log("登录状态修改成功")
              wx.showToast({
                title: '登录成功!',
                icon: 'success',
                duration: 3000,
                success: res => {
                  setTimeout(() => {
                    wx.reLaunch({
                      url: '/pages/home/home',
                    })
                  }, 2000)
                },
              })
            } else {
              wx.showToast({
                title: "登录失败",
                duration: 1000,
                icon: 'none',
                mask: true
              })
            }
          }
        })
      }
    })
  },

  onChooseAvatar(e) {
    const {
      avatarUrl
    } = e.detail

    //对临时图片链接进行base64编码
    var avatarUrl_base64 = 'data:image/jpeg;base64,' + wx.getFileSystemManager().readFileSync(avatarUrl, 'base64')
    const {
      nickName
    } = this.data.userInfo
    this.setData({
      "userInfo.avatarUrl": avatarUrl,
      "userInfo.avatarUrlBase64": avatarUrl_base64,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  onInputChange(e) {
    const nickName = e.detail.value
    const {
      avatarUrl
    } = this.data.userInfo
    this.setData({
      "userInfo.nickName": nickName,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
})
相关推荐
成都渲染101云渲染66663 小时前
如何在3ds Max中实现更快、更高质量的渲染
前端·javascript·人工智能
闲猫4 小时前
Spring AI 对接Deepseek ChatModel 聊天对话
java·前端·spring
自信的未来6 小时前
JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
java·前端·json
全栈前端老曹7 小时前
【MongoDB】安全与权限管理 —— 用户认证、角色权限、SSL 加密
前端·javascript·数据库·安全·mongodb·nosql·ssl
zhangxingchao7 小时前
AI大模型核心八:从 Agent Skill、长文档 RAG 到知识库更新与训练策略
前端·人工智能·后端
zhangxingchao8 小时前
AI大模型核心七:从 Workflow、RAG、记忆治理到幂等性
前端·人工智能·后端
gyx_这个杀手不太冷静9 小时前
Agent开发进阶指南(第 1 章):AI Agent 到底是什么?
前端·agent·ai编程
小小小小宇9 小时前
模型相关知识
前端
小小小小宇9 小时前
模型相关知识二
前端
IT_陈寒9 小时前
Python装饰器竟然偷偷改了函数名?这个坑我爬了三天
前端·人工智能·后端