微信小程序组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/YogaLin_qwq/article/details/107642967

本文介绍了微信小程序中的常见组件，包括view、text、navigator、rich-text、button、icon、radio单选框和checkbox复选框的功能及用法。例如，view作为布局容器，text支持长按复制，navigator支持页面跳转，button具有不同类型的样式和开放能力，如分享和获取用户信息，rich-text用于显示富文本，而radio和checkbox则用于创建单选和多选选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见组件

view

相当于web里的div标签

text

1.文本标签

2.只能嵌套text

3.长按文字可以复制（只有该标签有这个功能）

4.可以对空格(&nbsp)回车进行编码

在这里插入图片描述

 <text selectable="{{false}}" decode="{{false}}">
     普&nbsp;通  
</text>

`img`

|默认宽度320px、⾼度240px

|支持懒加载（延时加载，即当对象需要用到的时候再去加载，当图片出现在视口上下三屏之内时 => 开始加载）

在这里插入图片描述

|mode有13种模式：4种缩放模式，9种裁剪模式

aspectFit：常用于轮播图

在这里插入图片描述

`swiper`

|微信内置轮播图组件，滑块视图容器（最外部）

|默认样式：width：100% height：150px => 无法实现由内容撑开

|等比例计算swiper的高度（适应屏幕）：swiper高度 = swiper宽度*原图高度/原图宽度 然后图片的mode属性选择widthFix

| swiper-item：每一个轮播项，默认宽度和⾼度都是100%

|其他属性

在这里插入图片描述

navigator

导航组件类似超链接标签 => 块级元素可以换行

|target：self跳转自身小程序；miniProgram跳转其他小程序

在这里插入图片描述

|open-type的有效值

在这里插入图片描述

rich-text

|富文本标签，可以将字符串解析成对应标签，类似vue中v-html 功能

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

在这里插入图片描述

|文本标签type = text

|特别注意：

1.nodes不推荐使用string类型，性能会下降

2.rich-text组件内屏蔽所有节点的事件

3.attrs不支持id，支持class

4.name对大小写不敏感

5.如果使用的不受信任的html的节点，该节点的所有子节点将会被移除

6.img标签仅支持网络图片

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text> 
<!--{{nodes}}与js中的nodes对应-->

// 1 标签字符串 => 常用
page({
    data:{
        nodes:'<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'
    }
})

//2.节点数组
Page({
    data: {
        nodes: [{
            //通过name名来指定标签
            name: 'div',
            //标签上的属性
            attrs: {
                class: 'div_class',
                style: 'line-height: 60px; color: red;'      		  },
            //子节点  children要接收的数据类型和 node第二种渲染方式数据类型一致
            children: [
                {
                    name："p",
                    attrs:{},
                	//放文本
                	children:[
                		type: 'text',
                		text: 'Hello&nbsp;World!'
            		]
                }
            ]
        }]
    },  
    tap() {
        console.log('tap')
    } 
})

button

外观样式

|小程序给我们提供的一些样式 1595652625270

|size：default=>默认大小；mini=>小尺寸

|type：primary=>绿色；default=>灰色；warm=>红色

|form-type：submit=>提交表单；reset=>重置表单

开放能力 open-type

open-type的合法值：

|share：转发给其他朋友（不能分享到朋友圈）

|getPhoneNumber：不是企业的小程序没有权限，获取到的信息也已经加密，需要后台服务器进行解析再返回

|getUserInfo：可以直接获取信息，没有加密

|contact的实现流程

1.将小程序的 appid 由测试号改为自己的appid

2.登录微信小程序官网，添加客服 - 微信

3.点击按钮即可与客服联系

在这里插入图片描述

icon

在这里插入图片描述

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'    ],  
  } 
})

<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>

上述代码的效果图：

在这里插入图片描述

radio单选框

|必须要和父元素radio-group一起使用

|value 选中单选框的值

|可以通过 color属性来修改选中后的颜色

在这里插入图片描述

<radio-group>
    <radio value = "male">男</radio>
    <radio value = "female">女</radio>
</radio-group>
<!--事件绑定在父元素上-->

checkbox复选框

使用方法同单选框，必须要和父元素checkbox-group一起使用

<view>
    <checkbox-group bindChange="itemchange">
        <checkbox value = "{{item.value}}" wx:for ="{{list}}" wx:key = "id">
            {{item.name}}
        </checkbox>
    </checkbox-group>
    <view>
        选中的水果：{{checkedList}}
    </view>
</view>

Page({
    data:{
        list:[
            {
                id:0,
                name:"苹果",
                value:"apple"
            },
            {
                id:1,
                name:"葡萄",
                value:"grape"
            },
    		{
                id:3,
                name:"香蕉",
                value:"banana"
            },
        ],
		checkedList:[]
    },
    itemChange:function(e){
        var checkList = e.detail.value;
        this.setData({
            checkedList:checkList
        })
    }
})

        name:"香蕉",
            value:"banana"
        },
    ],
	checkedList:[]
},
itemChange:function(e){
    var checkList = e.detail.value;
    this.setData({
        checkedList:checkList
    })
}