1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：度假的小鱼 分类：Toy博客 阅读(44) 违法举报

这篇具有很好参考价值的文章主要介绍了05-微信小程序常用组件-表单组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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


微信小程序包含了六大组件： 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。
  • 其中，视图容器组件包括view和scroll-view等，用于实现页面的结构和滚动效果；
  • 基础内容组件包括text和image等，用于显示文本和图片内容；
  • 表单组件包括button、input和checkbox等，用于实现用户输入和选择；
  • 互动组件包括contact和action-sheet等，用于实现用户之间的互动和操作。

表单组件

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

button 按钮

功能描述

按钮。

属性说明

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

WebView Skyline

属性 类型 默认值 必填 说明 最低版本
size string default 否 按钮的大小 1.0.0
type string default 否 按钮的样式类型 1.0.0
plain boolean false 否 按钮是否镂空，背景色透明 1.0.0
disabled boolean false 否 是否禁用 1.0.0
loading boolean false 否 名称前是否带 loading 图标 1.0.0
form-type string 否 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 1.0.0
open-type string 否 微信开放能力 1.1.0
hover-class string button-hover 否 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 1.0.0
hover-stop-propagation boolean false 否 指定是否阻止本节点的祖先节点出现点击态 1.5.0
hover-start-time number 20 否 按住后多久出现点击态，单位毫秒 1.0.0
hover-stay-time number 70 否 手指松开后点击态保留时间，单位毫秒 1.0.0
lang string en 否 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 1.3.0
session-from string 否 会话来源，open-type="contact"时有效 1.4.0
send-message-title string 当前标题 否 会话内消息卡片标题，open-type="contact"时有效 1.5.0
send-message-path string 当前分享路径 否 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 1.5.0
send-message-img string 截图 否 会话内消息卡片图片，open-type="contact"时有效 1.5.0
app-parameter string 否 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 1.9.5
show-message-card boolean false 否 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 1.5.0
bindgetuserinfo eventhandle 否 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效 1.3.0
bindcontact eventhandle 否 客服消息回调，open-type="contact"时有效 1.5.0
bindgetphonenumber eventhandle 否 手机号快速验证回调，open-type=getPhoneNumber时有效 1.2.0
binderror eventhandle 否 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 1.9.5
bindopensetting eventhandle 否 在打开授权设置页后回调，open-type=openSetting时有效 2.0.7
bindlaunchapp eventhandle 否 打开 APP 成功的回调，open-type=launchApp时有效 2.4.4
bindchooseavatar eventhandle 否 获取用户头像回调，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-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-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>
  • 效果图

05-微信小程序常用组件-表单组件,微信小程序从0到1（2023）,微信小程序,notepad++,小程序

  • 设置按钮禁用

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-submit boolean false 否 是否返回 formId 用于发送模板消息 1.0.0
report-submit-timeout number 0 否 等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId 2.6.2
bindsubmit eventhandle 否 携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’} 1.0.0
bindreset eventhandle 否 表单重置时会触发 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>
  • 效果

05-微信小程序常用组件-表单组件,微信小程序从0到1（2023）,微信小程序,notepad++,小程序

image 图片

功能描述

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

属性说明

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

WebView Skyline

属性 类型 默认值 必填 说明 最低版本
src string 否 图片资源地址 1.0.0
mode string scaleToFill 否 图片裁剪、缩放的模式 1.0.0
webp boolean false 否 默认不解析 webP 格式，只支持网络资源 2.9.0
lazy-load boolean false 否 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 1.5.0
show-menu-by-longpress boolean false 否 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 2.7.0
binderror eventhandle 否 当错误发生时触发，event.detail = {errMsg} 1.0.0
bindload eventhandle 否 当图片载入完毕时触发，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>

05-微信小程序常用组件-表单组件,微信小程序从0到1（2023）,微信小程序,notepad++,小程序

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

05-微信小程序常用组件-表单组件,微信小程序从0到1（2023）,微信小程序,notepad++,小程序

``下一章节 微信小程序-注册程序-场景值.文章来源地址https://www.toymoban.com/news/detail-658462.html

到了这里，关于05-微信小程序常用组件-表单组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）

    【微信小程序】-- 表单组件 - picker 实现日期选择器（五十三）

    💌 所属专栏：【微信小程序开发教程】 😀 作  者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！ 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘   大家好，又见面了，

    2023年04月16日
    浏览(45)
  • 微信小程序+前后端开发学习材料2-（视图+基本内容+表单组件）

    微信小程序+前后端开发学习材料2-（视图+基本内容+表单组件）

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

    2024年01月18日
    浏览(49)
  • 04-微信小程序常用组件-基础组件

    04-微信小程序常用组件-基础组件

    04-微信小程序常用组件-基础组件 微信小程序包含了六大组件： 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。 其中，视图容器组件包括view和scroll-view等，用于实现页面的

    2024年02月12日
    浏览(39)
  • 微信小程序的常用组件

    微信小程序的常用组件

    目录 一、常用的视图容器类组件 ① view ② scroll-view ③ swiper 和 swiper-item 二、常用的基础内容组件 ① text ② rich-text 三、其它常用组件  ① button ② image ③ navigator ① view 普通视图区域 类似于 HTML 中的 div，是一个块级元素 常用来实现页面的布局效果 属性 说明 text-align

    2024年02月11日
    浏览(46)
  • 03-微信小程序常用组件-视图容器组件

    03-微信小程序常用组件-视图容器组件

    微信小程序组件-视图容器 微信小程序包含了六大组件： 视图容器 、 基础内容 、 导航 、 表单 、 互动 和 导航 。这些组件可以通过WXML和WXSS进行布局和样式设置，从而构建出丰富的小程序界面和交互体验。 其中，视图容器组件包括view和scroll-view等，用于实现页面的结构和

    2024年02月12日
    浏览(42)
  • mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（修改源码插槽使用）

    mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（修改源码插槽使用）

    1、mpVue微信小程序不支持动态组件（component ） 2、mpVue微信小程序不支持动态属性及事件穿透（ $attrs 和 $listeners ） 3、mpVue微信小程序不支持 render 函数 TForm 表单组件 代码示例： 参数 说明 类型 默认值 className 自定义类名 String - listTypeInfo 下拉选择数据源（type:\\\'date/datetime/ra

    2024年02月16日
    浏览(66)
  • 微信小程序——常用组件的属性介绍

    微信小程序——常用组件的属性介绍

    text 文本组件 类似于HTML中的span标签，是一个行内元素 rich-text 富文本标签 支持把HTML字符串渲染为WXML结构 text标签的基本使用 通过text组件的selectable属性，实现长按选中文本内容的效果。只有text标签支持长按选中效果，其他的组件是不支持的 结构内容代码： view class=\\\"text-

    2024年02月07日
    浏览(65)
  • 微信小程序的页面制作---常用组件及其属性2

    微信小程序的页面制作---常用组件及其属性2

    在全局配置文件app.json中添加taBar配置，可实现标签栏配置。标签栏最少2个，最多5个 （1）如何配置标签栏？ 1》先建多个文件，（以我的index，list，myform文件夹为例） 2》在app.json这个全局配置文件里面配置taBar，（必填taBar配置项——color、selectedColor、backgroundColor、list） 3》

    2024年04月13日
    浏览(40)

  • UniApp、微信小程序、Vue常用的UI组件

    在前端项目开发过程中，总是会引入一些UI框架，已为方便自己的使用，很多大公司都有自己的一套UI框架，下面就是最近经常使用并且很流行的UI框架。 MintUI是饿了么团队开发基于vue.js的移动端UI框架，它包含丰富的CSS和JS组件，能够满足日常的移动端开发需要。 官网地址：

    2024年02月12日
    浏览(44)
  • 微信小程序-常用视图容器类组件[图文并茂 通俗易懂]

    微信小程序-常用视图容器类组件[图文并茂 通俗易懂]

    目录 view scroll-view swiper和swiper-item text rich-text button image 普通视图区域 块级元素 类似HTML的div 使用效果: 代码展示: list.wxml list.wxss 可滚动的视图区域 常用来实现滚动列表的效果 使用效果: 代码展示: list.wxml list.wxss  轮播图容器组件 和 轮播图 item组件 更多了解属性 使用效果

    2024年02月09日
    浏览(45)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包