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

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

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

相关推荐
小小王app小程序开发22 分钟前
潮玩抽赏盲盒小程序玩法分析:2026 潮玩风口,技术合规双驱动
小程序
小小王app小程序开发38 分钟前
AI 智能体小程序玩法分析:2026 千亿 AI 风口,冠品科技赋能低门槛落地
人工智能·科技·小程序
头发还在的女程序员14 小时前
家政SaaS平台开源:从供应商入驻到分账结算,源码如何设计?
小程序·开源
焦糖玛奇朵婷17 小时前
解锁扭蛋机小程序的五大优势
java·大数据·服务器·前端·小程序
web前端神器1 天前
记录uniapp小程序的报错
小程序·uni-app·apache
weikecms1 天前
外卖霸王餐api接口,美团+淘宝闪购接口
微信·小程序·微客云
Greg_Zhong1 天前
微信小程序中进度条总结
微信小程序·自定义进度条·slider进度条
2501_916008892 天前
深入解析iOS应用启动性能优化策略与实践
android·ios·性能优化·小程序·uni-app·cocoa·iphone
TuCoder2 天前
制作景区导览小程序时,现有手绘图是否可以复用?
小程序·智慧景区·手绘地图·景区导览·电子导览·地图制作·ebmap
小小王app小程序开发2 天前
盲盒小程序一番赏玩法分析
小程序