微信小程序-其他常用组件-阿里云开发者社区

微信小程序-其他常用组件

2024-05-27 22

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 该内容是关于微信小程序组件的介绍，主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富，通过`open-type`可调用微信功能，如客服、转发等。组件属性包括类型（如`primary`、`warn`）和尺寸（`size`）。`image`组件默认宽300px，高240px，支持设置属性来调整显示效果。`navigator`组件用于页面导航，类似HTML的a标签，常用于页面间的跳转。

1.button

按钮组件,功能比HTML中的button按钮丰富

通过open-type属性可以调用微信提供的各种功能(客服,转发,获取用户授权,获取用户信息等)

通用属性

例如:

<!--pages/list/list.wxml-->
<view>----------通过type指定按钮类型----------</view>
 
<button>默认按钮</button>
<!-- primary为主色调 -->
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
 
<view>---------size="mini"小尺寸按钮----------</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
 
<view>----------镂空按钮------------</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

2.image

图片组件,image组件默认宽度约300px,高度约240px

属性:

例如:

<!--pages/list/list.wxml-->
<!-- 1.空图片 -->
<image></image>
 
<!-- 2.使用src指向图片路径 -->
<image src="/image/xiao.jpg"></image>

/* pages/list/list.wxss */
image{
  /* 通过边框线证明image有默认的宽和高 */
  border: 1px solid red;
}

3.navigator

页面导航组件,类似于HTML中的a链接

微信小程序-其他常用组件

热门文章

最新文章

相关课程

相关电子书

相关实验场景