微信小程序入门（六）常见内置组件 Text组件 Button组件解析 open-type的取值 View组件 Image组件 Input组件 scroll-view组件共同属性

最新推荐文章于 2025-10-16 13:03:21 发布

原创最新推荐文章于 2025-10-16 13:03:21 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #html

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文深入解析小程序中的Text、Button、View、Image、Input和scroll-view等核心组件的使用方法及属性，帮助开发者快速掌握小程序开发技巧。

Text组件

Text组件用于显示文本, 类似于span标签, 是行内元素

在这里插入图片描述

<!--pages/text/text.wxml-->
<text>Hello world\n</text>
<text>你好小程序\n</text>
<!-- 属性 -->
<!-- 1. selectable :true-->
<!-- 默认情况下text中的文本长按是不能被选中的-->
<text selectable='{{true}}'>Hello World\n</text>
<!-- 2. space :显示连续空格-->
<text space="nbsp">Hello World\n </text>
<text space="ensp">Hello World\n </text>
<text space="emsp">Hello World\n </text>
<!-- 3. decode :是否解码-->
<text>53\n</text>
<text decode="{{true}}"> 5&nbsp;3  \n</text>

Button组件解析

在这里插入图片描述

<!--pages/button/button.wxml-->
<!-- button 的基本使用-->
<!-- 1.size属性：mini-->
<button size="mini">按钮</button>
<button size="mini">按钮</button>
<!--2.type属性-->
<button size="mini" type="primary">按钮</button>
<button size="mini" type="default">按钮</button>
<button size="mini" type="warn">按钮</button>
<!--3.plain:按钮是否镂空，背景色透明-->
<button size="mini" type="primary" plain>按钮</button>
<!--4.disabled :是否禁用-->
<button size="mini" type="primary" plain disabled >按钮</button>
<!--5.loading-->
<button size="mini" type="primary" plain loading >按钮</button>
<!--6.form-type-->
<button size="mini" type="primary" plain loading >按钮</button>
<!--7.open-type-->
<!--8.hover-class-->
<button size="mini"  hover-class="pressed" >按钮</button>