微信小程序的开发

微信小程序的UI精讲

一、布局和样式基础
格子与格子之间的距离
二、组件使用
1.试图容器：

• cover-image：覆盖在原生组件之上的图片视图
• cover-view：覆盖在原生组件之上的文本视图
• movable-view：可移动的视图容器，在页面中可以拖拽滑动。注：movable-view必须在 movable-area组件中，并且必须是直接子节点，否则不能移动。
• movable-area：movable-view的可移动区域。
• swiper：滑块视图容器。注：其中只可放置swiper-item组件，否则会导致未定义的行为。
• swiper-item：仅可放置在swiper组件中，宽高自动设置为100%。
• view：视图容器
  2.基础内容：
• icon：图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
• progress：进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。
• rich-text：富文本。
• text：文本。
  3、表单组件：
• button：按钮
• checkbox：多选项目。
• checkbox-group：多项选择器，内部由多个checkbox组成。
• editor：富文本编辑器，可以对图片、文字进行编辑。
• form：表单。
• input：输入框。
• label：用来改进表单组件的可用性。
• picker：从底部弹起的滚动选择器。
• picker-view：嵌入页面的滚动选择器。注：其中只可放置 picker-view-column组件，其它节点不会显示。
• picker-view-column：滚动选择器子项。注：仅可放置于picker-view中，其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
• radio：单选项目。
• radio-group：单项选择器，内部由多个 radio 组成。
• slider：滑动选择器。
• switch：开关选择器。
• textarea：多行输入框。注：该组件是原生组件，使用时请注意相关限制。
  4、导航：
• functional-page-navigator：仅在插件中有效，用于跳转到插件功能页。
• navigator：页面链接。
  5、媒体组件：
• audio：音频
• camera：系统相机。
• image：图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。
• live-player：实时音视频播放。
• live-pusher：实时音视频录制。
• video：视频。
  6、地图：map
  7、画布：canvas
  8、开放能力：
• ad：Banner 广告。
• official-account：公众号关注组件。
• open-data：用于展示微信开放的数据。
• web-view：承载网页的容器。会自动铺满整个小程序页面
  9、导航栏：navigation-bar
  三、项目实战
  https://blog.csdn.net/bjyxszd2222/article/details/104580354