微信小程序实现用户手机号授权

以下代码均使用uniapp进行实现

本文的代码只提供了前端代码部分,后端接口部分没有进行提供

javascript 复制代码
<!-- 使用 open-type 来触发手机号授权 -->
<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
    绑定手机号
</button>

<script>
  export default {
    data() {
      return {
        phoneNumber: '', // 存储手机号
      };
    },
    methods: {
      // 获取用户手机号的回调函数
      getPhoneNumber(e) {
        if (e.detail.code) {
          var prams = {
            'code': e.detail.code
          }
          // 此处的请求是为了那这用户同意授权后得到的code去后台置换token以及拿到用户的手机号
          http.post(api.smallLogin, prams).then(res => {
            uni.setStorageSync('token', res.data.token)
            uni.setStorageSync('userId', res.data.userId)
            this.phoneNumber = res.data.phone
            uni.navigateBack({
              delta: 1
            })
          })
        } else {
          console.error('用户拒绝了手机号授权');
        }
      }
    }
  }
</script>

以上代码只是我的个人写法,如有不足之处,欢迎批评指正!

相关推荐
EasyNVR3 小时前
基于WebRTC与AI大模型接入EasyRTC:打造轻量级、高实时、强互动的嵌入式音视频解决方案
运维·服务器·微信·小程序·webrtc·p2p·智能硬件
我命由我123454 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js
HappyAcmen15 小时前
关于微信小程序的面试题及其解析
微信小程序·小程序·notepad++
乔冠宇15 小时前
微信小程序修改个人信息头像(uniapp开发)
微信小程序·小程序·uni-app
lvbb6616 小时前
微信小程序-路线规划功能
微信小程序·小程序·notepad++
爱上大树的小猪18 小时前
微信小程序模仿快播标签云滚动特效
微信小程序·小程序
從南走到北1 天前
挪车小程序挪车二维码php+uniapp
微信小程序·小程序·开源·微信公众平台
黑云压城After1 天前
uniapp小程序自定义日历(签到、补签功能)
小程序·uni-app
黑云压城After1 天前
小程序(物流、快递),接入GPS北斗获取路线以及当前车辆位置
小程序
万岳科技程序员小金1 天前
互联网医院系统源码解析:如何开发智能化的电子处方小程序?
小程序·app开发·互联网医院系统源码·智慧医疗小程序·医院app