微信小程序获取用户手机号后可修改,该appid没有权限问题

小程序手机号获取

因为公司业务需要在获取用户手机号以后还可以修改用户的手机号
一开始是想在input框上绑定事件,后来发现丫的根本就不生效才明白获取手机号的事件只能写在button上所以我用了一种比较笨的方法实现
先是一段简单的input框通过wx:if控制文本框或者获取手机号按钮显示

<van-field wx:if="{{phoneShow}}" label="手机号:" value="{{ floorPrice.phone }}" placeholder="请输入11位手机号码" bind:change="onChangePhone" border="{{ false }}" />

小程序获取手机号需要在button上将open-type 的值设置为 getPhoneNumber然后绑定bindgetphonenumber事件

  <view class="phone" wx:else>
        <text>手机号:</text>
        <button type="text" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">请输入11位手机号码</button>
      </view>

文本框change事件

  onChangePhone(e) {
    let potn = "floorPrice.phone"
    this.setData({
      [potn]: e.detail
    })
  },

整体思路:我们通过微信的API拿到用户信息的加密数据以后需要发送给后台解码,然后后台解码后返回用户手机号

  getPhoneNumber(e) {
  console.log(e)
  //e.detail里面就是包含我们需要的数据了
 // encryptedData: 用户信息的加密数据
//errMsg: 授权状态
//iv:加密算法的初始向量
    if (e.detail.errMsg == "getPhoneNumber:ok") {//判断用户授权成功以后
      let data = {
        appId: app.globalData.userInfo.appid,//appid
        openId: app.globalData.userInfo.openId,//openid
        sessionKey: app.globalData.userInfo.session_key,//session_key
        encryptedData: e.detail.encryptedData,//
        iv: e.detail.iv
      }
      getPhonemima(data).then((res) => {//调取后台接口
        if (res.code == 200) {
          app.globalData.userInfo.phone = res.data.phoneNumber
          //将返回的手机号存入全局变量中
          let potn = "floorPrice.phone"
          //给手机号赋值及将状态改为true显示文本框
          this.setData({
            [potn]: app.globalData.userInfo.phone,
            phoneShow: true
          })
        }
      })
    }
  },

!!!开发过程中遇到的问题:

首先点击获取手机号的时候有可能会遇到该appid没有权限这样的报错
在这里插入图片描述
这种问题上的出现是因为在开发企业级微信小程序项目时企业微信没有认证出现的
解决方式:设置→基本设置→微信认证
在这里插入图片描述
完整代码:

 <van-field wx:if="{{phoneShow}}" label="手机号:" value="{{ floorPrice.phone }}" placeholder="请输入11位手机号码" bind:change="onChangePhone" border="{{ false }}" />
    <view class="phone" wx:else>
      <text>手机号:</text>
      <button type="text" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">请输入11位手机号码</button>
    </view>
phoneShow: false,//用于控制获取手机号按钮及input框的显示隐藏
    floorPrice: {
      phone: ""
    }
  onChangePhone(e) {
    let potn = "floorPrice.phone"
    this.setData({
      [potn]: e.detail
    })
  },
  getPhoneNumber(e) {
    console.log(e)
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      let data = {
        appId: app.globalData.userInfo.appid,
        openId: app.globalData.userInfo.openId,
        sessionKey: app.globalData.userInfo.session_key,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      }
      getPhonemima(data).then((res) => {
        if (res.code == 200) {
          console.log(res.data)
          app.globalData.userInfo.phone = res.data.phoneNumber
          let potn = "floorPrice.phone"
          this.setData({
            [potn]: app.globalData.userInfo.phone,
            phoneShow: true
          })
        }
      })
    }
  },

效果图
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值