欧酷网

您的位置:主页>网络>

微信小程序getPhoneNumber获取手机号登录、偶尔会报错的问题解决办法、code失效问题

微信小程序getPhoneNumber获取手机号

效果图:(

手机登录方法在上一篇文章有写:https://blog.csdn.net/ws19900201/article/details/104052811


这篇介绍微信获取手机号登录方法
在这里插入图片描述
代码:

html:

<view class="mydenglu">
  <view class="mylogobox">
    <image class="mylogo" mode="widthFix" src="../../images/mydenglogo.png" />
  </view>
  <view class="denglubox">
    <view class="wechatdl dlbox">
      <image class="iconimg" mode="widthFix" src="../../images/deng-weixin.png" />
      <text class="icontxt">微信登录</text>      
      <button class="buttondl" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
    </view>
    <view class="teldl dlbox" bindtap="dltel">
      <image class="iconimg" mode="widthFix" src="../../images/deng-tel.png" />
      <text class="icontxt">手机登录</text>
    </view>
  </view></view>
 

js:
思路:需提前使用 wx.login 获取 code,不然登录会偶尔报错;
点击微信登录按钮 用 button 加样式透明 ,button 加 open-type=“getPhoneNumber” ,bindgetphonenumber 绑定事件 getPhoneNumber;
提交参数 encryptedData,iv,code;

// pages/mydenglu/mydenglu.jsPage({

  /**
   * 页面的初始数据
   */
  data: {
    navbarData: {
      isfixed: false,
      iswhite: false, //icon color
      showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
      title: '登录', //导航栏 中间的标题
      backgroundcolor: '#fff',
      isintercept: false //返回拦截
    },
    code: '',
  },
  dltel: function () {
    wx.navigateTo({
      url: "../dltel/dltel"
    })
  },

  getLogin() {
    //code获取成功,保存为当前页面的全局变量code
    wx.login({
      success: res => {
        this.setData({
          code: res.code        })
      },
      fail: res => {
        //失败
      }
    })
  },
  getPhoneNumber: function (e) {
    // 登录
    wx.login({
      success: res => {
        console.log(this.data.code);
        console.log(res);
        if (this.data.code == '') {
          this.setData({
            code: res.code          })
        } else if (e.detail.errMsg == "getPhoneNumber:ok" & res.code != '') {
          // console.log(e);
          wx.request({
            url: 'https://wx.xxx.com/wechat/getwechatnumber', //换成自己的后台提交url
            data: {
              encryptedData: e.detail.encryptedData,
              iv: e.detail.iv,
              code: this.data.code            },
            method: "post",
            success: (res) => {
              // console.log(res);
              if (res.data.message == 'ok') { //登录后修改信息
                //getApp().globalData.token = res.data.data.token;
                //getApp().globalData.type = res.data.data.type;
                //getApp().globalData.telnum = res.data.data.mobile;
                //wx.setStorageSync('token', res.data.data.token);
                //wx.setStorageSync('type', res.data.data.type);
                //wx.setStorageSync('telnum', res.data.data.mobile);

                //let pages = getCurrentPages(); // 当前页的数据,
                //let prevPage = pages[pages.length - 2]; // 上一页的数据
                // console.log(res.data.data);
                //prevPage.setData({
                  //token: res.data.data.token,
                  //type: res.data.data.type,
                  //telnum: res.data.data.mobile
                //})
                //wx.navigateBack({
                  //delta: 1
                //})
              } else {
                wx.showToast({
                  title: '系统错误,请重试!',
                  icon: 'none',
                  durtion: 2000
                })
              }
            }
          })

        }

      }
    })

  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getLogin();
  },})
 

css:(less)

@red:#ff2b0a;.mydenglu{
  position: relative;
  width: 100%;
  height: 100vh;
  background: #fff;
  .mylogobox{
    position: relative;
    width: 100%;
    height: 50%;
    .mylogo{
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin:auto;
      width: 264rpx;
      height: 121rpx;
      overflow: hidden;
    }
  }
  .denglubox{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding:0 40rpx;
    .dlbox{
      position: relative;
      width: 100%;
      height: 94rpx;
      border-radius: 15rpx;
      line-height: 94rpx;
      text-align: center;
      font-size: 36rpx;
      vertical-align:middle;
      box-sizing: border-box;
      .iconimg{
        width: 50rpx;
        height: 50rpx;
        vertical-align:middle;
        margin-right: 12rpx;
        overflow: hidden;
      }
      .buttondl{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 2;
      }
    }
    .wechatdl{
      color: #fff;
      background: @red;
    }
    .teldl{
      margin-top:34rpx;
      border:2px solid @red;
      color: @red;
      background: #fff;
    }
  }}
 

其他相关文章:

微信小程序getPhoneNumber获取手机号,解决code失效问题:https://blog.csdn.net/qq_35733535/article/details/102562427

  • 点赞

  • 收藏

  • 分享

  •    
    • 文章举报

幽幽靖

 
发布了123 篇原创文章 ·    获赞 8 ·    访问量 1万+  

私信

关注

相关文章推荐