微信小程序授权登录+获取手机号

一、官方文档背景：
- 小程序登录的链接:
- 微信小程序获取手机号的链接:
二、微信小程序授权登录+获取手机号
- 1、简单说明官方文档的操作：先授权登录后拿手机号
- 2、前端代码：
- - （1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）
  - （2）login.wxml
  - （3）login.wxss
  - （4）login.json
  - （5）login.js
三、以上操作后的页面展示：
- 附提醒：

一、官方文档背景：

这个图一定要认真去看，一步一步来，不要着急

小程序登录的链接:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html.

微信小程序获取手机号的链接:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html.

二、微信小程序授权登录+获取手机号

1、简单说明官方文档的操作：先授权登录后拿手机号

（1）前端调用wx.login接口拿到获取临时登录凭证code，并回传到后端
（2）后端利用auth.code2Session接口，换取用户唯一标识OpenID和会话密钥 session_key
（3）前端点击按钮时触发getPhoneNumber(e)回传给后端 encryptedData和iv 加密数据解密算法
（4）后端利用从前端得到的session_key、加密数据解密算法和自己拿到的app_id进行解密手机号后回传给前端

2、前端代码：

（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）

//封装请求
//const server = 'https://XXXX/';//正式域名 必须为https
const server = 'http://127.0.0.1:8080/';//测试域名
//本地前后端调试时可以先不检验合法域名（在微信开发者工具中的本地设置记得打钩这一选项），就可以进行访问HTTP啦
const requestUrl = ({url, params,success, method = "post"
}) => {       wx.showLoading({title: '加载中',});// let headerPost = {'content-type': 'application/x-www-form-urlencoded'}let headerPost= {'content-Type': 'application/json'}let headerGet = {'content-Type': 'application/json'}return new Promise((resolve, reject) => {wx.request({url: server + url,method: method,data: params,header: method = 'post' ? headerPost : headerGet,success: (res) => {wx.hideLoading();if (res['statusCode'] == 200) {resolve(res)//异步成功之后执行的函数} else {wx.showToast({title: res.data.msg || '请求出错',icon: 'none',duration: 2000,mask: true})reject(res.ErrorMsg);}},fail: (res) => {wx.hideLoading();wx.showToast({title: res.data.msg || '',icon: 'none',duration: 2000,mask: true})reject('网络出错');},complete: function () {wx.hideLoading()}})})
}
module.exports = {requestUrl: requestUrl
}

（2）login.wxml

<view wx:if="{{canIUse}}"><view class='header'><image src='/images/wx.jpg '></image></view><view class='content'><view>申请获取以下权限：</view><text>获得你的手机号</text></view><button class='bottom' type='primary' open-type="getPhoneNumber" lang="zh_CN" bindgetphonenumber="getPhoneNumber">微信授权</button></view><view wx:else>请升级微信版本</view>

附：样式图片

（3）login.wxss

.header {margin: 90rpx 0 90rpx 50rpx;text-align: center;width: 650rpx;height: 300rpx;line-height: 450rpx;
}.header image {width: 200rpx;height: 200rpx;border-radius: 100rpx;
}.content {margin-left: 50rpx;margin-bottom: 90rpx;
}.content text {display: block;color: #9d9d9d;margin-top: 40rpx;
}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;
}

（4）login.json

{"usingComponents": {},"navigationBarTitleText":"授权登录"
}

（5）login.js

import requestUrl from '../../utils/util.js'
// 获取应用实例
const app = getApp()Page({data: {//判断小程序的API，回调，参数，组件等是否在当前版本可用。canIUse: wx.canIUse('button.open-type.getUserInfo'),openid: null,sessionkey:null,token: null,phonenumber:null},onLoad: function (options) {//登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIdif (res.code) {console.log('code', res.code)requestUrl.requestUrl({url: "wx/getOpenId",params: {code: res.code},method: 'GET',}).then((res) => {this.data.openid = res.data.data.openIdthis.data.sessionkey = res.data.data.sessionKey}).catch((errorMsg) => {console.log(errorMsg)})}}})},//获取手机号getPhoneNumber: function (e) {//点击的“拒绝”或者“允许// console.log(e.detail.errMsg)// console.log(e.detail.iv)// console.log(e.detail.encryptedData)if(e.detail.errMsg=="getPhoneNumber:ok"){//点击了“允许”按钮，requestUrl.requestUrl({url:"wx/getPhone",params: {encryptedData: e.detail.encryptedData,iv: e.detail.iv,sessionKey: this.data.sessionkey,openId: this.data.openid},method:"post",}).then((res) => {//then接收一个参数，是函数，并且会拿到我们在requestUrl中调用resolve时传的参数console.log("允许授权了")let data = {token: res.data.data.token,phonenumber: res.data.data.phone,openid: res.data.data.openId,sessionKey: res.data.data.sessionKey}if(res.data.code==200){wx.navigateTo({url: `../index/index?token=${data.token}&phone=${data.phonenumber}&openid=${data.openid}&sessionKey=${data.sessionKey}`,success: function(res) {},})}}).catch((errorMsg) => {console.log(errorMsg)})}}
})

三、以上操作后的页面展示：

附提醒：

1、获取手机号之前必须先登录
2、想要获取手机号必须要通过按钮点击获取
3、登录必须要有一个页面，否则正式提交上线审核不通过
4、我的请求代码是封装的，可以使用微信官方的进行请求后端的哈
5、前后端逻辑就是这些，主要就是数据要传到就行，交互就完成啦，最好的话后端还是需要传个token给前端进行保存，避免重复登录

编写不易，如果有帮助到的话，可以关注，点赞和收藏哦~ ↩︎

微信小程序授权登录+获取手机号相关推荐

基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
微信小程序授权登录获取手机号,偶尔出现41003问题
最近做微信授权登录获取手机号有时会出现41003问题,研究半天网上查了不少资料,梳理下过程: 从文档可知主要是wx.login()获取code顺序问题 <button class="b ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
微信小程序授权登录获取用户信息并保存至缓存用于下次登录
1.获取用户信息 wx.getUserProfile(Object object) 获取用户信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗 ...
微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
微信小程序授权登录——获取用户信息
小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序效果展示: 功能实现: 新建一个login页面 login.js: wx. ...
微信小程序授权登录获取用户头像和昵称时得到微信用户，记录getUserInfo转变为getUserProfile的使用修改
首先,在微信官方更新授权操作之前,我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid,这个可以参考我的上一篇博客(使用getUserInfo获取用户头像),但是微信官方弃用g ...
微信小程序授权登录获取用户名和昵称
微信授权官方文档登录流程时序: 这里我是用微信开发者工具写的前端 login.wxml代码: <view class="userinfo"><block wx: ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...

微信小程序授权登录+获取手机号

微信小程序授权登录+获取手机号

一、官方文档背景：

小程序登录的链接:

微信小程序获取手机号的链接:

二、微信小程序授权登录+获取手机号

1、简单说明官方文档的操作：先授权登录后拿手机号

2、前端代码：

（1）自定义util.js,替换util的原生utils.js(其实原生也可以用，按个人喜好）

（2）login.wxml

（3）login.wxss

（4）login.json

（5）login.js

三、以上操作后的页面展示：

附提醒：

微信小程序授权登录+获取手机号相关推荐

最新文章

热门文章