在父組件引入該組件

<!-- 授權(quán)信息 -->
  <auth-mes showModal="{{showModal}}" id='autnMes' bind:onConfirm="onConfirm"></auth-mes>

?子組件詳細(xì)代碼為:

authMes.wxml

<!-- components/authMes/authMes.wxml -->
<van-popup show="{{ showModal }}" round bind:close="closeHandle" custom-class="auth-box" custom-style="width: 84%;z-index:10002;" overlay-style="z-index:10001;">
  <view class="auth-wrap">
    <view>
      <view class="tips-tit">提示</view>
      <view class="tips-txt">為提供更好的服務(wù)，我們邀請您填寫昵稱，頭像等公開信息</view>
    </view>
    <view class="auth-cont">
      <view class="auth-itm">
        <view class="itm-tit">頭像</view>
        <view class="avatar-cont">
          <button class="avatar-btn" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
            <image class="avatar" src="{{avatarMes.avatarUrl}}" wx:if="{{avatarMes.avatarUrl}}"></image>
            <image class="avatar" src="../../images/common/auth_default.png" wx:if="{{!avatarMes.avatarUrl}}"></image>
            <image class="icon-r" src="../../images/common/icon_arrow_black.png" />
          </button>
        </view>
      </view>
      <view class="auth-itm">
        <view class="itm-tit">昵稱</view>
        <input class="nick-name" placeholder="點(diǎn)擊輸入" type="nickname" value="{{avatarMes.nickName}}" bindblur="bindblur" placeholder-class="input-holder"></input>
      </view>
      <view class="auth-itm">
        <view class="itm-tit">手機(jī)號</view>
        <view>
          <button slot="button" plain size="mini" type="" open-type="getPhoneNumber" bindgetphonenumber="getPhone" class="phone-btn">
            <text wx:if="{{!avatarMes.mobile}}">獲取手機(jī)號</text>
            <text wx:if="{{avatarMes.mobile}}" style="color:#302e2d;">{{avatarMes.mobile}}</text>
          </button>
        </view>
      </view>
    </view>
    <view class="auth-btn">
      <view class="btn" catchtap="cancel">取消</view>
      <view class="btn com-btn" catchtap="confirm">確認(rèn)</view>
    </view>
  </view>
</van-popup>

?authMes.js

// components/authMes/authMes.js
// 獲取應(yīng)用實(shí)例
const app = getApp();
const { enums } = require("../../common/config/enums");
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    // 小程序彈窗
    showModal: {
      type: Boolean,
      value: false,
    },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    avatarMes: {
      avatarUrl: "",
      nickName: "",
      mobile: "",
    },
  },

  /**
   * 組件的方法列表
   */
  methods: {
    /** 獲取昵稱信息 */
    bindblur(res) {
      const value = res.detail.value;
      this.data.avatarMes.nickName = value;
    },
    // 拿到頭像信息的臨時(shí)路徑
    onChooseAvatar(e) {
      const { avatarUrl } = e.detail;
      console.log('ddd', avatarUrl);
      this.uploadAva(e.detail.avatarUrl);
    },
    uploadAva(tempFilePaths) {
      var that = this;
      wx.uploadFile({
        url: app.siteinfo.apiUrl + '圖片上傳接口', //需要用HTTPS，同時(shí)在微信公眾平臺后臺添加服務(wù)器地址
        filePath: tempFilePaths, //上傳的文件本地地址
        name: "Image", //服務(wù)器定義的Key值
        header: {
          'content-type': 'multipart/form-data',
          'cookie': wx.getStorageSync('cookie')
        },
        formData: {
          //接口所需的其他上傳字段
          uploadDir: enums.UploadDir.Personal.Value,
          fileType: enums.FileType.Image.Value,
        },
        // 附近數(shù)據(jù)，這里為路徑
        success: function (res) {
          wx.hideLoading();
          if (res.statusCode == 200) {
            var result = JSON.parse(res.data);
            if (result.status) {
              // var imgUrl = [{ name: 'headImgUrl', url: result.data.fileurl }];
              that.setData({
                'avatarMes.avatarUrl': result.data.fileurl
              })
            } else {
              app.alert.show(res.errmsg);
            }
          } else {
            app.alert.show(res);
          }
        },
        fail: function (err) {
          console.log(err);
        }
      });
    },
    // 輸入
    onChange(e) {
      let field = 'avatarMes.' + e.currentTarget.dataset.field;
      this.setData({
        [field]: e.detail
      });
    },
    // 手機(jī)號授權(quán)
    getPhone(mobile) {
      console.log('mobile.detail', mobile.detail)
      if (mobile.detail && mobile.detail.code) {
        let code = mobile.detail.code;
        app.apis('手機(jī)號解碼接口', { code: code }).then(res => {
          if (res.status) {
            this.setData({
              'avatarMes.mobile': res.data.Mobile
            });
          } else {
            app.alert.show('獲取手機(jī)號碼失敗,請重試!' + res.errmsg);
          }
        })
      } else {
        app.toast.show(mobile.detail.errMsg);
      }
    },
    //點(diǎn)擊遮罩層關(guān)閉
    closeHandle() {
      this.setData({
        showModal: false
      })
    },
    // 取消
    cancel() {
      this.setData({
        showModal: false
      })
    },
    // 確認(rèn)
    confirm() {
      this.triggerEvent('onConfirm', { avatar: this.data.avatarMes });
    },
  },
})

??authMes.less

.auth-wrap {
  border-radius: 40rpx;
  box-sizing: border-box;
  padding: 24rpx;
  opacity: 1;
  background-color: #ffffff;
  z-index: 100002;
  .tips-tit {
    font-family: PingFangSC-Medium;
    font-size: 32rpx;
    color: #302e2d;
    text-align: center;
    font-weight: 500;
  }
  .tips-txt {
    padding: 40rpx 10rpx;
    font-size: 28rpx;
    color: #282b34;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
  }
  .auth-cont {
    .auth-itm {
      background-color: #f6f6f6;
      border-radius: 20rpx;
      padding: 0 24rpx;
      height: 96rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .itm-tit {
        width: 100rpx;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #302e2d;
      }

      .avatar-cont {
        width: 18%;
        .avatar-btn {
          width: 100%;
          height: 96rpx;
          padding: 0!important;
          box-sizing: content-box !important;
          background-color: transparent;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .avatar {
            width: 56rpx;
            height: 56rpx;
            display: inline-block;
          }
          &::after {
            border: none;
          }
        }
        .icon-r {
          width: 24rpx;
          height: 24rpx;
          margin-left: 8rpx;
        }
      }
      .nick-name {
        text-align: right;
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #302e2d;
      }
    }
  }
  .aggre-v {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-size: 26rpx;
    color: #302e2d;
    font-weight: 400;
    image {
      width: 24rpx;
      height: 24rpx;
      margin-right: 16rpx;
    }
  }

  .auth-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 24rpx;
    margin: 30rpx 0 20rpx;
    .btn {
      font-family: PingFangSC-Medium;
      font-size: 32rpx;
      color: #99302f;
      background-color: #ffffff;
      border-radius: 20rpx;
      border: 2rpx solid #99302f;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
    }
    .com-btn {
      background-color: #ebd6d7;
      border-color: #ebd6d7;
    }
  }
  .phone-btn {
    border: 0;
    text-align: right;
    padding: 0;
    line-height: 1;
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #99302f;
  }
  .fie-lable {
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #302e2d;
  }
  .input-holder {
    font-family: PingFangSC-Regular;
    font-size: 28rpx;
    color: #88868b;
  }
}

?authMes.json

{
  "component": true,
  "usingComponents": {
    "van-field": "@vant/weapp/field/index",
    "van-popup": "@vant/weapp/popup/index"
  }
}

app.apis是封裝的微信小程序請求接口的方法詳細(xì)見這篇文章文章來源地址http://www.zghlxwxcb.cn/news/detail-614444.html

到了這里，關(guān)于小程序 獲取用戶頭像、昵稱、手機(jī)號的組件封裝（最新版）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！