常见【小程序】内置组件

Love The Way You Lie 2024-04-27 15:55 62阅读 0赞

#### 文章目录 ####

*   *  小程序常见内置组件
     *   *  ?Text文本组件
         *  ?Button按钮组件
         *  ?View视图组件
         *  ?Image图片组件
         *  ?ScrollView滚动组件
         *  ?组件的共同属性

### 小程序常见内置组件 ###

> 小程序中的内置组件是非常多的, 下面主要介绍开发中常用的常见的内置组件

#### ?Text文本组件 ####

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

**常见属性**:

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">selectable</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">文本是否可选 (已废弃)</td> 
   <td>1.1.0</td> 
  </tr> 
  <tr> 
   <td align="left">user-select</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">文本是否可选，该属性会使文本节点显示为 inline-block</td> 
   <td>2.12.1</td> 
  </tr> 
  <tr> 
   <td align="left">space</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">显示连续空格</td> 
   <td>1.4.0</td> 
  </tr> 
 </tbody> 
</table>

> user-select属性决定文本内容是否可以让用户选中, 设置为true, 手指长按可以选中文本

<text user-select="{
         {true}}">Hello World</text>
    <text user-select>Hello World</text>

> space有三个取值(了解), 设置如何显式连续空格

> decode是否解码(了解)
> 
> decode可以解析的有 < > & ’

<text>></text>
    
    <text decode>></text>

--------------------

#### ?Button按钮组件 ####

**Button组件用于创建按钮，默认块级元素**

**常见属性**：

![在这里插入图片描述][00e5a01734d54952a5a5c8daa41b5c60.png_pic_center]

**`size属性`: Button组件默认是占满整行的, `size="mini"`是设置小尺寸的按钮, 是包裹内容的大小**

<table> 
 <thead> 
  <tr> 
   <th align="left">合法值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">default</td> 
   <td align="left">默认大小</td> 
  </tr> 
  <tr> 
   <td align="left">mini</td> 
   <td align="left">小尺寸</td> 
  </tr> 
 </tbody> 
</table>

**`type属性`: 设置按钮的样式类型**

> 当然我们也可以自己通过修改css来设置按钮的样式

<table> 
 <thead> 
  <tr> 
   <th align="left">合法值</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">primary</td> 
   <td align="left">绿色</td> 
  </tr> 
  <tr> 
   <td align="left">default</td> 
   <td align="left">白色</td> 
  </tr> 
  <tr> 
   <td align="left">warn</td> 
   <td align="left">红色</td> 
  </tr> 
 </tbody> 
</table>

**`plain属性`: 设置按钮镂空, 背景色透明**

**`disable属性`: 是否禁用按钮**

**`loading属性`: 按钮名称前是否有loading图标**

**`hover属性`: 按钮按下去会添加样式类**

.active {
        
    	color: #fff;
    	background-color: skyblue;
    }

**`open-type属性`有如下一些值**

<table> 
 <thead> 
  <tr> 
   <th align="left">合法值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">contact</td> 
   <td align="left">打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，具体说明（<em>小程序插件中不能使用</em>）</td> 
   <td align="left">1.1.0</td> 
  </tr> 
  <tr> 
   <td align="left">share</td> 
   <td align="left">触发用户转发，使用前建议先阅读使用指引</td> 
   <td align="left">1.2.0</td> 
  </tr> 
  <tr> 
   <td align="left">getPhoneNumber</td> 
   <td align="left">获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，具体说明 （<em>小程序插件中不能使用</em>）</td> 
   <td align="left">1.2.0</td> 
  </tr> 
  <tr> 
   <td align="left">getUserInfo</td> 
   <td align="left">获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （<em>小程序插件中不能使用</em>）</td> 
   <td align="left">1.3.0</td> 
  </tr> 
  <tr> 
   <td align="left">launchApp</td> 
   <td align="left">打开APP，可以通过 app-parameter 属性设定向 APP 传的参数具体说明</td> 
   <td align="left">1.9.5</td> 
  </tr> 
  <tr> 
   <td align="left">openSetting</td> 
   <td align="left">打开授权设置页</td> 
   <td align="left">2.0.7</td> 
  </tr> 
  <tr> 
   <td align="left">feedback</td> 
   <td align="left">打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容</td> 
   <td align="left">2.1.0</td> 
  </tr> 
  <tr> 
   <td align="left">chooseAvatar</td> 
   <td align="left">获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息</td> 
   <td align="left">2.21.2</td> 
  </tr> 
 </tbody> 
</table>

*  我们常用的是获取用户信息, 通过`open-type="getUserInfo"`获取用户信息, 获取到后在`bindgetuserinfo`回调中拿到用户信息

<button 
    	size="mini" 
    	open-type="getUserInfo" 
    	bindgetuserinfo="userInfo"
    >
    	获取用户信息
    </button>

// 获取到的用户信息
    userInfo(event) {
        
      console.log(event);
    }

*  但是目前这个API无法真正的获取到用户信息, 微信对这个获取信息做出了调整, 现在真正的获取用户信息是使用的是`wx.getUserProfile`这个API, 使用方式如下

<button size="mini" bindtap="userInfo">获取用户信息</button>

// 2.在监听函数中调用wx.getUserProfile API
    userInfo() {
        
      wx.getUserProfile({
        
        // desc必传, 描述拿到用户信息做什么
        desc: 'desc',
        // 拿到用户的信息
        success: (res) => {
        
          console.log(res);
        }
      })
    }

*  小程序早期的API都是不支持Promise风格的, 由于这个API比较新, 它是支持Promise风格的

// 2.在监听函数中调用wx.getUserProfile API
    	userInfo() {
        
    		wx.getUserProfile({
        
    			// desc必传, 描述拿到用户信息做什么
    			desc: 'desc'
    		}).then(res => {
        
    			console.log(res);
    		})
    	}

**按钮的属性非常多, 更多的属性可以查看官方文档**: https://developers.weixin.qq.com/miniprogram/dev/component/button.html

--------------------

#### ?View视图组件 ####

**视图组件, 是一个块级元素，独占一行，通常用作容器组件, 类似于html的div元素**

![在这里插入图片描述][86059c1557944cc0ad74fb3cf67dcf34.png_pic_center]

**view组件也是有`hover-class`属性的**

.active {
        
    	color: #fff;
    	background-color: skyblue;
    }

**`hover-stop-propagation`属性阻止冒泡行为**

**view属性比较少, 当成div使用即可, 这个组件没有什么复杂的**

--------------------

#### ?Image图片组件 ####

**Image组件用于显示图片，有如下常见属性**

![在这里插入图片描述][f12aa1e4abda424d8c93e1ecdb1ec1bf.png_pic_center]

**image组件可以写成单标签, 也可以写成双标签**

**其中src属性和html的img的src属性一样, 可以是本地图片，也可以是网络图片**

**Mode属性使用也非常关键，详细属性值查看官网**：

> https://developers.weixin.qq.com/miniprogram/dev/component/image.html

<table> 
 <thead> 
  <tr> 
   <th>合法值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>top</td> 
   <td>裁剪模式，不缩放图片，只显示图片的顶部区域</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>裁剪模式，不缩放图片，只显示图片的底部区域</td> 
  </tr> 
  <tr> 
   <td>center</td> 
   <td>裁剪模式，不缩放图片，只显示图片的中间区域</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左边区域</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右边区域</td> 
  </tr> 
  <tr> 
   <td>top left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左上边区域</td> 
  </tr> 
  <tr> 
   <td>top right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右上边区域</td> 
  </tr> 
  <tr> 
   <td>bottom left</td> 
   <td>裁剪模式，不缩放图片，只显示图片的左下边区域</td> 
  </tr> 
  <tr> 
   <td>bottom right</td> 
   <td>裁剪模式，不缩放图片，只显示图片的右下边区域</td> 
  </tr> 
 </tbody> 
</table>

<image src="/assets/0.jpg" mode="bottom" />
    
    <image src="/assets/0.jpg" mode="top right" />

<table> 
 <thead> 
  <tr> 
   <th>合法值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>aspectFit</td> 
   <td>缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。</td> 
  </tr> 
  <tr> 
   <td>aspectFill</td> 
   <td>缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>合法值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>widthFix</td> 
   <td>缩放模式，宽度不变，高度自动变化，保持原图宽高比不变</td> 
  </tr> 
  <tr> 
   <td>heightFix</td> 
   <td>缩放模式，高度不变，宽度自动变化，保持原图宽高比不变</td> 
  </tr> 
 </tbody> 
</table>

<image src="/assets/0.jpg" mode="widthFix" />
    <image src="/assets/0.jpg" mode="heightFix" />

**注意： image组件默认宽度320px、高度240px**

--------------------

#### ?ScrollView滚动组件 ####

**scroll-view可以实现局部滚动，常见属性如下**：

**注意事项**：

> 实现滚动效果必须添加scroll-x或者scroll-y属性（只需要添加即可，属性值相当于为true了）
> 
> 垂直方向滚动必须设置scroll-view一个高度, 水平方向滚动必须设置scroll-view一个宽度

**纵向滚动**

<scroll-view class="scroll" scroll-y>
    	<block wx:for="{
         {100}}" wx:key="*this">
    		<view>{
       { item }}</view>
    	</block>
    </scroll-view>

/* 2.scroll必须有一个高度 */
    .scroll {
        
    	height: 100px;
    }

**横向滚动**

<scroll-view class="scroll" scroll-x>
    	<block wx:for="{
         {100}}" wx:key="*this">
    		<text>{
       { item }}</text>
    	</block>
    </scroll-view>

/* scroll必须有一个宽度 */
    .scroll {
        
    	width: 100px;
    }

**scroll-view的滚动监听**

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">类型默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th>最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">bindscrolltoupper</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">滚动到顶部/左边时触发</td> 
   <td>1.0.0]</td> 
  </tr> 
  <tr> 
   <td align="left">bindscrolltolower</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">滚动到底部/右边时触发</td> 
   <td>1.0.0</td> 
  </tr> 
  <tr> 
   <td align="left">bindscroll</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}</td> 
   <td>1.0.0</td> 
  </tr> 
 </tbody> 
</table>

<scroll-view 
    	class="scroll" 
    	bindscrolltoupper="onScrolltoupper" 
    	scroll-x bindscrolltolower="onScrolltolower" 
    	bindscroll="onScroll"
    >
    	<block wx:for="{
         {100}}" wx:key="*this">
    		<text>{
       { item }}</text>
    	</block>
    </scroll-view>

// 监听滚动
    onScrolltoupper() {
        
      console.log("滚动到最顶/左部");
    },
    onScrolltolower() {
        
      console.log("滚动到最底/右部");
    },
    onScroll(event) {
        
      console.log(event.detail);
    }

#### ?组件的共同属性 ####

> 公共属性: 就是所有组件都可以设置的属性, 有如下一些公共属性

![在这里插入图片描述][70bdc7a9064a4328a88f1f9fe91b9712.png_pic_center]

[00e5a01734d54952a5a5c8daa41b5c60.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1aa3164f58be4c898b43b50721f24cf2.png
[86059c1557944cc0ad74fb3cf67dcf34.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/7e52ff97fa6142af90fa75e674e12dfc.png
[f12aa1e4abda424d8c93e1ecdb1ec1bf.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/e2b1936737bf4d6283820519215a39a6.png
[70bdc7a9064a4328a88f1f9fe91b9712.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/27/1a46dd6d4e6a4acf835a3134b61ec257.png