【微信小程序独立开发 4】基本信息编辑

 这一节完成基本信息的编辑和保存

首先完成用户头像的获取

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar 事件。

【微信小程序独立开发 4】基本信息编辑_第1张图片


    
           
    

【微信小程序独立开发 4】基本信息编辑_第2张图片

onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    app.globalData.userInfo.avatarUrl = avatarUrl 
    this.setData({
      userInfo: {
          avatarUrl: avatarUrl,
          nickName: this.data.userInfo.nickName,
          userId: this.data.userInfo.userId
      }
    })
  },

日期组件

使用微信小程序的原生组件picker

使用示例如下:


  日期选择器
  
    
      当前选择: {{date}}
    
  
date: '2016-09-01',

bindDateChange: function(e) {
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },

首先修改页面和样式

userInfo.wxml


                
                    
                        生日
                        
                            请选择生日 
                        
                        
                            {{date}}
                        
                     
               
            

userInfo.less

 .user_birthday{
                display: flex;
                margin: 30rpx;
                border-bottom: 1rpx solid #f5f5ed;
                .birthday_picker{
                    width: 100%;
                    .picker{
                        display: flex;
                        .birthday_text{
                            flex: 1;
                            color: #615839;
                            font-size: 30rpx;
                        }
                        .selectBirthday{
                          
                        }
                        .next_icon{
                            color: #666; 
                        }
                    } 
                } 
            }
        }

userInfo.js

data: {
    userInfo: {
        nickName: '',
        avatarUrl: '',
        userId: ''
    },
    date: '2000-09-01',
    dataStatus: false
  },
bindDateChange(e){
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value,
      dateStatus: true
    })
  },

性别和地区

也采用picker组件实现效果

 userInfo.wxml


    
        
            性别
            
                请选择性别 
            
            
                {{array[index]}}
            
        
    


    
        
            地区
            
                请选择地区 
            
            
                {{region[0]}} {{region[1]}} {{region[2]}}
            
        
    

userInfo.less

.user_sex{
    margin: 30rpx;
    border-bottom: 1rpx solid #f5f5ed;
    .sex_picker{
        .picker{
            display: flex;
            .sex_text{
                flex: 1;
                color: #615839;
                font-size: 30rpx;
            }
            .selectSex{

            }
            .next_icon{
                color: #666; 
            }
        } 
    }


}

.user_address{
    margin: 30rpx;
    .region_picker{
        .picker{
            display: flex;
            .region_text{
                flex: 1;
                color: #615839;
                font-size: 30rpx;
            }
            .selectRegion{

            }
            .next_icon{
                color: #666; 
            }
        } 
    }
}
}

.phone_wrap{
    background-color: #fff;
    border-radius: 25rpx;
    .userId_wrap{
        display: flex;
        margin: 30rpx;
        border-bottom: 1rpx solid #f5f5ed;
        text{
            flex: 1;
            color: #615839;
            font-size: 30rpx;
        }
        .next_icon{
            color: #666;
        }
    }

userInfo.js

// pages/userInfo/userInfo.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
        nickName: '',
        avatarUrl: '',
        userId: ''
    },
    date: '2000-09-01',
    dateStatus: false,
    sexStatus: false,
    regionStatus: false,
    array: ['男', '女', '未知'],
    index: 0,
    region:  ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     this.setData({
         userInfo: {
             nickName: app.globalData.userInfo.nickName,
             avatarUrl: app.globalData.userInfo.avatarUrl,
             userId: app.globalData.userInfo.userId
         }
     })
  },
  bindRegionChange: function (e) {
    this.setData({
      region: e.detail.value,
      regionStatus: true
    })
  },
  bindSexChange(e){
    this.setData({
      index: e.detail.value,
      sexStatus: true
    })
  },
  bindDateChange(e){
    console.log('picker发送选择改变,携带值为', e.detail.value)
    this.setData({
      date: e.detail.value,
      dateStatus: true
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    app.globalData.userInfo.avatarUrl = avatarUrl 
    this.setData({
      userInfo: {
          avatarUrl: avatarUrl,
          nickName: this.data.userInfo.nickName,
          userId: this.data.userInfo.userId
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

获取用户手机号

获取手机号需要小程序的授权,这个功能要钱,而且需要条件

【微信小程序独立开发 4】基本信息编辑_第3张图片

体验额度:每个小程序账号将有1000次体验额度,用于开发、调试和体验。该1000次的体验额度为正式版、体验版和开发版小程序共用,超额后,体验版和开发版小程序调用同正式版小程序一样,均收费;

使用步骤:

步骤1:需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,通过 bindgetphonenumber 事件获取回调信息;

步骤2:将 bindgetphonenumber 事件回调中的动态令牌code传到开发者后台,并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机号。每个code有效期为5分钟,且只能消费一次。

注:getPhoneNumber 返回的 code 与 wx.login 返回的 code 作用是不一样的,不能混用。

注意

从基础库2.21.2开始,对步骤2中换取手机号信息的方式进行了安全升级,上述为新方式使用指南。(旧方式目前可以继续使用,但建议开发者使用新方式,以增强小程序安全性)另外,新方式不再需要提前调用wx.login进行登录

代码示例
Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)  // 动态令牌
    console.log(e.detail.errMsg) // 回调信息(成功失败都会返回)
    console.log(e.detail.errno)  // 错误码(失败时返回)
  }
})

通过调用接口获取手机号

接口英文名

getPhoneNumber

功能描述

该接口用于将code换取用户手机号。 说明,每个code只能使用一次,code的有效期为5min。

调用方式
HTTPS 调用
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN 

请求数据示例

{
"code": "e31968a7f94cc5ee25fafc2aef2773f0bb8c3937b22520eb8ee345274d00c144"
} 

返回数据示例


{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
        "phoneNumber":"xxxxxx",
        "purePhoneNumber": "xxxxxx",
        "countryCode": 86,
        "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
        }
    }
} 

使用input来手动输入


        
            
                ID
                {{userInfo.userId}}
            
            
                手机号
                
            
        
     .user_telPhone{
                display: flex;
                margin: 30rpx;
                .phoneNumber_text{
                    flex: 1;
                    color: #615839;
                    font-size: 30rpx;
                }
                .phoneNumber_input{
                   height: auto;
                  width: 175rpx;
                }
                
            }
data{
    phoneNumber: ''
},

phoneNumberMethod(e){
      const data = e.detail.value;
      if(data.length == 0){
          wx.showToast({
            title: '请输入手机号',
            icon:'none'
          })
      }
      if(data.length != 11 || !/^1[3456789]\d{9}$/.test(data)){
        wx.showToast({
            title: '请输入正确的手机号',
            icon:'none'
          })
      }
      this.setData({
          phoneNumber: data
      })
  },

最后展示当前效果

【微信小程序独立开发 4】基本信息编辑_第4张图片【微信小程序独立开发 4】基本信息编辑_第5张图片

你可能感兴趣的:(微信小程序,微信小程序,小程序)