疫情期间学习微信小程序开发蓄势待发!疫情期间,有的办公的企业都还是在家在线办公的较多,但是学习的时间还是会有的,趁着这时,也可以好好学习一下小程序的开发,为自己充充电,今天长沙小程序开发公司智企云分享学习的是布局,组件,一个例子
组件API https://developers.weixin.qq.com/miniprogram/dev/component/
把所有组件一个个看一遍。
布局:flex布局,
采用Flex布局的元素,称为Flex容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目"。容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex-direction 容器内项目的排列方向(默认横向排列)
flex-wrap 容器内项目换行方式
flex-flow 以上两个属性的简写方式
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上如何对齐
align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
视图容器:
cover-image:覆盖在原生组件之上的图片视图
cover-view:覆盖在原生组件之上的文本视图
movable-area:可移动区域
movable-view:可移动的视图容器,在页面中可以拖拽,
scroll-view:可滚动视图区域,使用竖向滚动时,需要给scroll-view一个固定高度,
swiper:滑块视图窗口和轮波图
view:最简的一个容器
基础内容组件
icon:图标,progress进度条,rich-text富文本,text文本,
表单组件:button,checkbox,editor,form,input,label,picker,picker-view,radio,radio-group,slider,switch,textarea;
操作反馈小工具:action-sheet,modal,toast,loading,在扩展能力中,
api:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
导航:
functional-page-navigator:仅在插件中有效,用于跳转到插件功能页,
navigator:页面链接。
媒体:audio,音频,camera相机,image,图片,live-player实时音视频播放,
live-pusher,实时音视频录制。
video:视频
还有一些其它组件 ,大家可以在微信API网上查看,
实例篇:
主要内容就是应用上面的布局,对学习的知识进行熟悉,长沙小程序开发公司智企云也会陆续为大家带来,敬请关注了!
在线客服:2225973985
每天前10名咨询有好礼
智企云 版权所有 © 2016-2018 湘ICP备11017552号
地址:长沙市高新开发区尖山路39号中电软件园总部大楼6楼
Copyright © 2015-2024 智企云 All Rights Reserved. 湘ICP备11017552号 技术支持:中亿智企云
湘公网安备43019002000674号 客服热线:15874991942 公司地址:长沙市高新开发区尖山路39号中电软件园总部大楼6楼