uni-app 对接微信小程序获取用户个人信息和获取用户手机号码

第一次对接小程序授权的时候以为能一进入这个项目就要调用获取授权信息，后面写好逻辑之后提交审核，一直审核不通过，后面查了原因之后才发现不能一进入页面就调用授权，而且项目需要个人信息和手机号码两个都要获取，所以我只能分开两个页面写两个点击按钮，要进行微信授权一定要有按钮给用户点击才能掉起微信的授权框

获取用户个人信息

html：

//获取用户个人信息
<button class="btn typography" open-type="getUserInfo" @getuserinfo="miniprogramlogin">微信授权</button>

js: （为了方便我把每个步骤都分了一个方法写~）

miniprogramlogin(e) {var _this = this;wx.login({success(res) {if (res.code) {_this.miniprogramcode = res.code;_this.getUserInfo(e);} else {console.log('登录失败！' + res.errMsg);}}});},//获取微信个人信息getUserInfo(e) {var _this = this;let params = { code: this.miniprogramcode };let data = Api.apiCall('get', Api.weixin.miniprogramlogin, params);//请求后端接口if (data) {//这个接口我这边后端会返回两种格式，返回sessionKey是未授权过，所以得判断是否返回的是sessionKey和openidif (data.sessionKey) {this.sessionKey = data.sessionKey;//未授权过直接调用微信APIwx.getUserInfo({success: function(res) {_this.getuserdata(res);//获取参数再调用接口传给后端_this.signature = res.signature;_this.rawData = res.rawData;}});} else {//已授权过直接保存接口返回的用户信息（看情况可不用这一步）_this.login(data.userInfo);uni.setStorageSync('userInfo', data.userInfo);uni.setStorageSync('userInfos', data.userInfo);uni.setStorageSync('token', data.tokenHead + data.token);uni.switchTab({url: '/pages/index/index'});}}},//调用接扣传参解码getuserdata(resdata) {var _this = this;uni.request({url: '/api/wx/redirect/minAppInfo',method: 'get',header: {'content-type': 'application/x-www-form-urlencoded'},data: {encryptedData: resdata.encryptedData,iv: resdata.iv,sessionKey: _this.sessionKey,signature: resdata.signature,rawData: resdata.rawData},success: res => {_this.wxuserinfo = JSON.parse(res.data);//下面的看情况可删，因为我要获取两次授权所以用户信息授权完会直接跳到手机号授权页面uni.setStorageSync('sessionKey', _this.sessionKey);uni.setStorageSync('signature', resdata.signature);uni.setStorageSync('rawData', resdata.rawData);uni.navigateTo({url: `/public/miniprogramgetphone`});}});}

获取用户手机号码

html：

//获取用户微信绑定的手机号码
<button class="btn typography" open-type="getPhoneNumber" @getphonenumber="getminiprogramcode">手机号授权</button>

js:

//小程序授权登录接口getminiprogramcode(e) {console.log(e)var _this = this;//检验session_key是否过期，过期就要重新调用wx.login获取session_key wx.checkSession({success(res) {//session_key 未过期，并且在本生命周期一直有效console.log(uni.getStorageSync('sessionKey'));//获取上个页面存进缓存里的信息_this.sessionKey = uni.getStorageSync('sessionKey');_this.signature = uni.getStorageSync('signature');_this.rawData = uni.getStorageSync('rawData');_this.getPhoneNumber(e);},fail() {// session_key 已经失效，重新登录console.log('重新登录1')wx.login({success(res) {if (res.code) {_this.miniappcode = res.code;_this.getphonecode(e);} else {console.log('登录失败！' + res.errMsg);}}});}});},getPhoneNumber(e) {var _this = this;console.log(e.detail.errMsg);//授权后的处理if (e.detail.errMsg == 'getPhoneNumber:ok') {//点击获取的信息let params = {encryptedData: e.detail.encryptedData,sessionKey: _this.sessionKey,iv: e.detail.iv,signature: _this.signature,rawData: _this.rawData,};_this.getuserphonnumber(params,e);}},getuserphonnumber(paramsdata,e) {var _this = this;let params = {encryptedData: paramsdata.encryptedData,sessionKey: paramsdata.sessionKey,iv: paramsdata.iv,signature: paramsdata.signature,rawData: paramsdata.rawData,};let data = await Api.apiCall('get', Api.weixin.getminprogramuserphone, params);if (data) {//授权登录后保存信息改变登录状态并跳转首页_this.login(data.userInfo);uni.setStorageSync('userInfo', data.userInfo);uni.setStorageSync('userInfos', data.userInfo);uni.setStorageSync('token', data.tokenHead + data.token);uni.switchTab({url: '/pages/index/index'});}}

可能看着会有点乱，后期我会整理一下流程，主要因为我这个项目是要点击两次按钮获取授权信息，所以有些参数信息我只能获取之后存入缓存然后到另一个页面再获取

uni-app 对接微信小程序获取用户个人信息和获取用户手机号码相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
微信小程序开发笔记进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.云函数五.程序流程一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...
微信小程序开发笔记进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序开发笔记进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）
文章目录一.前言二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程六.参考一.前言微信小程序开发笔记--导读大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...
微信小程序同一个登录按钮上触发获取微信用户信息和电话号码
微信小程序同一个登录按钮上触发获取微信用户信息和电话号码因为微信小程序获取用户信息getuserinfo方法和获取电话号码open-type="getPhoneNumber" @ ...
微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
SpringBoot对接微信小程序支付功能开发（一，下单功能）
1,接入前准备: 接入模式选择直连模式: 申请小程序,得到APPID,并开通微信支付: 申请微信商户号,得到mchid,并绑定APPID: 配置商户API key,下载并配置商户证书,根据微信官方文档 ...
uniapp开发APP和微信小程序——使用高德实现定位
在uniapp官网中明确说了可以使用高德地图来实现APP和微信小程序的定位. 在dcloud社区里大佬已经给出了实现方法(链接:uni-app 中使用微信小程序第三方 SDK 及资源汇总 - DClo ...

uni-app 对接微信小程序获取用户个人信息和获取用户手机号码

获取用户个人信息

获取用户手机号码

uni-app 对接微信小程序获取用户个人信息和获取用户手机号码相关推荐

最新文章

热门文章