- 小程序简介
- 小程序技术发展史
- 小程序与普通网页开发的区别
- 体验小程序
- 开始
- 申请账号
- 安装开发者工具
- 你的第一个小程序
- 编译预览
- 小程序代码构成
- JSON 配置
- WXML 模板
- WXSS 样式
- JS 逻辑交互
- 小程序宿主环境
- 渲染层和逻辑层
- 程序与页面
- 组件
- API
- 小程序协同工作和发布
- 协同工作
- 小程序的版本
- 发布上线
- 运营数据
- 小程序开发指南
- 目录结构
- 配置小程序
- 全局配置
- 页面配置
- 小程序框架
- 介绍
- 场景值
- 逻辑层
- 介绍
- 注册小程序
- 注册页面
- 页面生命周期
- 页面路由
- 页面路由监听
- 模块化
- API
- 视图层
- 介绍
- WXML
- WXSS
- WXS
- 事件系统
- 介绍
- WXS 响应事件
- Tap 事件
- 简易双向绑定
- 基础组件
- 获取界面上的节点信息
- 响应显示区域变化
- 分栏模式
- 动画
- 初始渲染缓存
- 小程序运行时
- 运行环境
- JavaScript 支持情况
- 运行机制
- 更新机制
- Skyline 渲染引擎
- 概览
- 介绍
- 特性
- 性能对比
- 示例体验
- 支持与差异
- 基础组件
- WXSS 样式
- 增强特性
- Worklet 动画
- 手势系统
- 自定义路由
- 预设路由效果
- 容器转场动画
- 页面返回手势
- 共享元素动画
- 全局工具栏
- 滚动容器及其应用场景
- 从 WebView 迁移
- 起步
- 新版组件框架适配指引
- 最佳实践
- 常见兼容问题
- 发布上线
- 迁移工具
- 性能调试
- 动态
- 更新日志
- 特性状态
- glass-easel 组件框架
- 介绍
- 适配指引
- 新增特性
- 介绍
- 在模板中调用 data 里的函数
- Chaining API
- Chaining API 的 init 函数
- 动态 slot
- 自定义组件
- 介绍
- 组件模板和样式
- Component 构造器
- 组件间通信与事件
- 组件生命周期
- behaviors
- 组件间关系
- 数据监听器
- 纯数据字段
- 抽象节点
- 自定义组件扩展
- 开发第三方自定义组件
- 单元测试
- 获取更新性能统计信息
- 占位组件
- 查看自定义组件数据
- 插件
- 介绍
- 开发插件
- 使用插件
- 插件调用 API 的限制
- 插件使用组件的限制
- 插件功能页
- 介绍
- 用户信息功能页
- 支付功能页
- 收货地址功能页
- 发票功能页
- 发票抬头功能页
- 基础能力
- 网络
- 使用说明
- 业务域名
- 局域网通信
- 移动解析HttpDNS
- 存储
- 文件系统
- 画布
- 介绍
- 旧版迁移指南
- 分包加载
- 使用分包
- 独立分包
- 分包预下载
- 分包异步化
- 按需注入和用时注入
- 多线程 Worker
- 服务端能力
- 服务端 API
- 消息推送
- 自定义 tabBar
- 周期性更新
- 数据预拉取
- DarkMode 适配指南
- 大屏适配指南
- AI/AR
- AI推理能力 Beta
- 介绍
- 算子支持列表
- 模型量化推理
- VisionKit 视觉能力
- VisionKit 基础
- 6Dof-水平面 AR
- 6Dof-水平面 AR 扩展能力
- Marker AR
- 单样本检测(OSD)
- 人脸检测
- 人体检测
- 人手检测
- 鞋部检测
- OCR检测
- 身份证检测
- 深度估计
- XR-FRAME
- 开发指南
- 开始
- 新建一个XR组件
- 在页面中使用这个组件
- 添加一个物体
- 来点颜色和灯光
- 有点寡淡,加上图像
- 让场景更丰富,环境数据
- 动起来,加入动画
- 还是不够,放个模型
- 再来点交互
- 组件通信,加上HUD
- 虚拟 x 现实,追加 AR 能力
- 识别人脸,给自己戴个面具
- 手势,给喜欢的作品点赞
- OSDMarker,给现实物体做标记
- 2DMarker+视频,让照片动起来
- 加上魔法,来点粒子
- 后处理,让画面更加好玩
- 分享给你的好友吧!
- 之后的,就交给你的创意
- 连接硬件能力
- 蓝牙
- 介绍
- 蓝牙低功耗 (BLE)
- 蓝牙低功耗网状网络 (BLE Mesh)
- 蓝牙信标 (Beacon)
- 近场通信 (NFC)
- 无线局域网 (Wi-Fi)
- 硬件设备接入
- 设备消息
- 设备认证
- 指引
- 使用 WMPF(安卓)认证设备
- 设备认证 SDK(安卓)
- 设备认证 TEE 规范
- 音视频通话(for 硬件)
- 指引
- VoIP 通话插件
- 接入指引
- 接口文档
- 发起通话
- 介绍
- initByCaller
- callWMPF
- callDevice
- forceHangUpVoip
- getPluginEnterOptions
- getPluginOnloadOptions
- onVoipEvent
- setCustomBtnText
- setUIConfig
- setVoipEndPagePath
- getIotBindContactList
- 错误码
- 支付刷脸模式
- 更新日志
- 开发安卓设备端应用
- 小程序音视频通话 SDK
- Linux 设备
- RTOS 设备
- 云对云设备端
- 云对云服务端
- VoIP 视频流指南
- 异步接口使用指南
- 硬件抽象层
- 用户授权设备
- 设备呼叫手机微信
- 手机微信呼叫设备(安卓)
- 手机微信呼叫设备(Linux)
- 性能与体验优化
- 问题排查
- 常见问题 FAQ
- 通话异常排查指南
- 通话提醒异常排查指南
- 下载
- 设备认证工具
- 小程序音视频通话 SDK (Linux)
- 安卓小程序硬件框架
- 设备组
- 需要帮助
- 开放能力
- 用户信息
- 小程序登录
- UnionID 机制说明
- 授权
- 开放数据校验与解密
- 手机号快速验证组件
- 手机号实时验证组件
- 获取头像昵称
- 生物认证
- 分享到朋友圈
- 转发
- 转发
- 动态消息
- 小程序私密消息
- 收藏
- 聊天素材打开
- 安全能力
- 小程序加密网络通道
- 安全键盘
- 分享数据到微信运动
- 音视频通话
- 多人音视频对话
- 双人音视频对话
- 打开 App
- 打开半屏小程序
- 消息
- 订阅消息
- 新版一次性订阅消息开发指南 Beta
- 小程序订阅消息(用户通过弹窗订阅)开发指南
- 订阅消息语音提醒
- 订阅消息添加提醒
- 统一服务消息
- 客服消息
- 概述
- 接收消息和事件
- 发送消息
- 转发消息
- 下发客服输入状态
- 临时素材
- 位置消息
- 获取小程序码
- 获取小程序链接
- 获取 URL Scheme
- 获取 URL Link
- 获取 Short Link
- 应用:短信打开小程序
- 应用:NFC 标签打开小程序
- 小程序账号迁移
- 视频号
- 视频号主页
- 视频号视频
- 视频号直播
- 视频号活动
- 数据分析
- 附近的小程序
- 广告
- Banner 广告
- 激励视频广告
- 插屏广告
- 视频广告
- 视频前贴广告
- 格子广告
- 原生模板广告
- 广告预加载接口
- 广告数据接口
- 广告汇总数据
- 广告细分数据
- 广告位清单
- 结算收入数据
- 调试
- 概述
- vConsole
- Source Map
- 实时日志
- Errno错误码
- 性能与体验
- 概述
- 启动性能
- 概述
- 小程序启动流程
- 代码包体积优化
- 代码注入优化
- 首屏渲染优化
- 其他优化建议
- 运行时性能
- 概述
- 合理使用 setData
- 渲染性能优化
- 页面切换优化
- 资源加载优化
- 内存优化
- 性能数据
- 体验分析
- 调试工具
- 概述
- 真机调试 2.0
- 「模拟器」和「调试器」
- 代码质量分析面板
- FPS 面板
- 性能面板
- 体验评分
- 体验评分简介
- 评分方法与规则
- 评分方法
- 性能
- 体验
- 最佳实践
- WXWebAssembly
- 接口调用频率规范
- 网络调优
- 弱网体验优化
- 安全指引
- 开发原则与注意事项
- 通用
- 接口鉴权
- 代码管理与泄漏
- 信息泄露
- 授权用户信息变更
- 小程序违规处罚信息通知
- 后台
- 注入漏洞
- 弱口令
- 文件上传漏洞
- 文件下载
- 目录遍历
- 条件竞争
- 健康运营指引
- 用户隐私保护
- 用户隐私保护指引填写说明
- 小程序用户隐私保护指引内容介绍
- 插件用户隐私保护说明内容介绍
- 小程序隐私协议开发指南
- 用户安全解决方案
- 内容安全解决方案
- 业务安全解决方案
- 企业微信兼容
- 基础库
- 介绍
- 版本分布
- 低版本兼容
- 小程序搜索
- 小程序搜索优化指南
- 商品数据接入(内测)
# 头像昵称填写
从基础库 2.21.2 开始支持
当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库2.24.4版本起,已接入内容安全服务端接口( mediaCheckAsync、 msgSecCheck),以减少内容安全风险对开发者的影响。
# 使用方法
# 头像选择
需要将 button 组件 open-type
的值设置为 chooseAvatar
,当用户选择需要使用的头像之后,可以通过 bindchooseavatar
事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar
事件。
# 昵称填写
需要将 input 组件 type
的值设置为 nickname
,当用户在此input进行输入时,键盘上方会展示微信昵称。
从基础库2.24.4版本起,在onBlur
事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-type
为submit
的 button 组件收集用户输入的内容。
在开发者工具上,input 组件是用 web 组件模拟的,因此部分情况下并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。
# 代码示例
在开发者工具中预览效果
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
}
})
The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. Tap to report.