WEB端基础-小程序原生摘要2-组件

超超不会飞55
200 阅读5分钟

前言

本文主要描述小程序组件，用于自己加深记忆、检索与使用经验记录。该文分为两期，第一期主要摘要内容。第二期在日常使用中逐渐添加自己的理解与使用经验。

视图容器

  • match-media:media query 匹配检测节点。可以指定一组 media query 规则，满足时，这个节点才会被展示。通过这个节点可以实现“页面宽高在某个范围时才展示某个区域”这样的效果。

  • movable-area:可移动区域。

  • movable-view:可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。

  • page-container:页面容器。小程序如果在页面内进行复杂的界面设计（如在页面内弹出半屏的弹窗、在页面内加载一个全屏的子页面等），用户进行返回操作会直接离开当前页面，不符合用户预期，预期应为关闭当前弹出的组件。 为此提供“假页”容器组件，效果类似于 popup 弹出层，页面内存在该容器时，当用户进行返回操作，关闭该容器不关闭页面。返回操作包括三种情形，右滑手势、安卓物理返回键和调用 navigateBack 接口。

  • root-portal:使整个子树从页面中脱离出来，类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。

  • scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

    1. 横向滚动需打开 enable-flex 以兼容 WebView，如

    2. 滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

    3. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

  • swiper:滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。

  • swiper-item:仅可放置在swiper组件中，宽高自动设置为100%。

  • view:视图容器,类似div的标准容器。

基础内容

  • icon:图标组件,wx自带图标系列。

  • progress: 进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

  • rich-text:富文本.

  • text:文本。

    1. 内联文本只能用 text 组件，不能用 view，如 <text> foo <text>bar</text> </text>
    2. 新增 span 组件用于内联文本和图片，如 <span> <image> </image> <text>bar</text> </span>

表单组件

  • button:按钮。

  • checkbox:多选项目。

  • checkbox-group:多项选择器，内部由多个checkbox组成。

  • editor:富文本编辑器，可以对图片、文字进行编辑。编辑器导出内容支持带标签的 html和纯文本的 text，编辑器内部采用 delta 格式进行存储。

  • form:表单。将组件内的用户输入的switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

  • input:输入框。该组件是原生组件，使用时请注意相关限制。

  • keyboard-accessory:设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图，1. 视图最大高度为 200px。

  • label:用来改进表单组件的可用性。使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 目前可以绑定的控件有：button, checkbox, radio, switch, input。简单来说就是用来扩大绑定控件的点击区域。

  • picker:从底部弹起的滚动选择器。

  • picker-view:嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。

  • picker-view-column:滚动选择器子项.

  • radio:单选项目。

  • radio-group:单项选择器.

  • slider:滑动选择器。

  • switch:开关选择器。

  • textarea:多行输入框。该组件是原生组件，使用时请注意相关限制。

导航

媒体组件

  • camera:系统相机。

  • channel-live:小程序内嵌视频号直播组件，展示视频号直播状态和封面，并无弹窗跳转至视频号。

  • channel-video:小程序内嵌视频号视频组件，支持在小程序中播放视频号视频，并无弹窗跳转至视频号。

  • image:图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式。

  • live-player:实时音视频播放。

  • live-pusher:实时音视频录制。

  • video:视频。

  • voip-room:多人音视频对话。

地图

  • map:map组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。

画布

原生组件说明

  • native-component:小程序中的部分组件是由客户端创建的原生组件。包括camera,canvas,input,live-player,live-pusher,map,textarea,video.

无障碍访问

导航栏

  • navigation-bar:页面导航条配置节点，用于指定导航栏的一些属性.

页面属性配置节点

  • page-meta:页面属性配置节点，用于指定页面的一些属性、监听页面事件。

总结

  • 请使用微信中小程序示例,对照上述组件理解。
  • 实际使用的经验总结ing。。。
avatar
文章
阅读
粉丝