当前位置:首页 > 技术文章 > 正文内容

3分钟入门微信小程序开发 组件分类 常用基本组件

微信为小程序提供的组件,可以帮助开发者快速搭建出漂亮的页面结构,共9大类,包括:

1.视图容器:view布局组件(相当于div)、scroll-view滚动列表组件、swiper和swiper-item轮播图组件

2.基础内容:

text文本组件(相当于span,selectable支持长按选中效果)、rich-text富文本组件(通过nodes属性,支持把html字符串渲染为wxml结构)。

button按钮组件,有type、size、plain三个参数,且通过open-type属性调用微信提供的各功能,如转发、获取用户信息等。(注意在app.json文件中style:v2控制着整体的风格)

image图片组件,默认宽300px,高240像素,可通过src加载指定路径的图片,指定mode属性确定缩放方式,mode属性值有scaleToFill默认不保持纵横比缩放、aspectFit保持纵横比长边完全显示缩放、aspectFill保持纵横比短边完全显示缩放、widthFix原图宽度不变缩放高度自动、heightFix原图高度不变缩放宽度自动。

3.表单组件:input用户输入单行文本,textarea接收用户输入的多行文本,form将表单内的输入项进行组合,实现数据的提交,radio-group和radio单选按钮选择器,checkbox-group和checkbox:复选框选择器。

4.导航组件:navigator页面链接的导航组件,用于实现页面间的跳转。其中,open-type属性可以实现不同的跳转方式,如switchTab用于切换到tabBar页面,reLaunch用于关闭所有页面,打开到应用内的某个页面等。

5.媒体组件:audio和video分别用于播放音频和视频文件。

6.map地图组件

7.canvas画布组件

8.开放能力:API接口,如获取用户信息、支付功能等。这些API接口可以帮助开发者更方便地调用微信提供的功能,增强应用的功能性和用户体验。

9.无障碍访问:虽然这个组件类型对于提升应用的包容性和可访问性非常重要,但在实际开发中,它的使用频率可能不如其他组件高。这主要是因为无障碍访问的考虑更多是在应用的设计和开发过程中融入的,而不是通过单独的组件来实现的。

相关文章

2024年10 大 Linux 桌面发行版推荐

年已过半,现在是探究 2024 年最流行的 Linux 发行版的最佳时机。Linux 是一个开源操作系统,构建在 Linux 内核上,并集成了 GNU shell 实用程序、桌面环境、应用程序、包管理...

Vue3 如何实现父子组件传值?(vue父子组件传值props)

在Vue 3中,要实现父子组件传值效果主要通过props和emit两种机制来实现,下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制,主要的作用就是实现从...

10个实例小练习,快速入门熟练 Vue3 核心新特性(一)

作者:xuying 全栈修炼转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ前言Vue3.0 发 beta 版都有一段时间了,正式版也不远了...

Vue 2 和 Vue 3的区别(vue2和vue3的区别有哪些)

1.双向数据绑定原理不同Vue2 的双向数据绑定是利用ES5的一个APIObject.definePropert() 对数据进行劫持,结合发布订阅模式的方式来实现的。Vue3 中使用ES6的Proxy...

Vue3快速入门(vue3快速上手)

  1.核心语法  1. 1选项式和组合式的区别  Vue2的API设计是Options(选项)风格的。  Vue3的API设计是Composition(组合)风格的。  Options类型的 API...

Vue3 中有哪些值得深究的知识点?(vue3例子)

众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点。喜欢的话建议收藏,点个关注!1、createAppvue2 和 vue3 在创建实例时,...