微信小程序-获取头像和昵称

一.获取头像

1.将button组件open-type的值设置为chooseAvatar
2.通过bindchooseavatar事件回调获取到头像信息的临时路径
wxml文件代码:

<view>
<button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseavatar">
<image src="{{ avatar_url }}" class="avatar"/>
</button>
</view>

js文件代码:

  data:{
    avatar_url : "../../assets/Jerry.png"
  },

  chooseavatar(event){
    console.log(event.detail.avatarUrl)
    const {avatarUrl} = event.detail
    this.setData({
      avatar_url: avatarUrl
    })
  }

二.获取昵称

1.通过form组件包裹input组件和form-type为submit的button组件
2.input组件的type值为nickname,当用户输入时候自动带出微信昵称。name属性设置为nickname会在表单提交时候获取值
3.给form的bindsubmit="onSubmit"绑定事件,在事件处理函数中获取昵称
wxml代码:

<form bindsubmit="onSubmit" >
<!-- type属性设置为nickname,输入框显示nickname值-->
<!-- 添加name属性,方便表单获取 -->
<input type="nickname" name="nickname" />
<!-- form-type属性设置为submit,会触发表单的提交事件 -->
<button type="primary" plain="true" form-type="submit">
点击获取昵称
</button>
</form>

js代码:

  onSubmit(event){
    const nickname = event.detail.value.nickname
    console.log(nickname)
  }

event结构:
在这里插入图片描述

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

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

相关文章

Video-XL:面向小时级视频理解的超长视觉语言模型

在人工智能领域&#xff0c;视频理解一直是一个挑战性的任务&#xff0c;尤其是对于长时间视频内容的理解。现在&#xff0c;Video-XL的问世标志着我们在这一领域迈出了重要的一步。Video-XL是一个专为小时级视频理解设计的超长视觉语言模型&#xff0c;它能够处理超长视频序列…

Excel:vba实现筛选出有批注的单元格

实现的效果&#xff1a;代码&#xff1a; Sub test() Dim cell As RangeRange("F3:I10000").ClearlastRow Cells(Rows.Count, "f").End(xlUp).Row MsgBox lastrow For Each cell In Range("a1:a21")If Not cell.Comment Is Nothing ThenMsgBox…

MATLAB和Python电车电池制造性能度量分析

&#x1f3af;要点 分析全电池制造端开路电压曲线&#xff0c;解析电化学指标或特征&#xff0c;了解电池的热力学和动力学特性。测试相同活性材料&#xff08;正极和石墨负极&#xff09;的两批电池&#xff0c;列出模型提取的电化学特征并可视化分析结果。使用类似电压拟合方…

金仓数据库×武汉人社:共塑大数据应用智慧平台

数智人社 随着数字化和智能化的浪潮席卷全球&#xff0c;武汉市人力资源和社会保障局紧跟时代步伐&#xff0c;成功打造了以金仓数据库为承载底座的大数据应用平台。 这一平台的建立&#xff0c;不仅实现了与武汉市智慧城市大脑的高效数据对接和共享&#xff0c;更在治理体系和…

k8s部署Kafka集群超详细讲解

准备部署环境 Kubernetes集群信息 NAMEVERSIONk8s-masterv1.29.2k8s-node01v1.29.2k8s-node02v1.29.2 Kafka&#xff1a;3.7.1版本&#xff0c;apche版本 Zookeeper&#xff1a;3.6.3版本 准备StorageClass # kubectl get sc NAME PROVISIONER RECLA…

Spring容器详解:BeanFactory和ApplicationContext的不同

Spring容器 创建容器的几种方式 方式一&#xff1a;类路径加载配置文件 ApplicationContext context new ClassPathXmlApplicationContext("application.xml"); 方式二&#xff1a;文件路径加载配置文件 ApplicationContext context new FileSystemXmlApplicatio…

前端——选择器

基础选择器 1.标签选择器 p 例如p标签&#xff0c;可以更改所有此标签的格式 格式为 标签{ } Html文件 <link rel"stylesheet" href"./demo01.css"><body><p>hello css</p><p>hello html</p><p>hello js&…

Python 实现 excel 数据过滤

一、场景分析 假设有如下一份 excel 数据 shop.xlsx, 写一段 python 程序&#xff0c;实现对于车牌的分组数据过滤。 并以车牌为文件名&#xff0c;把店名输出到 车牌.txt 文件中。 比如 闽A.txt 文件内容为&#xff1a; 小林书店福州店1 小林书店福州店2 二、依赖安装 程序依…

SOLID 原则:编写可扩展且可维护的代码

有人告诉过你&#xff0c;你写的是“糟糕的代码”吗&#xff1f; 如果你有&#xff0c;那真的没什么可羞愧的。我们在学习的过程中都会写出有缺陷的代码。好消息是&#xff0c;改进起来相当简单——但前提是你愿意。 改进代码的最佳方法之一是学习一些编程设计原则。你可以将…

当贝F7Pro怎么样?一文看懂当贝秋季新品当贝F7Pro值不值得买?

当贝投影在今年的双11阶段发布了一款全新护眼三色激光投影当贝F7Pro 4K激光投影&#xff0c;这款被誉为“4K激光真旗舰”的激光投影主要是定位高端系列&#xff1b;不仅采用了全新的护眼三色激光技术&#xff0c;全面提升了投影画面的亮度、色彩和色准&#xff1b;在4K分辨率&a…

【Linux系统】Ubuntu的简单操作

什么是 Ubuntu&#xff1f; Ubuntu&#xff08;乌帮图&#xff09;是一个非洲词汇&#xff0c;它的意思是“人性对待他人”或“群在故我在”。Ubuntu发行版将Ubuntu精神带到软件世界之中。 目前已有大量各种各样基于GNU/Linux的操作系统&#xff0c;例如:Debian,SuSE,Gentoo,R…

猜数游戏(Fortran)

背景 学了两个月Fortran还没来一次正式练习 于是—— 代码 program gessnum! implicit none 不取消IN规则。integer::num,areal::Ncall random_seed()call random_number(N)aint(N*10)print*,"请输入您猜的数字&#xff1a;"read(*,*)numdo i1,3if (numa)thenpri…

【Next.js 项目实战系列】02-创建 Issue

原文链接 CSDN 的排版/样式可能有问题&#xff0c;去我的博客查看原文系列吧&#xff0c;觉得有用的话&#xff0c;给我的库点个star&#xff0c;关注一下吧 上一篇【Next.js 项目实战系列】01-创建项目 创建 Issue 配置 MySQL 与 Prisma​ 在数据库中可以找到相关内容&…

【Linux】【xmake】安装 + C/C++常用项目配置

文章目录 0. 环境准备1. 子命令create - 快速创建项目build - 构建程序config - 配置编译需要的参数show - 查看当前工程基本信息update - 程序自更新 2. C/C 项目常用配置2.1 项目目标类型2.2 添加宏定义2.3 头文件路径和链接库配置2.4 设置语言标准2.5 设置编译优化2.6 添加源…

《YOLO 目标检测》—— YOLO v3 详细介绍

&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;还未写完&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xf…

vscode插件live server无法在手机预览调试H5网页

环境 Window10、vscode&#xff1a;1.94.2、Live Server&#xff1a;v5.7.9、Live Server (Five Server)&#xff1a;v0.3.1 问题 PC端预览没有问题&#xff0c;但是在手机点击链接显示访问失败 排查 1. 是否同一局域网 意思就是电脑、手机是不是访问同一个网络。电脑插得…

【设计模式-原型】

**原型模式&#xff08;Prototype Pattern&#xff09;**是一种创建型设计模式&#xff0c;旨在通过复制现有对象的方式来创建新对象&#xff0c;而不是通过实例化类来创建对象。该模式允许对象通过克隆&#xff08;复制&#xff09;来创建新的实例&#xff0c;因此避免了重新创…

Git核心概念图例与最常用内容操作(reset、diff、restore、stash、reflog、cherry-pick)

文章目录 简介前置概念.git目录objects目录refs目录HEAD文件 resetreflog 与 reset --hardrevert(撤销指定提交)stashdiff工作区与暂存区差异暂存区与HEAD差异工作区与HEAD差异其他比较 restore、checkout(代码撤回)merge、rebase、cherry-pick 简介 本文将介绍Git几个核心概念…

赛氪提供专业技术支持,首届“天翼云息壤杯”高校AI大赛正式开启

2024年9月25日&#xff0c;在ICT中国2024高层论坛暨国际信息通信展主论坛上&#xff0c;首届“天翼云息壤杯”高校AI大赛正式拉开帷幕。中国电信总经理梁宝俊出席并发表了致辞。此次大赛由国务院国资委、工业和信息化部、教育部等部委指导&#xff0c;中国电信集团有限公司和华…

【排序】快排思想以及例子

思想 使用分治法来处理数据 例题 19 97 09 17 01 08 首先确定一个pivot 一般是首位&#xff0c;把比p小的放p的左边&#xff0c;比p大的放p的右边。L是左指 R是右指 首轮排序 p 19 __ 97 09 17 01 08 L R 首先应从R开始判断 08<19 08替换到p所在位置&#xff0c;R移动 p 19…