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

这篇具有很好参考价值的文章主要介绍了【微信小程序独立开发 4】基本信息编辑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

首先完成用户头像的获取

头像选择

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

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

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

<!-- 用户头像 -->
    <view class="user_avatar_wrap">
        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
            <image src="{{userInfo.avatarUrl}}"  mode="widthFix" />
        </button>   
    </view>

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

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

使用示例如下:

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>
date: '2016-09-01',

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

首先修改页面和样式

userInfo.wxml

<view class="user_birthday">
                <picker class="birthday_picker" mode="date" value="{{date}}" start="1900-09-01" end="2100-09-01" bindchange="bindDateChange">
                    <view class="picker">
                        <text class="birthday_text">生日</text>
                        <block wx:if="{{!dateStatus}}">
                            <text class="selectBirthday">请选择生日</text><view class="next_icon iconfont icon-xiayiyeqianjinchakangengduo"> </view>
                        </block>
                        <block wx:if="{{dateStatus}}">
                            {{date}}
                        </block>
                    </view> 
               </picker>
            </view>

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

<view class="user_sex">
    <picker bindchange="bindSexChange" value="{{index}}" range="{{array}}" class="sex_picker">
        <view class="picker">
            <text class="sex_text">性别</text>
            <block wx:if="{{!sexStatus}}">
                <text class="selectSex">请选择性别</text><view class="next_icon iconfont icon-xiayiyeqianjinchakangengduo"> </view>
            </block>
            <block wx:if="{{sexStatus}}">
                {{array[index]}}
            </block>
        </view>
    </picker>
</view>
<view class="user_address">
    <picker class="region_picker" mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
        <view class="picker">
            <text class="region_text">地区</text>
            <block wx:if="{{!regionStatus}}">
                <text class="selectRegion">请选择地区</text><view class="next_icon iconfont icon-xiayiyeqianjinchakangengduo"> </view>
            </block>
            <block wx:if="{{regionStatus}}">
                {{region[0]}} {{region[1]}} {{region[2]}}
            </block>
        </view>
    </picker>
</view>

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】基本信息编辑,微信小程序,微信小程序,小程序

体验额度:每个小程序账号将有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进行登录

代码示例
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
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来手动输入

<!-- 手机号设置 -->
        <view class="phone_wrap">
            <view class="userId_wrap">
                <text>ID</text>
                {{userInfo.userId}}
            </view>
            <view class="user_telPhone">
                <text class="phoneNumber_text">手机号</text>
                <input type="text" class="phoneNumber_input" placeholder="请输入手机号" placeholder-style="text-align: right" 
                bindblur="phoneNumberMethod"/>
            </view>
        </view>
     .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】基本信息编辑,微信小程序,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-807888.html

到了这里,关于【微信小程序独立开发 4】基本信息编辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序:授权登录获取手机号及获取基本信息等

    微信文档 1)需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,通过 getphonenumber 事件获取回调信息; 2)将 getphonenumber 事件回调中的动态令牌code传到开发者后台,并在开发者后台调用微信后台提供的 phonenumber.getPhoneNumber 接口,消费code来换取用户手机

    2024年02月06日
    浏览(53)
  • 微信小程序授权登录(含获取基本信息及绑定的手机号)

    1、授权获取微信个人信息 2、调用 wx.login() 获取临时登录凭证code 3、用code调用接口换取用户唯一标识openId、用户在微信开放平台账号下的唯一标识unionId和会话密钥session_key (1)前端获取 注意点 :正常开发中不会通过这种方法获取,会通过后台获取调用微信公众平台接口获

    2024年02月09日
    浏览(49)
  • 微信小程序原生开发功能合集十二:编辑界面的实现

      本章实现编辑界面的实现处理,包括各编辑组件的使用及添加数据保存数据流程的实现处理。   另外还提供小程序开发基础知识讲解课程,包括小程序开发基础知识、组件封装、常用接口组件使用及常用功能实现等内容,具体如下:    1. CSDN课程: https://edu.csdn.ne

    2024年02月02日
    浏览(57)
  • 微信小程序 ---在Vscode上编辑,微信开发者工具上预览,快速上手

    成功 导入一个已经在开发中项目 设置高亮 拷贝到 settings.json 重启 vscode 打开 wxml 文件 观察 有没有高亮 安装小程序开发插件 全局配置 app.json pages 字段 只能在微信开发者工具中 编辑 pages字段,按下保存 才生效!!! pages 快速创建页面的时候 在里面创建即可 作用 : 快速创

    2024年02月01日
    浏览(79)
  • 微信小程序+前后端开发学习材料1-(基本)

    用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。文件内容为一个 JSON 对象。 1.1 page 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应

    2024年01月19日
    浏览(45)
  • 微信小程序审核,隐私协议中开发者处理信息填写的内容参考

    为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像 为了显示距离,开发者将在获取你的明示同意后,收集你的位置信息。 开发者收集你的地址,用于获取位置信息。 开发者收集你的发票信息,用于维护消费功能。 为了用户互动,开发者将在获取你的

    2024年02月08日
    浏览(59)
  • 微信小程序+前后端开发学习材料2-(视图+基本内容+表单组件)

    学习来源 滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 显示面板指示点indicator-dots 图标组件 实例演示 进度条。组件属性的长度单位默认为px,咱用rpx。 实例演示 这里我用view带了一下,如果不配置进度条外置属性,可以直接 progress percent=\\\"20\\\" show-

    2024年01月18日
    浏览(49)
  • 微信小程序独立分包与分包预下载

    官网链接 独立分包配置方法 独立分包使用限制 独立分包中不能依赖主包和其他分包中的内容,包括 js 文件、模板、wxss、自定义组件等; App 只能在主包内定义,独立分包中不能定义 App,会造成无法预期的行为 独立分包中暂时不支持使用插件 分包预加载 开发者可以通过在

    2024年02月20日
    浏览(42)
  • 微信小程序云开发—01(云数据库、云函数的创建与基本使用)

    1. 小程序云开发,让前端程序员拥有后端的能力 2. 云函数 (nodejs) 3. 云数据库 (mogodb) 4. 云存储 5. 前端写好云函数 - 上传到云服务器 -实现自定云部署 6. 前端去调用云函数=间接通过云函数对数据库的操作 7. 前端=》全栈 1. 在app.js 2. 云函数index.js 定义id 3. 云id来自 云开发

    2024年02月15日
    浏览(43)
  • 微信小程序如何完成1000独立访客(UV)

    微信“累计独立访问者(UV)不少于1000人”是指不同IP的累计访问者总数达到1000+,才可以开通流量主功能。 切记,永远不要用机器人刷流量,否则小程序流量的主要功能很可能被永久禁用!!! 1.作为小程序的开发者,首先,你需要开发带有亮点的程序,这些亮点有趣、新

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包