小程序 常用组件

news2025/11/4 19:27:28

文章目录

  • 常见组件
    • view
    • text
    • image
    • swiper
    • navigator
    • rich-text
      • nodes属性
    • button
    • icon
    • from
    • radio
    • checkbox

常见组件

重点讲解⼩程序中常⽤的布局组件
view,text,rich–text,button,image,navigator,icon,swiper,radio,checkbox。 等

view

代替 原来的 div 标签

  <view hover-class="h-class">
 点击我试试
  </view>

text

  1. ⽂本标签
  2. 只能嵌套text
  3. ⻓按⽂字可以复制（只有该标签有这个功能）
  4. 可以对空格 回⻋ 进⾏编码
属性名类型默认值说明
selectableBooleanfalse⽂本是否可选
decodeBooleanfalse是否解码
 <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

image

  1. 图⽚标签，image组件默认宽度320px、⾼度240px
  2. ⽀持懒加载
属性名类型默认值说明
srcString图⽚资源地址
modeString‘scaleToFill’图片剪裁，缩放的模式
lazy-loadBooleanfalse图片懒加载

mode 有效值：
mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。

模式值说明
缩放scaleToFill不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image 元素
缩放aspectFit保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来。
缩放aspectFill保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。
缩放widthFix宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
裁剪top不缩放图⽚，只显⽰图⽚的顶部区域
裁剪bottom不缩放图⽚，只显⽰图⽚的底部区域
裁剪center不缩放图⽚，只显⽰图⽚的中间区域
裁剪left不缩放图⽚，只显⽰图⽚的左边区域
裁剪right不缩放图⽚，只显⽰图⽚的右边区域
裁剪top left不缩放图⽚，只显⽰图⽚的左上边区域
裁剪top right不缩放图⽚，只显⽰图⽚的右上边区域
裁剪bottom left不缩放图⽚，只显⽰图⽚的左下边区域
裁剪bottom right不缩放图⽚，只显⽰图⽚的右下边区域

swiper

微信内置轮播图组件
在这里插入图片描述

默认宽度 100% ⾼度 150px

属性名类型默认值说明
indicator-dotsBooleanfalse是否显⽰⾯板指⽰点
indicator-colorColorrgba(0, 0, 0, .3)指⽰点颜⾊
indicator-active-colorColor#000000当前选中的指⽰点颜⾊
autoplayBooleanfalse是否⾃动切换
intervalNumber5000⾃动切换时间间隔
circularBooleanfalse是否循环轮播

navigator

导航组件 类似超链接标签

属性名类型默认说明
targetStringself在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值self/miniProgram
urlString当前⼩程序内的跳转链接
open-typeStringnavigate跳转⽅式

open-type 有效值：

值说明
navigate保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到 tabbar ⻚⾯
redirect关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到 tabbar ⻚⾯。
switchTab跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯
reLaunch关闭所有⻚⾯，打开到应⽤内的某个⻚⾯
navigateBack关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当前的⻚⾯栈，决定需要返回⼏层
exit退出⼩程序，target="miniProgram"时生效

rich-text

富文本标签

可以将字符串解析成 对应标签，类似 vue中 v–html 功能

在这里插入图片描述

代码

// 1   index.wxml 加载 节点数组
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串
<rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

nodes属性

nodes 属性⽀持 字符串 和 标签节点数组

属性说明类型必填备注
name标签名string是⽀持部分受信任的 HTML 节点
attrs属性object否⽀持部分受信任的属性，遵循 Pascal 命名法
children⼦节点列表array否结构和 nodes ⼀致

⽂本节点：type = text

属性说明类型必填备注
text⽂本string是⽀持entities
  • nodes 不推荐使⽤ String 类型，性能会有所下降。
  • rich–text 组件内屏蔽所有节点的事件。
  • attrs 属性不⽀持 id ，⽀持 class 。
  • name 属性⼤⼩写不敏感。
  • 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
  • img 标签仅⽀持⽹络图⽚。

button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
 default
</button>
属性说明类型必填备注
sizestringdefault否按钮的⼤⼩
typestringdefault否按钮的样式类型
plainbooleanfalse否按钮是否镂空，背景⾊透明
disabledbooleanfalse否是否禁⽤
loadingbooleanfalse否名称前是否带 loading 图标
form-typestring否⽤于 组件，点击分别会触发 组件的submit/reset 事件
open-typestring否微信开放能⼒

size 的合法值

值说明
default默认⼤⼩
mini⼩尺⼨

type 的合法值

值说明
primary绿⾊
default⽩⾊
warn红⾊

form-type 的合法值

值说明
submit提交表单
reset重置表单

open-type 的合法值

值说明
contact打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息，具体说明
share触发⽤⼾转发，使⽤前建议先阅读使⽤指引
getPhoneNumber获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，具体说明
getUserInfo获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp打开APP，可以通过app-parameter属性设定向APP传的参数具体说明
openSetting打开授权设置⻚
feedback打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

icon

属性类型默认值必填说明
typestring是icon的类型，有效值：success, success_no_circle,info, warn, waiting, cancel, download, search,clear
sizenumber/string23否icon的⼤⼩
colorstring否icon的颜⾊，同css的color

在这里插入图片描述

代码
js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>
<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

from

功能描述
表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key

属性说明

属性类型默认值必填说明
report-submitbooleanfalse否是否返回 formId 用于发送模板消息
report-submit-timeoutnumber0否等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmiteventhandle否携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreseteventhandle否表单重置时会触发 reset 事件
代码
<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="formReset">
      <view class="page-section page-section-gap">
        <view class="page-section-title">switch</view>
        <switch name="switch"/>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">radio</view>
        <radio-group name="radio">
          <label><radio value="radio1"/>选项一</label>
          <label><radio value="radio2"/>选项二</label>
        </radio-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">checkbox</view>
        <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1"/>选项一</label>
          <label><checkbox value="checkbox2"/>选项二</label>
        </checkbox-group>
      </view>

      <view class="page-section page-section-gap">
        <view class="page-section-title">slider</view>
        <slider value="50" name="slider" show-value ></slider>
      </view>

      <view class="page-section">
        <view class="page-section-title">input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__bd" style="margin: 30rpx 0" >
              <input class="weui-input" name="input" placeholder="这是一个输入框" />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
        <button style="margin: 30rpx 0" formType="reset">Reset</button>
      </view>
    </form>
  </view>

</view>

Page({
  onShareAppMessage() {
    return {
      title: 'form',
      path: 'page/component/pages/form/form'
    }
  },

  data: {
    pickerHidden: true,
    chosen: ''
  },

  pickerConfirm(e) {
    this.setData({
      pickerHidden: true
    })
    this.setData({
      chosen: e.detail.value
    })
  },

  pickerCancel() {
    this.setData({
      pickerHidden: true
    })
  },

  pickerShow() {
    this.setData({
      pickerHidden: false
    })
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },

  formReset(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  }
})

效果
在这里插入图片描述

radio

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 radio-group ⼀起使⽤

checkbox

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 checkbox-group ⼀起使⽤

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C语言基础考研向】05 scanf读取标准输入超详解

【C语言基础考研向】05 scanf读取标准输入超详解

文章目录 一.scanf函数的原理 样例问题原因解决方法 二.多种数据类型混合输入 错误样例正确样例 一.scanf函数的原理 C语言未提供输入/输出关键字&#xff0c;其输入和输出是通过标准函数库来实现的。C语言通过scanf函数读取键盘输入&#xff0c;键盘输入又被称为标准输入。…
阅读更多...
Qt绘画的使用

Qt绘画的使用

1. 绘图 绘图组件&#xff1a; 1、绘画对象 2、绘画位置 3、绘画工具 4、绘画时机 绘画时机&#xff1a; 当整个窗口或窗口的一部分需要重新绘制时&#xff0c;会调用绘制事件处理函数 void QWidget::paintEvent(QPaintEvent *event) 绘画对象&#xff1a; QPainter类&#xff…
阅读更多...
java基础:求数组的最值

java基础:求数组的最值

方法一&#xff1a;顺序查找 先假设数组第一个元素为最值&#xff0c;然后和数组里的数按顺序进行比较得出最值&#xff0c;所以叫顺序查找。 代码如下 package idea;public class arr_int {public static void main(String[] args) { // 初始化一个数组int[] arr {12…
阅读更多...
【MYSQL】事务隔离级别

【MYSQL】事务隔离级别

脏读、幻读、不可重复读 脏读 一个事务正在对一条记录做修改&#xff0c;在这个事务完成并提交前&#xff0c;另一个事务也来读取同一条记录&#xff0c;读取了这些未提交的“脏”数据&#xff0c;并据此做进一步的处理&#xff0c;就会产生未提交的数据依赖关系。这种现象被形…
阅读更多...
渗透测试之Mimikatz2.2 如何抓取Win11登录明文密码

渗透测试之Mimikatz2.2 如何抓取Win11登录明文密码

环境： 1.攻击者IP：192.168.1.35 系统: KALI2022（vmware 16.0） 2.靶机IP：192.168.1.16 系统: Windows11 3.USB无线网卡 4.Mimikatz 2.2 (win版) 问题描述： Mimikatz2.2 如何抓取Win11登录明文密码 解决方案： Wdigest WDigest协议是在WindowsXP中被引入的,旨在与H…
阅读更多...
Kafka 消息不能正常消费问题排查

Kafka 消息不能正常消费问题排查

订单宽表数据不同步 事情的起因是专员在 ze app 上查不到订单了&#xff0c;而订单数据是从 mysql 的 order_search_info 查询的&#xff0c;order_search_info 表的数据是从 oracel 的 BZ_ORDER_INFO 表同步过来的&#xff0c;查不到说明同步有问题 首先重启&#xff0c;同步…
阅读更多...
如何快速打造属于自己的接口自动化测试框架

如何快速打造属于自己的接口自动化测试框架

1 接口测试 接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。 接口自动化相对于UI自动化来说&#xff0c;属于更底层的测试&#xff0c;这样带来的好处就是测试收益更大&#xff…
阅读更多...
系统配置dns主从服务器

系统配置dns主从服务器

一、准备两台主机&#xff0c;区分主从 二、完全区域传送 1、主DNS服务器配置 #安装相关的包 [rootoula1 ~]# yum install bind -y#关闭防火墙 [rootoula1 ~]# systemctl stop firewalld [rootoula1 ~]# setenforce 0#修改配置主文件 [rootoula1 ~]# vim /etc/named.conf opt…
阅读更多...
oop面向对象编程python

oop面向对象编程python

1.定义一个圆类&#xff08;Circle&#xff09;,求圆的面积和周长 import mathclass Circle():def __init__(self, R ,name):self.radius Rself.name namedef girth(self):return 2 * self.radius * math.pidef area(self):return self.radius ** 2 * math.pic1 Circle(10,&q…
阅读更多...
全球移动通信市场，正在经历哪些新变化?

全球移动通信市场，正在经历哪些新变化?

2023年已经结束了。回顾这一年的全球移动通信市场&#xff0c;如果让我用一个词来总结&#xff0c;那就是——“厚积薄发”。 从表面上来看&#xff0c;似乎并没有什么大事情发生。但实际上&#xff0c;平静的湖面之下&#xff0c;却是一片波涛汹涌、风云激荡。 无论是消费互联…
阅读更多...
springcloud Eureka服务注册与发现

springcloud Eureka服务注册与发现

文章目录 代码地址Eureka基础知识什么是服务治理什么是服务注册与发现 单机版eurekaServerIDEA生成eurekaServer端服务注册中心类似物业公司EurekaClient端cloud-provider-payment8001修改EurekaClient端cloud-consumer-order80 集群Eureka构建步骤新建cloud-eureka-server7002…
阅读更多...
Android平台Unity下如何通过WebCamTexture采集摄像头数据并推送至RTMP服务器或轻量级RTSP服务

Android平台Unity下如何通过WebCamTexture采集摄像头数据并推送至RTMP服务器或轻量级RTSP服务

技术背景 我们在对接Unity下推送模块的时候&#xff0c;遇到这样的技术诉求&#xff0c;开发者希望在Android的Unity场景下&#xff0c;获取到前后摄像头的数据&#xff0c;并投递到RTMP服务器&#xff0c;实现低延迟的数据采集处理。 在此之前&#xff0c;我们已经有了非常成…
阅读更多...
Jxls 实现动态导出功能

Jxls 实现动态导出功能

目录 引言前端页面后端代码excel模板导出效果 引言 在实际做项目的过程中&#xff0c;导出报表时需要根据每个人所关注的点不一样&#xff0c;所需导出的字段也不一样&#xff0c;这时后端就需要根据每个所选的字段去相应的报表&#xff0c;这就是本文要讲的动态导出报表。 前端…
阅读更多...
线程的使用

线程的使用

线程的创建方式 1、实现Runnable Runnable规定的方法是run()&#xff0c;无返回值&#xff0c;无法抛出异常 实现Callable 2、Callable规定的方法是call()&#xff0c;任务执行后有返回值&#xff0c;可以抛出异常 3、继承Thread类创建多线程 继承java.lang.Thread类&#xff0…
阅读更多...
Docker registry镜像仓库，私有仓库及harbor管理详解

Docker registry镜像仓库，私有仓库及harbor管理详解

目录 registry镜像仓库概述 Docker 镜像仓库&#xff08;Docker Registry&#xff09;&#xff1a; registry 容器&#xff1a; 私有仓库概述 搭建本地私有仓库示例 Harbor概述 harbor架构 详解构成 Harbor由容器构成 Harbor部署示例 环境准备 部署Docker-Compose服…
阅读更多...
uniapp中uview组件库的NoticeBar 滚动通知 使用方法

uniapp中uview组件库的NoticeBar 滚动通知 使用方法

目录 #平台差异说明 #基本使用 #配置主题 #配置图标 #配置滚动速度 #控制滚动的开始和暂停 #事件回调 #API #Props #Events 该组件用于滚动通告场景&#xff0c;有多种模式可供选择 #平台差异说明 AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√…
阅读更多...
【不需要网络不需要显卡】本地部署GPT

【不需要网络不需要显卡】本地部署GPT

【不需要网络/不需要显卡】本地部署GPT 大家好&#xff0c;我是老 J 我们都知道ChatGPT目前只有两种使用方式&#xff0c;一种是直接去官网访问&#xff0c;适合个人用户&#xff1b;另一种是API调用&#xff0c;适合企业或者网站使用。这两种方式的门槛都比较高&#xff0c;…
阅读更多...
10个用于Android开发的有用的Kotlin库及示例

10个用于Android开发的有用的Kotlin库及示例

10个用于Android开发的有用的Kotlin库及示例 在Android开发领域&#xff0c;Kotlin已成为一门领先的语言&#xff0c;带来了现代语法和功能的浪潮。随着Kotlin的崛起&#xff0c;涌现出了许多专为其定制的库&#xff0c;进一步增强了开发体验。本文将深入介绍其中的10个库&…
阅读更多...
【论文阅读】One For All: Toward Training One Graph Model for All Classification Tasks

【论文阅读】One For All: Toward Training One Graph Model for All Classification Tasks

目录 0、基本信息1、研究动机2、创新点——One For All &#xff1a;unique features3、准备4、具体实现4.1、用TAGs统一来自不同领域的图数据4.2、用NOI&#xff08;NODES-OF-INTEREST&#xff09;统一不同图任务4.2.1、NOI子图4.2.2、NOI提示结点 4.3、用于图的上下文学习&am…
阅读更多...
Rust之构建命令行程序(三)：重构改进模块化和错误处理

Rust之构建命令行程序(三)：重构改进模块化和错误处理

开发环境 Windows 10Rust 1.74.1 VS Code 1.85.1 项目工程 这次创建了新的工程minigrep. 重构改进模块化和错误处理 为了改进我们的程序&#xff0c;我们将修复与程序结构及其处理潜在错误的方式有关的四个问题。首先&#xff0c;我们的main函数现在执行两项任务:解析参数和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023