微信小程序 - 实现手机号登录--授权并获取手机号保存至本地

详细代码请见文档最下方，仅供参考，更多需要请查看官方文档

一、

微信官方文档 | 获取手机号

这是服务端的

这是我们前端获取手机号需要给接口传递的两个参数

注意：

参数一：获取access_token需要用到小程序密钥，这个需要从服务端获取，也就是需要请求后端接口获取access_token，千万不要将小程序密钥写在前端代码中，必须要从服务端获取。

参数二：code的获取我们可以点击后面的 "手机号获取凭证" 查看用法，很简单。下面二、就是手机号获取凭证地址。

二、

微信官方文档 | 手机号获取凭证

注意：这里有基础库版本限制，所以我们最好做一下低版本兼容处理；

个人使用时碰到的坑：

微信开放社区 | 使用getPhoneNumber获取手机号code，微信PC拿不到code，手机端可以获取到？

详细实现代码：

<template><view class="flex"><view class="title"><view class="logo"><image src="/static/image/logo.png" mode="widthFix" /></view></view><!-- 手机号登录  --授权并获取手机号保存至本地 --><buttontype="default"class="loginButton"open-type="getPhoneNumber"@getphonenumber="getPhoneNumber"><view class="row"><view class="icon"><u-icon name="weixin-fill" size="28"></u-icon></view><view style="font-size: 30rpx">微信登录</view></view></button><!-- 协议选择 --><view class="serve-rule"><u-checkbox-group size="24" @click="changeCheckStatus"><u-checkboxclass="checkbox"v-model="checkStatus"activeColor="#ff414e"></u-checkbox></u-checkbox-group><view class="protocol-prompt"><text @click="changeCheckStatus">本人理解并同意</text><text class="serve-label" @click.stop="onServiceAgreement">《隐私政策》</text><text class="serve-label" @click.stop="onUserAgreement">《用户协议》</text></view></view><u-toast ref="uToast" /></view>
</template><script>
export default {name: "login",data() {return {phoneCode: "", // 获取手机号使用的codephoneNumber: "", // 手机号access_token: "", // 用户tokencode: "", // authCode用户code码  ---- 登陆使用的codeuserInfo: "", //用户信息id: "",checkStatus: false, //协议是否勾选};},onLoad(options) {const version = wx.getSystemInfoSync().SDKVersion;console.log("当前版本号version", version);if (this.compareVersion(version, "2.21.2") >= 0) {uni.removeStorageSync("storage_USERPHONE");this.getWxCode(); // 获取微信用户code码--登录使用this.getAccessToken(); // 获取 accessToken --获取手机号使用} else {// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示wx.showModal({title: "提示",content:"当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",});}},methods: {// 获取微信用户code码--登录使用async getWxCode() {const result = await wx.login();// console.log(result);if (result.code) {this.code = result.code;console.log("登录使用的code =====>>>>>>", this.code);}},// 获取 accessToken 注意：要从服务端获取，密钥不能写在前端。 --获取手机号使用getAccessToken() {this.$http.getAccessToken().then((res) => {if (res.success) {let resObj = res.datas && res.datas.obj;console.log("resObj======>>>>>>", resObj);this.access_token = resObj.access_token;console.log("that.access_token======>>>>>>", this.access_token);}});},// 低版本兼容处理方法封装compareVersion(v1, v2) {v1 = v1.split(".");v2 = v2.split(".");const len = Math.max(v1.length, v2.length);while (v1.length < len) {v1.push("0");}while (v2.length < len) {v2.push("0");}for (let i = 0; i < len; i++) {const num1 = parseInt(v1[i]);const num2 = parseInt(v2[i]);if (num1 > num2) {return 1;} else if (num1 < num2) {return -1;}}return 0;},// 获取用户手机号-接口getUserPhone() {this.$http.getPhone({code: this.phoneCode,access_token: this.access_token,}).then((res) => {// console.log("用户手机号res====>",res)if (res.success) {let resDatas = res.datas;let phoneInfo = JSON.parse(resDatas.phone_info);// console.log("获取到的用户手机号相关信息=====>>>>>>", phoneInfo)this.phoneNumber = phoneInfo.phoneNumber;console.log("获取到的用户手机号=====>>>>>>", this.phoneNumber);uni.setStorageSync("storage_USERPHONE", this.phoneNumber);this.login();}});},// 获取手机号的code并授权getPhoneNumber(e) {console.log("e=====>>>>>>", e);if (this.checkStatus) {let detail = e.detail;if (detail.errMsg === "getPhoneNumber:ok") {let that = this;this.phoneCode = detail.code;console.log("获取手机号使用的code =====>>>>>>", this.phoneCode);if (this.phoneCode) {this.getUserPhone();} else {this.login();}} else {console.log("取消授权！");}} else {uni.showToast({icon: "none",title: "请阅读并确认隐私政策和用户协议",});}},// 登录async login() {uni.showLoading({title: "登录中.....",mask: true,});const res = await this.$http.wxLogin({code: this.code,udid: "**************",appletType: 4,});if (res.success) {if (res.datas.token) {uni.setStorageSync("ticket", res.datas.token);}if (res.datas.obj) {uni.setStorageSync("userInfo", res.datas.obj);this.id = res.datas.obj.extInfo.id;}this.getAppletVersion();return;}},getAppletVersion() {uni.hideLoading();uni.reLaunch({url: `/pages/index/index`,});},// 切换是否选中复选框changeCheckStatus() {this.checkStatus = !this.checkStatus;},// 进入《隐私政策》onServiceAgreement() {uni.navigateTo({url: "/pages/privacy-policy/privacy-policy",fail(e) {console.log(e);},});},// 《用户协议》onUserAgreement() {uni.navigateTo({url: "/pages/user-service-agreement/user-service-agreement",fail(e) {console.log(e);},});},},
};
</script><style lang="scss" scoped>
.flex {display: flex;flex-flow: column nowrap;justify-content: flex-start;align-items: center;position: fixed;width: 100vw;height: 100vh;top: 200rpx;left: 0;padding: 0 64rpx;.title {display: flex;flex-direction: column;align-items: center;margin-bottom: 200rpx;width: 240rpx;.logo {width: 360rpx;height: 360rpx;overflow: hidden;image {width: 100%;height: auto;}text {display: inline-block;color: #404040;}}}.loginButton {width: 100%;height: 72rpx;background: linear-gradient(142deg, #ff8677 11%, #ff424e 94%);border-radius: 88rpx;font-size: 32rpx;font-family: PingFangSC, PingFangSC-Medium;font-weight: 500;text-align: center;line-height: 52rpx;color: #ffffff;letter-spacing: 2rpx;margin-bottom: 52rpx;}.serve-rule {width: 100%;margin-left: 16rpx;display: flex;align-items: center;position: relative;.serve-label {color: #ff414e;// transform: translateX(-10%);}.protocol-prompt {display: inline-block;position: absolute;left: 34rpx;}}.checkbox {margin-right: 0;}.row {padding: 10rpx;flex-flow: row nowrap;display: flex;justify-content: center;align-items: center;.icon-text {color: #007aff;}}.ding-row {flex-flow: row nowrap;display: flex;justify-content: center;align-items: center;.icon-text {color: #007aff;}}.icon {margin-right: 10rpx;display: flex;align-items: center;}.btn {width: 90%;overflow: hidden;text-align: center;}
}
</style>

微信小程序 - 实现手机号登录--授权并获取手机号保存至本地相关推荐

微信小程序如何进行登录授权和获取用户信息
微信小程序如何进行登录授权和获取用户信息
微信小程序实现用户登录授权java代码
1.微信官方文档 auth.code2Session | 微信开放文档 2.我们来实现这个登录功能, 直接上完整代码 controller  & ...
微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等
今天2.19.3.25 在开发微信小程序时,作为测试号想清除授权缓存,一直没有找到方法, 最后无意中看到了解决方法微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等.完美解决
微信小程序目前最新的授权登录接口-2021年10月份
微信小程序目前最新的授权登录接口-2021年10月份效果图: 说明:首先我们需要在app.js里用云函数获取到openid,然后在用户点击登录的时候用获取到的openid去用户表里查询是否有该用户, ...
微信小程token_微信小程序开发之登录换取token
本文将带你了解微信小程序开发之登录换取token,希望本文对大家学微信有所帮助前言:这次主要是介绍些业务逻辑,技术点倒是没有多少.不过在开发中,优秀的编程思路同样是非常值得学习的. 最近小程序可以说 ...
微信小程序的详细登录(上)
前段时间发布了一个微信小程序的简单登录,那段时间我一直在忙着项目,有一天,我清闲下来准备进入小程序群里面看一下来着,刚好有人问问题了,我一看这哥们的问题好像是我写的东西啊,我感觉是时候秀一波了,是时候 ...
微信小程序客服消息授权给第三方Udesk
微信小程序客服消息授权给第三方Udesk 一.必须是微信认证过的微信小程序登录微信小程序后台-设置-基本设置链接:https://mp.weixin.qq.com/ 下面有一栏:微信认证(看是否认 ...
小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
微信小程序的安全登录
一.微信小程序的安全登录让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Sessi ...

微信小程序 - 实现手机号登录--授权并获取手机号保存至本地

详细代码请见文档最下方，仅供参考，更多需要请查看官方文档

一、

这是服务端的

这是我们前端获取手机号需要给接口传递的两个参数

二、

微信小程序 - 实现手机号登录--授权并获取手机号保存至本地相关推荐

最新文章

热门文章