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

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

ruisui883个月前 (01-16)技术分析29

微信为小程序提供的组件,可以帮助开发者快速搭建出漂亮的页面结构,共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.无障碍访问:虽然这个组件类型对于提升应用的包容性和可访问性非常重要,但在实际开发中,它的使用频率可能不如其他组件高。这主要是因为无障碍访问的考虑更多是在应用的设计和开发过程中融入的,而不是通过单独的组件来实现的。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/346.html

分享给朋友:

“3分钟入门微信小程序开发 组件分类 常用基本组件” 的相关文章

迁移GIT仓库并带有历史提交记录

迁移git仓库开发在很多时候,会遇到一个问题。GIT仓库的管理,特别是仓库的迁移。我需要保留已有的历史记录,而不是重新开发,重头再来。我们可以这样做:使用--mirror模式会把本地的分支都克隆。// 先用--bare克隆裸仓库 git clone git@gitee.com:xxx/testApp...

Vue进阶(幺叁捌):vue路由传参的几种基本方式

1、动态路由(页面刷新数据不丢失)methods:{ insurance(id) { //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/particulars/${id}`,...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...

SpringBoot2.X+Vue+UniAPP,全栈开发医疗小程序

//xia仔のke:chaoxingit.com/208/全栈开发医疗小程序:利用Spring Boot 2.X、Vue和UniApp在当今数字化时代,医疗行业也在不断地迈向信息化和智能化的方向。开发一款医疗小程序,能够为用户提供便捷的医疗服务和信息查询,为医疗机构提供高效的管理和服务渠道。本文将介...

Alpine.js 如何火起来的!比 React/Vue 如何?

大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!前言前端 JavaScript 框架的创新是这个时代最伟大的技术文化现象之一。Alpine 发音为 /??lpa?n/,中文为阿尔卑斯山、...

Firefox正针对Vue.js进行优化,下版本响应速度将“显著提升”

IT之家 9 月 7 日消息,据 Mozilla 官方博客发文显示,Firefox 浏览器正针对 Vue.js 进行优化,此前 FireFox 浏览器在面向 Vue 3 时遇到了一些性能问题。▲ 图源 Mozilla 官方博客目前开发人员已经对此进行了解决,在 Firefox 118 内部版本中进行...