广告
返回顶部
首页 > 资讯 > 移动开发 >【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
  • 851
分享到

【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)

小程序微信小程序微信1024程序员节 2023-10-26 11:10:15 851人浏览 八月长安
摘要

🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于小程序的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

授权流程讲解

一.用户信息授权登录

1.wx.login

2.wx.getUserProfile

3.代码

WXML

JS

二.用户信息授权登录之后台交互

前期准备

①准备数据接口

②密钥以及appid

后端代码

WXML

JS

utils/user.js【封装的代码块】

三.手机号授权登录之后台交互

后端代码

WXML

JS

四.投票界面与后台交互

1.效果预览

2.代码演示

vote/list.wxml

 vote/list.wxss

vote/list.js

vote/addvote.wxml

 vote/addvote.wxss

vote/addvote.js

vote/many.wxml

 vote/many.wxss

vote/many.js


授权流程讲解

我们在使用微信中的小程序时,都会要我们进行授权,例如下面这样

那么这样的用户授权时怎么实现的呢,这一篇主要就是讲解用户授权登录的流程!!!

图片说明:

客户端调用 wx.login() 获取 临时登录凭证code,通过 wx.request() 发起网络请求,将 code 传给服务端
2、服务端使用 code + appid + appsecret 向微信换取 (调用 auth.code2Session 接口)用户唯一标识openid 会话密钥session_key
3、服务端自定义 登录状态token(与openid、session_key关联)返回客户端
4、客户端将 登录状态token 存入 缓存storage(推荐使用 wx.setStorageSync(‘key’, ‘value’) 同步存储)
5、客户端wx.request() 发起请求时,携带登录状态token (推荐使用 wx.getStorageSync(‘key’) 同步获取)
6、服务端通过 登录状态token 查询到对应 openid 和 session_key
7、验证成功后返回业务数据给客户端

一.用户信息授权登录

其中有两种方法,第一种方法是点击登录之后便直接获取了用户的个人信息,而第二种会询问用户是否同意授权,这样的话,会更具安全

1.wx.login

这个方法主要用于获取用户的登录凭证(code)。在用户进入小程序时,前端会调用wx.login来获取这个code,然后将这个code发送给后台服务器。后台服务器再向微信发送请求,通过这个code来获取用户的唯一标识(openid)以及本次登录的会话密钥(session_key)。之后,后台服务器将这两个信息传回前台,用于自定义登录状态和用户唯一标识

2.wx.getUserProfile

这个方法主要用于获取用户的更多详细信息,如昵称、头像等。在使用这个方法之前,需要先调用wx.authorize接口来发起授权请求,请求用户授权提供这些信息。如果用户同意授权,就可以通过调用wx.getUserProfile方法来获取这些详细信息

3.代码

WXML

        昵称:{{userInfo.nickName}}

js

// pages/index/index.jsPage({  data: {    userInfo: {},    canIUseGetUserProfile: false,  },  onLoad() {    // if (wx.getUserProfile) {    //   this.setData({    //     canIUseGetUserProfile: true    //   })    // }  },  getUserProfile(e) {    console.log('getUserProfile')    // 推荐使用 wx.getUserProfile 获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认    // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗    wx.getUserProfile({      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写      success: (res) => {        console.log(res);        this.setData({          userInfo: res.userInfo,          hasUserInfo: true        })      }    })  },  wxLogin: function(e) {    debugger    console.log('wxLogin')    console.log(e.detail.userInfo);    this.setData({      userInfo: e.detail.userInfo    })    if (e.detail.userInfo == undefined) {      app.globalData.hasLogin = false;      util.showErrorToast('微信登录失败');      return;    }      },    onReady() {  },    onShow() {  },    onHide() {  },    onUnload() {  },    onPullDownRefresh() {  },    onReachBottom() {  },    onShareAppMessage() {  }})

用户授权登录后,后台便会保存用户的信息

二.用户信息授权登录之后台交互

前期准备

①准备数据接口

②密钥以及appid

后端代码

package com.zking.SSM.wxcontroller;import cn.binarywang.wx.miniapp.bean.WxMaPhoneNumberInfo;import com.alibaba.fastJSON.JSONObject;import com.zking.ssm.annotation.LoginUser;import com.zking.ssm.model.UserInfo;import com.zking.ssm.model.WxLoginInfo;import com.zking.ssm.model.WxUser;import com.zking.ssm.service.UserToken;import com.zking.ssm.service.UserTokenManager;import com.zking.ssm.service.WxUserService;import com.zking.ssm.util.JacksonUtil;import com.zking.ssm.util.ResponseUtil;import com.zking.ssm.util.UserTypeEnum;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.util.StringUtils;import org.springframework.WEB.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import cn.binarywang.wx.miniapp.api.WxMaService;import cn.binarywang.wx.miniapp.bean.WxMaJscode2SessionResult;import javax.servlet.Http.httpservletRequest;import java.text.DateFORMat;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;@Slf4j@RestController@RequestMapping("/wx/auth")public class WxAuthController {    @Autowired    private WxMaService wxService;    @Autowired    private WxUserService userService;        @PostMapping("login_by_weixin")    public Object loginByWeixin(@RequestBody WxLoginInfo wxLoginInfo, HttpServletRequest request) {        //客户端需携带code与userInfo信息        String code = wxLoginInfo.getCode();        UserInfo userInfo = wxLoginInfo.getUserInfo();        if (code == null || userInfo == null) {            return ResponseUtil.badArgument();        }        //调用微信sdk获取openId及sessionKey        String sessionKey = null;        String openId = null;        try {            long beginTime = System.currentTimeMillis();            //            WxMaJscode2SessionResult result = this.wxService.getUserService().getSessionInfo(code);//            Thread.sleep(6000);            long endTime = System.currentTimeMillis();            log.info("响应时间:{}",(endTime-beginTime));            sessionKey = result.getSessionKey();//session id            openId = result.getOpenid();//用户唯一标识 OpenID        } catch (Exception e) {            e.printStackTrace();        }        if (sessionKey == null || openId == null) {            log.error("微信登录,调用官方接口失败:{}", code);            return ResponseUtil.fail();        }else{            log.info("openId={},sessionKey={}",openId,sessionKey);        }        //根据openId查询wx_user表        //如果不存在,初始化wx_user,并保存到数据库中        //如果存在,更新最后登录时间        WxUser user = userService.queryByOid(openId);        if (user == null) {            user = new WxUser();            user.setUsername(openId);            user.setPassword(openId);            user.setWeixinOpenid(openId);            user.setAvatar(userInfo.getAvatarUrl());            user.setNickname(userInfo.getNickName());            user.setGender(userInfo.getGender());            user.setUserLevel((byte) 0);            user.setStatus((byte) 0);            user.setLastLoginTime(new Date());            user.setLastLoginIp(IpUtil.client(request));            user.setShareUserId(1);            userService.add(user);        } else {            user.setLastLoginTime(new Date());            user.setLastLoginIp(IpUtil.client(request));            if (userService.updateById(user) == 0) {                log.error("修改失败:{}", user);                return ResponseUtil.updatedDataFailed();            }        }        // token        UserToken userToken = null;        try {            userToken = UserTokenManager.generateToken(user.getId());        } catch (Exception e) {            log.error("微信登录失败,生成token失败:{}", user.getId());            e.printStackTrace();            return ResponseUtil.fail();        }        userToken.setSessionKey(sessionKey);        log.info("SessionKey={}",UserTokenManager.getSessionKey(user.getId()));        Map result = new HashMap();        result.put("token", userToken.getToken());        result.put("tokenExpire", userToken.getExpireTime().toString());        userInfo.setUserId(user.getId());        if (!StringUtils.isEmpty(user.getMobile())) {// 手机号存在则设置            userInfo.setPhone(user.getMobile());        }        try {            DateFormat df = new SimpleDateFormat("yyyy-MM-dd");            String reGISterDate = df.format(user.getAddTime() != null ? user.getAddTime() : new Date());            userInfo.setRegisterDate(registerDate);            userInfo.setStatus(user.getStatus());            userInfo.setUserLevel(user.getUserLevel());// 用户层级            userInfo.setUserLevelDesc(UserTypeEnum.getInstance(user.getUserLevel()).getDesc());// 用户层级描述        } catch (Exception e) {            log.error("微信登录:设置用户指定信息出错:"+e.getMessage());            e.printStackTrace();        }        result.put("userInfo", userInfo);        log.info("【请求结束】微信登录,响应结果:{}", JSONObject.toJSONString(result));        return ResponseUtil.ok(result);    }   }}

WXML

  

JS

// pages/auth/login/login.jsvar util = require('../../../utils/util.js');var user = require('../../../utils/user.js');const app = getApp();Page({        data: {        canIUseGetUserProfile: false, // 用于向前兼容        lock:false    },    onLoad: function(options) {        // 页面初始化 options为页面跳转所带来的参数        // 页面渲染完成        if (wx.getUserProfile) {          this.setData({            canIUseGetUserProfile: true          })        }        //console.log('login.onLoad.canIUseGetUserProfile='+this.data.canIUseGetUserProfile)    },        onReady() {    },        onShow() {    },    getUserProfile(e) {        console.log('getUserProfile');        // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认        // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗        wx.getUserProfile({            desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写            success: (res) => {                //console.log(res);                user.checkLogin().catch(() => {                    user.loginByWeixin(res.userInfo).then(res => {                      app.globalData.hasLogin = true;                      wx.navigateBack({                        delta: 1                      })                    }).catch((err) => {                      app.globalData.hasLogin = false;                      if(err.errMsg=="request:fail timeout"){                        util.showErrorToast('微信登录超时');                      }else{                        util.showErrorToast('微信登录失败');                      }                      this.setData({                        lock:false                      })                    });                  });            },            fail: (res) => {                app.globalData.hasLogin = false;                console.log(res);                util.showErrorToast('微信登录失败');            }        });    },    wxLogin: function(e) {        console.log('wxLogin');        if (e.detail.userInfo == undefined) {          app.globalData.hasLogin = false;          util.showErrorToast('微信登录失败');          return;        }        user.checkLogin().catch(() => {            user.loginByWeixin(e.detail.userInfo).then(res => {              app.globalData.hasLogin = true;              wx.navigateBack({                delta: 1              })            }).catch((err) => {              app.globalData.hasLogin = false;              if(err.errMsg=="request:fail timeout"){                util.showErrorToast('微信登录超时');              }else{                util.showErrorToast('微信登录失败');              }            });                });    },    accountLogin() {        console.log('开发中....')    }})

utils/user.js【封装的代码块】

const util = require('../utils/util.js');const api = require('../config/api.js');function checkSession() {  return new Promise(function(resolve, reject) {    wx.checkSession({      success: function() {        resolve(true);      },      fail: function() {        reject(false);      }    })  });}function login() {  return new Promise(function(resolve, reject) {    wx.login({      success: function(res) {        if (res.code) {          resolve(res);        } else {          reject(res);        }      },      fail: function(err) {        reject(err);      }    });  });}function loginByWeixin(userInfo) {  return new Promise(function(resolve, reject) {    return login().then((res) => {      //登录远程服务器      util.request(api.AuthLoginByWeixin, {        code: res.code,        userInfo: userInfo      }, 'POST').then(res => {        if (res.errno === 0) {          //存储用户信息          wx.setStorageSync('userInfo', res.data.userInfo);          wx.setStorageSync('token', res.data.token);          resolve(res);        } else {          reject(res);        }      }).catch((err) => {        reject(err);      });    }).catch((err) => {      reject(err);    })  });}function checkLogin() {  return new Promise(function(resolve, reject) {    if (wx.getStorageSync('userInfo') && wx.getStorageSync('token')) {      checkSession().then(() => {        resolve(true);      }).catch(() => {        reject(false);      });    } else {      reject(false);    }  });}module.exports = {  loginByWeixin,  checkLogin,};

三.手机号授权登录之后台交互

手机号授权登录的流程与用户信息授权登录流程是一样的,只不过向微信调用的接口有所不同

后端代码

package com.zking.ssm.wxcontroller;import cn.binarywang.wx.miniapp.bean.WxMaPhoneNumberInfo;import com.alibaba.fastjson.JSONObject;import com.zking.ssm.annotation.LoginUser;import com.zking.ssm.model.UserInfo;import com.zking.ssm.model.WxLoginInfo;import com.zking.ssm.model.WxUser;import com.zking.ssm.service.UserToken;import com.zking.ssm.service.UserTokenManager;import com.zking.ssm.service.WxUserService;import com.zking.ssm.util.JacksonUtil;import com.zking.ssm.util.ResponseUtil;import com.zking.ssm.util.UserTypeEnum;import lombok.extern.slf4j.Slf4j;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.util.StringUtils;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestBody;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;import cn.binarywang.wx.miniapp.api.WxMaService;import cn.binarywang.wx.miniapp.bean.WxMaJscode2SessionResult;import javax.servlet.http.HttpServletRequest;import java.text.DateFormat;import java.text.SimpleDateFormat;import java.util.Date;import java.util.HashMap;import java.util.Map;@Slf4j@RestController@RequestMapping("/wx/auth")public class WxAuthController {          @PostMapping("bindPhone")    public Object bindPhone(@LoginUser Integer userId, @RequestBody String body) {        log.info("【请求开始】绑定手机号码,请求参数,body:{}", body);        String sessionKey = UserTokenManager.getSessionKey(userId);        String encryptedData = JacksonUtil.parseString(body, "encryptedData");        String iv = JacksonUtil.parseString(body, "iv");        WxMaPhoneNumberInfo phoneNumberInfo = null;        try {            phoneNumberInfo = this.wxService.getUserService().getPhoneNoInfo(sessionKey, encryptedData, iv);        } catch (Exception e) {            log.error("绑定手机号码失败,获取微信绑定的手机号码出错:{}", body);            e.printStackTrace();            return ResponseUtil.fail();        }        String phone = phoneNumberInfo.getPhoneNumber();        WxUser user = userService.selectByPrimaryKey(userId);        user.setMobile(phone);        if (userService.updateById(user) == 0) {            log.error("绑定手机号码,更新用户信息出错,id:{}", user.getId());            return ResponseUtil.updatedDataFailed();        }        Map data = new HashMap();        data.put("phone", phone);        log.info("【请求结束】绑定手机号码,响应结果:{}", JSONObject.toJSONString(data));        return ResponseUtil.ok(data);    }      }}

WXML

头像 名字 手机号码 ID号

JS

var util = require('../../../utils/util.js');var api = require('../../../config/api.js');var user = require('../../../utils/user.js');var app = getApp();Page({    data: {    userInfo: {},    hasLogin: false,    userSharedUrl: ''  },    onLoad: function (options) {  },  onShow: function () {    let that = this;    //获取用户的登录信息    let userInfo = wx.getStorageSync('userInfo');    this.setData({      userInfo: userInfo,      hasLogin: true    });  },  getPhoneNumber: function (e) {      console.log(e);    let that = this;    if (e.detail.errMsg !== "getPhoneNumber:ok") {      // 拒绝授权      return;    }    if (!this.data.hasLogin) {      wx.showToast({        title: '绑定失败:请先登录',        icon: 'none',        duration: 2000      });      return;    }    util.request(api.AuthBindPhone, {      iv: e.detail.iv,      encryptedData: e.detail.encryptedData    }, 'POST').then(function (res) {      if (res.errno === 0) {        let userInfo = wx.getStorageSync('userInfo');        userInfo.phone = res.data.phone;//设置手机号码        wx.setStorageSync('userInfo', userInfo);        that.setData({          userInfo: userInfo,          hasLogin: true        });        wx.showToast({          title: '绑定手机号码成功',          icon: 'success',          duration: 2000        });      }    });  },  exitLogin: function () {    wx.showModal({      title: '',      confirmColor: '#b4282d',      content: '退出登录?',      success: function (res) {        if (!res.confirm) {          return;        }        util.request(api.AuthLoGout, {}, 'POST');        app.globalData.hasLogin = false;        wx.removeStorageSync('token');        wx.removeStorageSync('userInfo');        wx.reLaunch({          url: '/pages/index/index'        });      }    })  }})

四.投票界面与后台交互

1.效果预览

2.代码演示

vote/list.wxml

      你好,我是模态框                                        {{item.name}}              

 vote/list.wxss

.vote-button {  display: flex;  flex-direction: row;  flex-wrap: wrap;  }.myvotes {  padding-top: 50px;  padding-left: 5px;  height: 430rpx;  width: 360rpx;  display: flex;  flex-direction: column;}.myimg{  display: flex;  justify-content: center;}.myview{}.vote-icon {  margin: 5px;  width: 320rpx;  height: 300rpx;  border-radius:25px;  border: 10px solid rgb(247, 198, 66);}.img-title{  width: 32px;  height: 32px;}.vote-label { font-weight: 800; font-family: YouYuan;  width: 350rpx;  padding-left: 65px;    }.info-title{  display: flex;  align-items: center;  margin-left:65px ;  width: 300px;  border-radius:25px;  border: 2px solid rgb(247, 198, 66);}.vote-add {  margin-left: 340px;  margin-top: 35px;  width: 120rpx;  height: 120rpx;}.hidden {  display: none;}.title-view {  background-color: beige;  font-weight: 700;  padding-left: 7px;}.info-title {  padding: 5px 5px 10px 5px;  border-top: 1px solid rgb(129, 129, 127);}.info-text {  height: 100px;  padding: 5px 5px 10px 5px;  border-top: 1px solid rgb(129, 129, 127);}.image {  padding-left: 55px;  display: flex;  align-items: center;}.time {  border-top: 1px solid rgb(129, 129, 127);  padding: 5px 0px 5px 0px;  display: flex;  align-items: center;}.image-container {  padding-left: 60px;}.info-sousuo {  margin-left: 85px;  padding-left: 20px;  border-radius: 25px;  border: 4px solid rgb(214, 214, 98);  width: 250px;}.section{  color: #aaa;  display: flex;  justify-content: center;}.list-info {  margin-top: 10px;  color: #aaa;}.list-num {  color: #e40909;  font-weight: 700;}.join {  padding: 0px 0px 0px 10px;  color: #aaa;}.state {  margin: 0px 6px 0px 6px;  border: 1px solid #93b9ff;  color: #93b9ff;}.list-tag {  padding: 3px 0px 10px 0px;  display: flex;  align-items: center;}.list-title {  display: flex;  justify-content: space-between;  color: #333;  font-weight: 900;}.yyy{  display: flex;  align-items: center;}.list-img{  height: 300rpx;  width: 90%;  border-radius: 50rpx;  margin: 5px 5px 5px 20px;}.centered {  display: flex;    justify-content: center;  }.video-img {  width: 100px;  height: 100px;}.list {  border-bottom: 1px solid #6b6e74;  padding: 10px;}.mobi-text {  font-weight: 700;  padding: 15px;}.mobi-icon {  border-left: 5px solid #e40909;}.mobi-title {  background-color: rgba(158, 158, 142, 0.678);  margin: 10px 0px 10px 0px;}.swiper-item {  height: 300rpx;  width: 100%;  border-radius: 10rpx;}.userinfo {  display: flex;  flex-direction: column;  align-items: center;  color: #aaa;}.userinfo-avatar {  overflow: hidden;  width: 128rpx;  height: 128rpx;  margin: 20rpx;  border-radius: 50%;}.usermotto {  margin-top: 200px;}.filx{  display: flex;  align-items: center;}.container {  padding: 20px;}.modal-container {  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  background-color: #fff;  width: 80%;  max-height: 80%;  overflow-y: auto;  padding: 20px;}.mask {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(0, 0, 0, 0.5);}button {  display: block;  margin-top: 10px;}.content {  margin-top: 10px;  border: 1px solid #ccc;  padding: 10px;}

vote/list.js

// pages/vote/list/list.jsPage({    addvote: function () {    console.log(111)    wx.navigateTo ({          url: '/pages/vote/addvote/addvote' // 跳转到目标页面的路径    })  },    data: {    myvotelist:[     {index:1, name:'投票统计',img:'../../../static/vote/totaldata-active.png'},     {index:3, name:'历史投票',img:'../../../static/vote/voterecords-active.png'},     {index:2, name:'赞成人数',img:'../../../static/vote/yes-active.png'},     {index:3, name:'反对人数',img:'../../../static/vote/no-active.png'},       ], modalVisible: false,   // 模态框是否可见  },   // 点击事件,显示模态框   showModal(e) {    this.setData({      modalVisible: true    });  },    onLoad(options) {  },    onReady() {  },    onShow() {  },    onHide() {  },    onUnload() {  },    onPullDownRefresh() {  },    onReachBottom() {  },    onShareAppMessage() {  }})

vote/addvote.wxml

                

 vote/addvote.wxss

.container {  padding: 20rpx;}button {  margin-top: 60px;  background-color: rgb(247, 198, 66);  color: #fff;  padding: 10rpx 20rpx;  border-radius: 4rpx;  text-align: center;}  .title {  font-size: 30rpx;  font-weight: bold;  margin-bottom: 10rpx;}

vote/addvote.js

Page({  many: function () {    console.log(111)    wx.navigateTo ({          url: '/pages/vote/many/many' // 跳转到目标页面的路径    })  },  data: {    radioOptions: ['选项1', '选项2', '选项3'],    checkboxOptions: ['选项A', '选项B', '选项C'],    voteTitle: '',    voteDescription: '',    selectedRadioIndex: -1,    selectedCheckboxIndexes: []  },  onTitleInput(e) {    this.setData({      voteTitle: e.detail.value    });  },  onDescriptionInput(e) {    this.setData({      voteDescription: e.detail.value    });  },  onRadiochange(e) {    this.setData({      selectedRadioIndex: e.detail.value    });  },  onCheckboxChange(e) {    this.setData({      selectedCheckboxIndexes: e.detail.value    });  },  submitVote() {    // 获取投票的标题、描述以及选择的选项    const { voteTitle, voteDescription, selectedRadioIndex, selectedCheckboxIndexes } = this.data;    // TODO: 处理提交投票逻辑,可以发送请求给服务器等    // 打印投票结果    console.log('投票标题:', voteTitle);    console.log('投票描述:', voteDescription);    console.log('单选投票选项:', selectedRadioIndex);    console.log('多选投票选项:', selectedCheckboxIndexes);  },    data: {  },    onLoad(options) {  },    onReady() {  },    onShow() {  },    onHide() {  },    onUnload() {  },    onPullDownRefresh() {  },    onReachBottom() {  },    onShareAppMessage() {  }})

vote/many.wxml

     {title}}" disabled /> -->                       添加选项      

 vote/many.wxss

.container {  display: flex;  flex-direction: column;  align-items: center;} .title{  height: 200px;  font-weight: bolder;  font-size: 70rpx; margin-left: 20px; margin-top: -160px; margin-bottom: -50px;}.line {  width: 100%;  height: 1px;  background-color: #ccc;}.info{height: 70px;width:380px;}.select{  display: flex;flex-direction: row;align-self: start;}.select-add {margin-left: 15px;  margin-top: 15px;  width: 50rpx;  height: 50rpx;}.select-content{  margin-top: 10px;  margin-left: 7px;  display: flex;  align-items: center;}.vote-content {  width: 200rpx;  height: 30rpx;  margin-top: 17px;  margin-left: 7px;  display: flex;  align-items: center;}.scroll-container {  height: 500rpx; }.submit-button {margin-top: 20px;  width: 200rpx;  height: 60rpx;  background-color: rgb(241, 189, 46);}

vote/many.js

const app = getApp()const api = require("../../../config/api.js")const util = require("../../../utils/util")Page({  data: {    inputList: [],    voteTitle: ''  },  // 显示输入框  showInput: function () {    const length = this.data.inputList.length;    const newInputList = [...this.data.inputList];    newInputList.push({      value: ''    });    this.setData({      inputList: newInputList    });  },  // 输入框内容改变  inputChange: function (event) {    const index = event.currentTarget.dataset.index;    const value = event.detail.value;    const newInputList = [...this.data.inputList];    newInputList[index].value = value;    this.setData({      inputList: newInputList    });  },  // 删除输入框  hideInput: function (event) {    const index = event.currentTarget.dataset.index;    const newInputList = [...this.data.inputList];    newInputList.splice(index, 1);    this.setData({      inputList: newInputList    });  },  // 投票标题改变  titleChange: function (event) {    const value = event.detail.value;    this.setData({      voteTitle: value    });  },  // 提交投票  submitVote: function () {    // 获取投票标题和选项内容    const title = this.data.voteTitle;    const options = this.data.inputList.map(item => item.value);    // 打印标题和选项    console.log('投票标题:', title);    console.log('投票选项:', options);    let data = {      title: title,      options: options,    };    util.request(api.VoteADD, data, 'POST').then(res => {      console.log(res)      // 清空投票标题和选项内容      this.setData({        voteTitle: '',        inputList: []      });    })  },    onLoad(options) {  },    onReady() {  },    onShow() {  },    onHide() {  },    onUnload() {  },    onPullDownRefresh() {  },    onReachBottom() {  },    onShareAppMessage() {  }})

好啦,今天的分享就到这了,希望能够帮到你呢!😊😊  

来源地址:https://blog.csdn.net/m0_74315688/article/details/133963086

--结束END--

本文标题: 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)

本文链接: https://www.lsjlt.com/news/458468.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序登录方法之授权登陆及获取微信用户手机号
    目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获...
    99+
    2022-11-13
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2022-11-13
  • 微信小程序中如何获取用户手机号授权登录
    随着微信小程序的普及,许多应用程序需要用户登录才能提供更好的服务。而获取用户手机号码是验证用户身份和确保账户安全的重要步骤之一。因此,在本文中,我们将介绍如何在微信小程序中实现手机号授权登录。 步骤一:在小程序后台添加手机号授权 首先,在小...
    99+
    2023-08-17
    微信小程序 小程序 前端 javascript vue.js
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2022-11-11
  • 微信小程序如何开发用户授权登陆
    这篇文章主要介绍了微信小程序如何开发用户授权登陆,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。准备:微信开发者工具下载地址:https://...
    99+
    2022-10-19
  • 微信小程序开发之用户授权登录的方法
    这篇文章将为大家详细讲解有关微信小程序开发之用户授权登录的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备:微信开发者工具下载地址:https://developers.weixin.qq.com/...
    99+
    2023-06-14
  • 微信小程序授权登录
    微信小程序—授权登录 一、小程序登录 登录流程时序 说明: 1.小程序端调用 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。 2.服务器调用 code2Session 接口,换取 用户唯一标识 OpenID 和 ...
    99+
    2023-09-01
    微信小程序 小程序 微信 授权登录
  • 微信小程序实现授权登录之怎么获取用户信息
    这篇文章主要讲解了“微信小程序实现授权登录之怎么获取用户信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序实现授权登录之怎么获取用户信息”吧!小程序登录小程序可以通过微信官方提供的...
    99+
    2023-06-30
  • 微信小程序用户如何授权获取手机号-getPhoneNumber
    本篇内容主要讲解“微信小程序用户如何授权获取手机号-getPhoneNumber”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序用户如何授权获取手机号-getPhoneNumber”吧!...
    99+
    2023-06-13
  • 微信小程序开发之获取用户信息
    环境 微信开发者工具 Stable 1.06.2303220云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的...
    99+
    2023-09-27
    微信小程序
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能
    一、解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面...
    99+
    2023-08-16
    小程序 微信 javascript
  • 微信小程序如何授权登录
    小编给大家分享一下微信小程序如何授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!注:没有在微信开放平台做开发者资质认证的就...
    99+
    2022-10-19
  • 怎么授权登录微信小程序
    本篇文章为大家展示了怎么授权登录微信小程序,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。授权登录的基本流程上图是微信小程序官网提供的授权登录基本流程图,这里我只从前端开发的角度来讲解一下该流程。通过...
    99+
    2023-06-08
  • 微信小程序获取用户信息
    要在微信小程序中获取用户信息,你可以按照以下步骤进行操作: 在小程序的app.json文件中添加"scope.userinfo"权限,例如: ``` "permission": {   "scope.userinfo": {     "d...
    99+
    2023-09-21
    微信小程序 小程序
  • 微信小程序开发怎么获取用户信息
    这篇文章主要介绍了微信小程序开发怎么获取用户信息的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发怎么获取用户信息文章都会有所收获,下面我们一起来看看吧。第一中直接授权获取(在同一页面之中):首先在微...
    99+
    2023-06-29
  • 微信小程序如何同时获取用户信息和用户手机号
    今天在写登陆页面的时候,由于需要的个人信息和手机号的授权,但是如果在页面上直接放2个按钮,岂不是很呆??? 索性就写了一个mask层,去引导用户授权手机号。 1. 当我点击快捷登录...
    99+
    2022-11-12
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2022-10-19
  • 介绍微信小程序开发之用户授权登录的示例分析
    这篇文章将为大家详细讲解有关介绍微信小程序开发之用户授权登录的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备:微信开发者工具下载地址:https://developers.weixin.qq....
    99+
    2023-06-14
  • (详细版)java实现小程序获取微信登录,用户信息,手机号,头像
    ps:springboot结合mybatisPlus、mysql实现,简单易懂,一件粘贴使用,详细往下看↓ 步骤:          注册微信开发平台账号,并创建小程序,获取小程序的AppID和AppSecret。 2.在小程序中引导用户...
    99+
    2023-08-31
    微信 spring boot java
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作