预约演示
产品中心
解决方案
酒企数字化
增值服务
客户案例
关于海商
B2C电商
B2B交易系统
智慧门店
分销商城
社区电商
查看更多

品牌私域商城全渠道品牌官方私域零售商城

B2B2C多用户商城类“天猫&京东”多用户商城

小程序商城小程序开店，会员小程序

积分/员工福利商城全场景员工积分与福利平台

企业内购商城系统打通企业OA，实现员工交易裂变

提供微商城·微分销·小程序开店需求

5分钟开通你的微信商城店铺！
获取验证码
获取方案
HiShop > Hi小程序 > 小程序开发 >

微信小程序官方基础组件库,微信小程序组件列表

2017-12-25 作者：黄先生

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。

  • 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

    <tagname property="value">
  Content goes here ...
</tagename>

    注意：所有组件与属性都是小写，以连字符-连接

属性类型

类型 描述 注解
Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型
Number 数字 1, 2.5
String 字符串 "string"
Array 数组 [ 1, "string" ]
Object 对象 { key: value }
EventHandler 事件处理函数名 "handlerName"是Page中定义的事件处理函数名
Any 任意属性  

共同属性类型

所有组件都有的属性：

属性名 类型 描述 注解
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的wxss中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
bind* / catch* EventHandler 组件的事件 详见事件

特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰，请参考各个组件的定义。

组件列表

基础组件分为以下八大类：

视图容器(View Container)：

组件名 说明
view 视图容器
scroll-view 可滚动视图容器
swiper 可滑动的视图容器

基础内容(Basic Content)：

组件名 说明
icon 图标
text 文字
progress 进度条

表单(Form)：

标签名 说明
button 按钮
form 表单
input 输入框
checkbox 多项选择器
radio 单项选择器
picker 列表选择器
picker-view 内嵌列表选择器
slider 滑动选择器
switch 开关选择器
label 标签

导航(Navigation)：

组件名 说明
navigator 应用内跳转

多媒体(Media)：

组件名 说明
audio 音频
image 图片
video 视频

地图(Map)：

组件名 说明
map 地图

画布(Canvas)：

 

组件名 说明
canvas 画布

 

客服会话：

组件名 说明
contact-button 进入客服会话按钮

更多微信小程序开发教程，可以关注hi小程序。

推荐文章

关于我们 产品中心 解决方案 新闻动态
产品&服务
酒企数字化营销 品牌私域商城 新零售门店 B2B2C多用户商城 S2B2B电商系统 B2B订货商城 链动2+1分销 团队合伙人分销 收银系统 同城即时零售 上门到家系统 社区团购
开店咨询热线
长沙总部热线
4006-089-731
北京公司
4006-601-982
深圳公司
4008-400-198

一对一咨询

立即扫码关注

产品试用 获取方案及报价
微分销 产品资料 领取开店礼包 免费体验
门店管理 裂变获客 商城开发 免费注册