05-微信小程序常用组件-表单组件

05-微信小程序常用组件-表单组件

文章目录

  • 表单组件
    • button 按钮
      • 案例代码
    • form 表单
      • 案例代码
    • image 图片
      • 支持长按识别的码
      • 案例代码

微信小程序包含了六大组件: 视图容器基础内容导航表单互动导航。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。

  • 其中,视图容器组件包括view和scroll-view等,用于实现页面的结构和滚动效果;
  • 基础内容组件包括text和image等,用于显示文本和图片内容;
  • 表单组件包括button、input和checkbox等,用于实现用户输入和选择;
  • 互动组件包括contact和action-sheet等,用于实现用户之间的互动和操作。

表单组件

微信小程序表单组件官方文档

button 按钮

功能描述

按钮。

属性说明

Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

WebView Skyline

属性类型默认值必填说明最低版本
sizestringdefault按钮的大小1.0.0
typestringdefault按钮的样式类型1.0.0
plainbooleanfalse按钮是否镂空,背景色透明1.0.0
disabledbooleanfalse是否禁用1.0.0
loadingbooleanfalse名称前是否带 loading 图标1.0.0
form-typestring用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件1.0.0
open-typestring微信开放能力1.1.0
hover-classstringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果1.0.0
hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
hover-start-timenumber20按住后多久出现点击态,单位毫秒1.0.0
hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒1.0.0
langstringen指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。1.3.0
session-fromstring会话来源,open-type="contact"时有效1.4.0
send-message-titlestring当前标题会话内消息卡片标题,open-type="contact"时有效1.5.0
send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径,open-type="contact"时有效1.5.0
send-message-imgstring截图会话内消息卡片图片,open-type="contact"时有效1.5.0
app-parameterstring打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效1.9.5
show-message-cardbooleanfalse是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效1.5.0
bindgetuserinfoeventhandle用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效1.3.0
bindcontacteventhandle客服消息回调,open-type="contact"时有效1.5.0
bindgetphonenumbereventhandle手机号快速验证回调,open-type=getPhoneNumber时有效1.2.0
binderroreventhandle当使用开放能力时,发生错误的回调,open-type=launchApp时有效1.9.5
bindopensettingeventhandle在打开授权设置页后回调,open-type=openSetting时有效2.0.7
bindlaunchappeventhandle打开 APP 成功的回调,open-type=launchApp时有效2.4.4
bindchooseavatareventhandle获取用户头像回调,open-type=chooseAvatar时有效2.21.2

Bug & Tip

  1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  2. tip: bindgetphonenumber 从1.2.0 开始支持,但是在1.5.3以下版本中无法使用wx.canIUse进行检测,建议使用基础库版本进行判断。
  3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录,可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey,导致解密失败。建议开发者提前进行 login;或者在回调中先使用 checkSession 进行登录态检查,避免 login 刷新登录态。
  4. tip: 从 2.21.2 起,对getPhoneNumber接口进行了安全升级,bindgetphonenumber 返回的信息中增加code参数,code是一个动态的令牌,开发者拿到code后需调用微信后台接口换取手机号。详情新版接口使用指南
  5. tip: 从 2.1.0 起,button 可作为原生组件的子节点嵌入,以便在原生组件上使用 open-type 的能力。
  6. tip: 目前设置了 form-typebutton 只会对当前组件中的 form 有效。因而,将 button 封装在自定义组件中,而 form 在自定义组件外,将会使这个 buttonform-type 失效。

案例代码

primary绿色
default白色
warn红色

wxml

<view><button size='default'>默认尺寸按钮</button><button size='mini'>mini按钮</button><button size='mini' type="primary">绿色mini按钮</button><button size='mini' type="warn" plain="ture" >红色mini按钮</button>
</view>
  • 效果图

在这里插入图片描述

  • 设置按钮禁用

disabled="ture"

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eqmQblGM-1692368330313)(2023微信小程序图片/image-20230630134604728.png)]

form 表单

功能描述

表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

属性说明

属性类型默认值必填说明最低版本
report-submitbooleanfalse是否返回 formId 用于发送模板消息1.0.0
report-submit-timeoutnumber0等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。如果失败,将返回 requestFormId:fail 开头的 formId2.6.2
bindsubmiteventhandle携带 form 中的数据触发 submit 事件,event.detail = {value : {‘name’: ‘value’} , formId: ‘’}1.0.0
bindreseteventhandle表单重置时会触发 reset 事件1.0.0

案例代码

<form bindsubmit="formSubmit" bindreset="formReset"><view class="section section_gap"><view class="section__title">switch</view><switch name="switch" /></view><view class="section section_gap"><view class="section__title">slider</view><slider name="slider" show-value></slider></view><view class="section"><view class="section__title">input</view><input name="input" placeholder="please input here" /></view><view class="section section_gap"><view class="section__title">radio</view><radio-group name="radio-group"><label><radio value="radio1" /> radio1</label><label><radio value="radio2" /> radio2</label></radio-group></view><view class="section section_gap"><view class="section__title">checkbox</view><checkbox-group name="checkbox"><label><checkbox value="checkbox1" /> checkbox1</label><label><checkbox value="checkbox2" /> checkbox2</label></checkbox-group></view><view class="btn-area"><button form-type="submit">Submit</button><button form-type="reset">Reset</button></view>
</form>
  • 效果

在这里插入图片描述

image 图片

功能描述

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式,2.3.0 起支持云文件ID。

属性说明

Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

WebView Skyline

属性类型默认值必填说明最低版本
srcstring图片资源地址1.0.0
modestringscaleToFill图片裁剪、缩放的模式1.0.0
webpbooleanfalse默认不解析 webP 格式,只支持网络资源2.9.0
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载1.5.0
show-menu-by-longpressbooleanfalse长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单。2.7.0
binderroreventhandle当错误发生时触发,event.detail = {errMsg}1.0.0
bindloadeventhandle当图片载入完毕时触发,event.detail = {height, width}1.0.0

支持长按识别的码

类型说明最低版本
小程序码
微信个人码2.18.0
企业微信个人码2.18.0
普通群码指仅包含微信用户的群2.18.0
互通群码指既有微信用户也有企业微信用户的群2.18.0
公众号二维码2.18.0

Bug & Tip

  1. tip:image组件默认宽度320px、高度240px
  2. tip:image组件进行缩放时,计算出来的宽高可能带有小数,在不同webview内核下渲染可能会被抹去小数部分

mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。

模式合法值说明最低版本
缩放scaleToFill缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
裁剪heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变2.10.3
裁剪top裁剪模式,不缩放图片,只显示图片的顶部区域
裁剪bottom裁剪模式,不缩放图片,只显示图片的底部区域
裁剪center裁剪模式,不缩放图片,只显示图片的中间区域
裁剪left裁剪模式,不缩放图片,只显示图片的左边区域
裁剪right裁剪模式,不缩放图片,只显示图片的右边区域
裁剪top left裁剪模式,不缩放图片,只显示图片的左上边区域
裁剪top right裁剪模式,不缩放图片,只显示图片的右上边区域
裁剪bottom left裁剪模式,不缩放图片,只显示图片的左下边区域
裁剪bottom right裁剪模式,不缩放图片,只显示图片的右下边区域

案例代码

<image src="../image/202306001.png"></image>
<image src="../image/202306003.png" mode="top"></image>

在这里插入图片描述

<image src="../image/202306001.png"></image>
<image src="../image/202306001.png" mode="right"></image>

在这里插入图片描述

``下一章节 微信小程序-注册程序-场景值.

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

800V高压电驱动系统架构分析

需要电驱竞品样件请联&#xff1a;shbinzer &#xff08;拆车邦&#xff09; 过去一年是新能源汽车市场爆发的一年&#xff0c;据中汽协数据&#xff0c;2021年新能源汽车销售352万辆&#xff0c;同比大幅增长157.5%。新能源汽车技术发展迅速&#xff0c;畅销车辆在动力性能…

【Python原创设计】基于Python Flask的全国气象数据采集及可视化系统-附下载方式以及项目参考论文,原创项目其他均为抄袭

基于Python Flask的全国气象数据采集及可视化系统 一、项目简介二、项目技术三、项目功能四、运行截图五、分类说明六、实现代码七、数据库结构八、源码下载 一、项目简介 本项目是一个基于Web技术的实时气象数据可视化系统。通过爬取中国天气网的各个城市气象数据&#xff0c…

Nginx高可用集群

目录 一.简介二.案例1.实现思路2.配置文件修改3.实现效果故障转移机制 一.简介 以提高应用系统的可靠性&#xff0c;尽可能地减少中断时间为目标&#xff0c;确保服务的连续性&#xff0c;达到高可用的容错效果。例如“故障切换”、“双机热备”、“多机热备”等都属于高可用集…

ceph集群的扩容缩容

文章目录 集群扩容添加osd使用ceph-deploy工具手动添加 添加节点新节点前期准备新节点安装ceph&#xff0c;出现版本冲突 ceph-deploy增加节点 集群缩容删除osd删除节点 添加monitor节点删除monitor节点使用ceph-deploy卸载集群 实验所用虚拟机均为Centos 7.6系统&#xff0c;8…

windows系统丢失mfc120u.dll的解决方法

1.mfc120u.dll是什么 mfc120u.dll是Windows操作系统中的一个动态链接库&#xff08;Dynamic Link Library&#xff0c;简称DLL&#xff09;文件。它包含了一些用于运行C程序的函数和其他资源。这个特定的DLL文件是Microsoft Foundation Classes&#xff08;MFC&#xff09;库的…

【数据结构OJ题】相交链表

原题链接&#xff1a;https://leetcode.cn/problems/intersection-of-two-linked-lists/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 看到这道题&#xff0c;很容易想到的方法就是暴力求解&#xff0c;就是将一个链表的每个结点的地址…

曲线救国 | 双非渣硕的秋招路

作者 | 带带大兄弟 面试锦囊之面经分享系列&#xff0c;持续更新中 欢迎后台回复"面试"加入讨论组交流噢 一篇旧文&#xff0c;可以参考~ 写在前面 双非渣硕&#xff0c;0实习&#xff0c;3篇水文&#xff0c;三个给老板当打工仔的nlp横向项目&#xff0c;八月份开…

文本三剑客之sed编辑器

sed 一、sed简介1.1 什么是sed&#xff1f;1.2 sed原理1.3 sed核心功能 二、sed命令格式详解2.1 命令格式2.2 常用选项2.3 sed脚本语法2.3.1 基本语法结构2.3.2 地址部分-----指定匹配范围2.3.3 命令部分-----要执行的命令 三、sed查找替换3.1 基本语法3.2 分组后向引用3.3 变量…

【面试八股文】每日一题:谈谈你对线程的理解

每日一题-Java核心-谈谈你对线程的理解【面试八股文】 Java线程是Java程序中的执行单元。一个Java程序可以同时运行多个线程&#xff0c;每个线程可以独立执行不同的任务。线程的执行是并发的&#xff0c;即多个线程可以同时执行。 1. 线程的特点 Java中的线程有如下的特点 轻…

[LeetCode - Python]844. 比较;含退格的字符串(Easy);415. 字符串相加(Easy)

1.题目 844. 比较含退格的字符串&#xff08;Easy&#xff09; 1.代码&#xff1a; class Solution:def backspaceCompare(self, s: str, t: str) -> bool:# 暴力法s list(s)t list(t)M 0N 0for i in range(len(s)):i -M if s[i] # :if i > 0 :s.pop(i)s.pop(i-…

LION AI 大模型落地,首搭星纪元 ES

自新能源汽车蓬勃发展以来&#xff0c;随着潮流不断进步和变革的“四大件”有着明显变化。其中有&#xff1a;平台、智能驾驶、配置、以及车机。方方面面都有着不同程度的革新。 而车机方面&#xff0c;从以前老旧的媒体机、 CD 机发展至如今具有拓展性、开放性、智能化的车机…

Docker部署php运行环境(php-fpm+nginx)

前言 如果使用docker去部署一套php的运行环境&#xff0c;我们需要构建出nginx、php-fpm两个容器&#xff0c;nginx通过fast_cgi协议去转发php-fpm中的端口&#xff0c;从而实现web server的搭建&#xff0c;接下来以php的laravel框架为演示例子。 部署php-fpm 第一步 编写ph…

一、数学建模之线性规划篇

1.定义 2.例题 3.使用软件及解题 一、定义 1.线性规划&#xff08;Linear Programming&#xff0c;简称LP&#xff09;是一种数学优化技术&#xff0c;线性规划作为运筹学的一个重要分支&#xff0c;专门研究在给定一组线性约束条件下&#xff0c;如何找到一个最优的决策&…

Prometheus 监控系统---你值得拥有

目录 一&#xff1a;Prometheus 1、Prometheus 概述 2、应用场景 3、Prometheus 的特点 4、Prometheus 的生态组件 &#xff08;1&#xff09;Prometheus server&#xff1a;服务核心组件 &#xff08;2&#xff09;Client Library: 客户端库 &#xff08;3&#xff0…

前端开发怎么解决前端安全性的问题? - 易智编译EaseEditing

前端安全性是保护前端应用程序免受恶意攻击和数据泄露的重要方面。以下是一些解决前端安全性问题的关键方法&#xff1a; 输入验证与过滤&#xff1a; 对所有用户输入进行验证和过滤&#xff0c;防止恶意用户通过注入攻击等手段破坏应用程序或获取敏感信息。 跨站点脚本&#…

安卓移动应用开发实训室建设方案

一 、系统概述 安卓移动应用开发作为新一代信息技术的重点和促进信息消费的核心产业&#xff0c;已成为我国转变信息服务业的发展新热点&#xff1a;成为信息通信领域发展最快、市场潜力最大的业务领域。互联网尤其是移动互联网&#xff0c;以其巨大的信息交换能力和快速渗透能…

k8s 自身原理之高可用

说到高可用&#xff0c;咱们在使用主机环境的时候&#xff08;非 k8s&#xff09;&#xff0c;咱做高可用有使用过这样的方式&#xff1a; 服务器做主备部署&#xff0c;当主节点和备节点同时存活的时候&#xff0c;只有主节点对外提供服务&#xff0c;备节点就等着主节点挂了…

logstash配置文件

input { kafka { topics > “xxxx” bootstrap_servers > “ip:port” auto_offset_reset > “xxxx” group_id > “xxxx” consumer_threads > 3 codec > “json” } } filter { grok { match > { “message” > ‘%{IP:client_ip} - - [%{HTTPDATE:…

PostgreSQL父子建表查询所有的子数据-利用自定义函数查询

pgsql 函数查询代码 select find_space_tree_list_by_nodeid(1,1) 查询结果示意图 获取子集函数代码 CREATE OR REPLACE FUNCTION "public"."find_space_tree_list_by_nodeid"("nodeid" varchar, "viewid" varchar)RETURNS "…