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

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

首先完成用户头像的获取

头像选择

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

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

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

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() {

  }
})

获取用户手机号

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

体验额度：每个小程序账号将有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
      })
  },

最后展示当前效果

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/334208.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

生成数据和多模态目标检测的研究

生成数据和多模态目标检测的研究

增强T 作者未提供代码
阅读更多...
自然语言处理中的查准率与查全率的关键技术，以及自然语言处理中的查准率与查全率具体实例与策略

自然语言处理中的查准率与查全率的关键技术，以及自然语言处理中的查准率与查全率具体实例与策略

自然语言处理中的查准率与查全率的关键技术，以及自然语言处理中的查准率与查全率具体实例与策略。 1.背景介绍 自然语言处理（NLP，Natural Language Processing）是人工智能领域的一个重要分支，其主要目标是让计算机能够理解、生成和处理人类语言。自然语言处理涉及到许多子…
阅读更多...
【算法练习】leetcode算法题合集之二分查找篇

【算法练习】leetcode算法题合集之二分查找篇

二分查找 LeetCode69.x的平方根 LeetCode69.x的平方根 只要小于等于就可以满足条件了。 class Solution {public int mySqrt(int x) {int left 0, right x;int ans -1;while (left < right) {int mid (right - left) / 2 left;if ((long) mid * mid < x) {ans mi…
阅读更多...
【2024最新-python3小白零基础入门】No4.python控制语句学习

【2024最新-python3小白零基础入门】No4.python控制语句学习

文章目录 1 选择结构1.1 if语句 2 循环结构2.1 while循环语句2.2 for循环语句2.3 break、continue、pass在循环中的用途 对于 Python 程序中的执行语句,默认是按照书写顺序依次执行的,这时称这样的语句是顺序结构的。但是,仅有顺序结构还是不够的,因为有时需要根据特定的情况,有…
阅读更多...
2024年【建筑电工(建筑特殊工种)】考试题库及建筑电工(建筑特殊工种)模拟考试

2024年【建筑电工(建筑特殊工种)】考试题库及建筑电工(建筑特殊工种)模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 建筑电工(建筑特殊工种)考试题库是安全生产模拟考试一点通总题库中生成的一套建筑电工(建筑特殊工种)模拟考试&#xff0c;安全生产模拟考试一点通上建筑电工(建筑特殊工种)作业手机同步练习。2024年【建筑电工(建筑特…
阅读更多...
中国互联网的早期形态

中国互联网的早期形态

1 大约是从 1991 年开始&#xff0c;国内开始了第一个 BBS 站——北京长城站&#xff0c;经过长时间发展&#xff0c;直到 1995 年&#xff0c;随着计算机及其外设的大幅降价&#xff0c;BBS 才逐渐被部分人们所认识。少数玩 BBS 站的“极客”站长&#xff0c; 基于个人关系&am…
阅读更多...
定时关机应用V2.1

定时关机应用V2.1

# 在ShutDown_2.0的基础上&#xff0c;作了如下改进&#xff1a; # 1) 修正了默认模式无法选择其他时间的bug&#xff0c;还增加了2.5小时和3小时两个选项&#xff1b; # 2&#xff09;自定义模式将计时单位从“秒”改为“分钟”&#xff0c;倒计时显示也优化为“小时:分钟:秒”…
阅读更多...
C++初阶类与对象（二）：详解构造函数和析构函数

C++初阶类与对象（二）：详解构造函数和析构函数

上次为类与对象开了一个头&#xff1a;C初阶类与对象&#xff08;一&#xff09;&#xff1a;学习类与对象、访问限定符、封装、this指针 今天就来更进一步 文章目录 1.类的6个默认成员函数2.构造函数2.1引入和概念2.2构造函数特性2.2.1特性1~42.2.2注意2.2.3特性5~72.2.4注意 …
阅读更多...
CVE2020-1938漏洞复现

CVE2020-1938漏洞复现

这个漏洞是tomcat的 然后我们先了解漏洞产生的原理 首先我们先来看tmocat纠结是干什么的 tomcat是个中间件 最主要的两个结构、 servlet的定义和部分源码&#xff0c; 漏洞就是从这来的 tomcat处理http请求 源码分析 tomcat 8.5.46 哎 这教学视频讲半天看不懂 不看原…
阅读更多...
java打包及上传到私服务

java打包及上传到私服务

一、准备Maven私服Nexus 添加saas.maven 仓库地址&#xff1a;http://192.168.31.109:8081/repository/saas.maven 二、新建SpringBoot项目com.saas.pdf 添加类&#xff1a;PdfUtil.java package com.saas.pdf;public class PdfUtil {public static void Save(String fileP…
阅读更多...
爬虫笔记（一）：实战登录古诗文网站

爬虫笔记（一）：实战登录古诗文网站

需求&#xff1a;登录古诗文网站&#xff0c;账号&#xff0b;密码&#xff0b;图形验证码 第一&#xff1a;自己注册一个账号&#xff0b;密码哈 第二&#xff1a;图形验证码&#xff0c;需要一个打码平台&#xff08;充钱&#xff0c;超能力power&#xff01;&#xff09;或…
阅读更多...
Java医院信息管理系统

Java医院信息管理系统

技术框架&#xff1a; springboot shiro layui jquery thymeleaf nginx 有需要的可以联系我。 运行环境&#xff1a; jdk8 mysql IntelliJ IDEA maven项目功能&#xff1a; 本项目是用springbootlayuishiro写的医院管理系统&#xff0c;系统的业务比较复杂&#x…
阅读更多...
[python]裁剪文件夹中所有pdf文档并按名称保存到指定的文件夹

[python]裁剪文件夹中所有pdf文档并按名称保存到指定的文件夹

最近在写论文的实验部分&#xff0c;由于latex需要pdf格式的文档&#xff0c;审稿专家需要对pdf图片进行裁剪放大&#xff0c;以保证图片质量。 原图&#xff1a; 裁剪后的图像&#xff1a; 代码粘贴如下。将input_folder和output_folder替换即可。(x1, y1)&#xff0c; (x2…
阅读更多...
linux java 8安装

linux java 8安装

tar -zxf jdk-8u***.tar.gz -C /usr/loacl/ vim /etc/profile i 输入 export JAVA_HOME/usr/local/安装文件名 export PATH${JAVA_HOME}/bin:$PATH ESC :wq 保存退出 source /etc/profile 验证 java -version
阅读更多...
【GAMES101】Lecture 08 着色频率

【GAMES101】Lecture 08 着色频率

目录 着色频率 Flat shading&#xff08;平面着色&#xff09; Gouraud shading&#xff08;顶点着色&#xff09; Phong shading&#xff08;像素着色&#xff09; 如何计算法线 着色频率 大家可以看到下面这三个球是看起来不一样的是吧&#xff0c;但是其实这三个球用的…
阅读更多...
前端面试题汇总大全（含答案）-- 持续更新

前端面试题汇总大全（含答案）-- 持续更新

​一、HTML 篇 1. 简述一下你对 HTML 语义化的理解&#xff1f; 用正确的标签做正确的事情。 html 语义化让页面的内容结构化&#xff0c;结构更清晰&#xff0c;便于对浏览器、搜索引擎解析&#xff1b;即使在没有样式 CSS 情况下也以一种文档格式显示&#xff0c;并且是容易…
阅读更多...
【算法】使用优先级队列（堆）解决算法题（TopK等）（C++）

【算法】使用优先级队列（堆）解决算法题（TopK等）（C++）

文章目录 1. 前言2. 算法题1046.最后一块石头的重量703.数据流中的第K大元素 2.5 如何选择大根堆 与 小根堆&#xff1f; 为什么选择大根堆&#xff08;小根堆&#xff09;&#xff1f;692.前K个高频单词295.数据流的中位数 1. 前言 我们知道&#xff1a;优先级队列是一种常用…
阅读更多...
前端react入门day03-react获取dom与组件通信

前端react入门day03-react获取dom与组件通信

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 受控表单绑定 React中获取DOM 组件通信 父传子 父传子-基础实现 父传子-props说明 父传子 - 特殊的…
阅读更多...
初创公司都应该知道的20个GPT提示词和免费的GPT工具

初创公司都应该知道的20个GPT提示词和免费的GPT工具

在不断发展的初创企业环境中&#xff0c;利用 ChatGPT 等尖端工具可以改变游戏规则。以其敏捷性和创新性而闻名的初创企业总是在寻找提高效率、创造力和竞争力的方法。ChatGPT 凭借其先进的功能&#xff0c;成为这一追求中的宝贵资源。 在这篇博文中&#xff0c;我们深入研究了…
阅读更多...
力扣第236题——二叉树的最近公共祖先 （C语言题解）

力扣第236题——二叉树的最近公共祖先 （C语言题解）

题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以…
阅读更多...
最新文章

Copyright @ 2022~2023