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

以下代码均使用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>

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

相关推荐
lichenyang4534 小时前
从零到一:用 Taro + React 搭建数据采集小程序
react.js·小程序·taro
黄华SJ520it16 小时前
139小程序商城模式开发
小程序·软件需求·系统开发
Greg_Zhong16 小时前
详细说下小程序中使用canvas的体验
小程序·canvas绘制·canvas绘制内容溢出·绘制内容模拟器不正常·绘制内容真机正常
小羊Yveesss19 小时前
2026 多门店小程序如何提升效率?连锁门店降本增效实操指南,数字化转型必看
大数据·小程序
2501_9419820519 小时前
提高私域转化率:如何通过 API 自动发送小程序卡片?
小程序·机器人·自动化·企业微信·rpa
码视野1 天前
完全开源-支持二开-可做毕业论文-家政服务预约小程序
小程序
码视野1 天前
全开源-健身运动预约小程序 — 从需求到原型的全栈实践
小程序
游戏开发爱好者81 天前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview
tianxiaxue11 天前
微信小程序如何跟企微互通
微信小程序·小程序·企业微信
Greg_Zhong1 天前
微信小程序中canvas绘制面积图,解决手机和模拟器都能渲染不溢出问题
微信小程序·小程序canvas绘制面积图