小程序 常用组件

news/2025/2/7 4:40:11/

文章目录

  • 常见组件
    • 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.jsPage({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

<buttontype="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.ppmy.cn/news/1325978.html

相关文章

模仿ProTable创建ProTable组件

模仿ProTable创建ProTable组件

不多说废话直接上代码 父组件 // index.jsx/*** description 此ProTable是根据ProComponents里的ProTable模仿封装的简易版本* */ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from react import { Card, Table } from antd import…
阅读更多...
【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器（超详细！）

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器（超详细！）

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器 注&#xff1a;本学习笔记基于stm32f4系列 使用的开发板为正点原子stmf407ZGT6探索者开发板 GPIO引脚使用时&#xff0c;可输入或输出数字信号 例如: 检测按键输入信号&#xff08;Read_Pin&#xff09;输出信号&#xff08;W…
阅读更多...
从 GPT1 - GPT4 拆解

从 GPT1 - GPT4 拆解

从 GPT1 - GPT4 拆解 从 GPT1 - GPT4GPT1&#xff1a;更适用于文本生成领域GPT2&#xff1a;扩展数据集、模型参数&#xff0c;实现一脑多用&#xff08;多个任务&#xff09;GPT3&#xff1a;元学习 大力出奇迹InstructGPT&#xff1a;指示和提示学习 人工反馈强化学习 RLHF…
阅读更多...
C++_Lambda表达式的完整介绍

C++_Lambda表达式的完整介绍

目录 1. 什么是Lambda表达式 1.1 四种表达式的含义 1.2 lambda表达式各个成员的解释 2. 捕获列表 3. 编译器如何看待Lambda表达式 参考文章 参考: C Lambda表达式的完整介绍 - 知乎 c在c11标准中引入了lambda表达式&#xff0c;一般用于定义匿名函数&#xff0c;使得代码…
阅读更多...
5G基站 储能发展新方向

5G基站 储能发展新方向

基站储能行业的发展前景广阔&#xff0c;随着5G技术的普及&#xff0c;未来将需要更多的基站储能设备来支持网络信号的覆盖和传输。在这个背景下&#xff0c;储能用的硬件和软件设备也需要不断跟进和创新&#xff0c;以满足基站储能行业的需求。 首先&#xff0c;储能用的硬件设…
阅读更多...
Oracle 数据库备份与恢复的重要性与最佳实践

Oracle 数据库备份与恢复的重要性与最佳实践

文章目录 一、备份的重要性二、备份工具-RMAN四、比较备份策略五、实例恢复六、完全恢复与不完全恢复七、备份与恢复脚本 引言&#xff1a; 在现代信息时代&#xff0c;数据已成为组织和企业最重要的资产之一。保护和恢复数据的能力对于确保业务连续性和减少潜在风险至关重要。…
阅读更多...
ChatGPT正确打开方式与GPT-4.5的key最新获取方式

ChatGPT正确打开方式与GPT-4.5的key最新获取方式

前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff1a;https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言4.5key价格泄漏ChatGPT4.0使用地址ChatGPT正确打开方式最新功能语音助手存档…
阅读更多...
大模型推理引擎面试复习大纲

大模型推理引擎面试复习大纲

Transformer原理 基本组成、注意力机制含义 transformer有哪些模块&#xff0c;各个模块有什么作用&#xff1f; transformer的模块可以分为以下几类&#xff1a; Encoder模块&#xff1a;transformer的编码器&#xff0c;它由多个相同的encoder层堆叠而成&#xff0c;每个enc…
阅读更多...
最新文章

Copyright @ 2022~2023