创新互联百度小程序教程:组件列表

  • 组件列表
    • 视图容器
    • 基础内容
    • 表单组件
    • 导航
    • 媒体组件
    • 地图
    • 画布
    • 开放能力
    • 内容服务组件
    • 动态库组件

    组件列表

    智能小程序组件,是对数据和方法进行封装的小程序视图控件,拥有自己的属性和方法,可帮助开发者拼装完成自己的智能小程序页面。由于组件可能被转译为不同端对应的代码,所以在页面创建过程中,禁止使用智能小程序组件标签以外的标签(例如:HTML 中 script/link/iframe 标签)。
    本文汇总了智能小程序提供的所有组件,具体组件信息可参阅对应文档。

    成都创新互联是一家专业提供龙川企业网站建设,专注与成都网站设计、成都网站建设、html5、小程序制作等业务。10年已为龙川众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

    视图容器

    组件名称 解释
    cover-image图片视图。覆盖在原生组件之上可覆盖的原生组件同 cover-view,支持嵌套在 cover-view 里
    cover-view文本视图。覆盖在原生组件之上,只支持嵌套 cover-view、cover-image 组件
    movable-area可移动视图区域。movable-view 的可移动区域
    movable-view可移动的视图容器。在页面中可以拖拽滑动,movable-view 必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动
    scroll-view可滚动视图区域。可实现横向滚动和竖向滚动。使用竖向滚动时,需要给定一个固定高度,可以通过 css 来设置 height
    swiper滑块视图容器。内部只允许使用组件描述滑块内容,否则会导致未定义的行为
    swiper-item滑块视图容器子项。仅可放置在组件中,宽高自动设置为 100%
    view视图容器。相当于 html 中的 div ,可将页面分割为独立的、不同的部分。如果需要使用滚动视图,请使用 scroll-view

    基础内容

    组件名称 解释
    icon图标。放置图标的元素
    progress进度条
    rich-text富文本。nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降
    text文本。放置文本的元素

    表单组件

    组件名称 解释
    button按钮
    checkbox多选项目
    checkbox-group多选项目组。内部由多个 checkbox 组成
    form表单。将 form 组件内用户输入 / 选择的提交。当
    表单中 form-type 为 submit 时,点击的
    input输入框。v3.105.0 开始支持同层渲染
    label表单组件标签。用来改进表单的可用性,使用 for 属性找到对应的 id(必须写 for),当点击时,就会触发对应的控件
    picker底部弹起的滚动选择器
    picker-view可嵌页面的滚动选择器
    picker-view-column可嵌页面的滚动选择器子项。仅可放置于中,其孩子节点的高度会自动设置成与 picker-view 的选中框的高度一致
    radio单选项目
    radio-group单选项目组。内部由多个 radio 组成
    slider滑动选择器
    switch开关选择器
    textarea多行输入框。v3.140.1 起支持同层渲染,内部不支持嵌套其他组件

    导航

    组件名称 解释
    navigator页面导航。控制小程序的跳转,既可在当前小程序内部进行跳转,也可跳转至其他小程序
    tabs标签栏。用于让用户在不同的视图中进行切换
    tab-item标签栏子项。配合 tabs 一起使用,展示标签栏栏内单个 tab 内容

    媒体组件

    组件名称 解释
    animation-video为智能小程序提供了将特定视频资源渲染为透明背景动效的能力,可以帮助开发者低成本实现更为沉浸,丰富的动画效果
    animation-viewLottie 动画组件。客户端创建的原生组件,使用时请注意相关限制
    audio音频
    camera相机。使用该组件需通过获取用户授权设置申请授权后方可对用户发起授权申请,可在 swan.authorize 中查看相关错误码信息
    ar-cameraAR 相机。在 DuMixAR 内容开放平台提交并上线 AR 项目后(选择“百度 App-相机”渠道)获取到 AR Key、AR Type,可配置展现,基础库 3.15.104 开始支持
    image图片。image 组件默认宽度 300px、高度 225px
    live-player实时视频播放器。客户端创建的原生组件,使用时请注意相关限制,v3.140.1 起支持同层渲染
    video视频。v3.70.0 开始支持同层渲染
    rtc-room实时音视频通话房间。v3.200.0 开始支持
    rtc-room-item实时音视频通话画面。v3.200.0 开始支持,默认为同层渲染

    地图

    组件名称 解释
    map地图。客户端创建的原生组件,使用时请注意相关限制

    画布

    组件名称 解释
    canvas画布。一个矩形区域,开发者可以在页面上绘制图形。canvas 拥有多种绘制路径、矩形、图形、字符以及添加图像的方法

    开放能力

    组件名称 解释
    ad广告组件。按照流量主开通指引中的操作获取广告组件代码
    open-data开放数据。用于展示百度 App 开放的数据
    web-view网页容器。web-view 组件是一个可以用来承载网页的容器,会自动铺满整个智能小程序页面

    内容服务组件

    组件名称 解释
    like点赞。支持将用户对文章/评论的点赞行为同步给百度后端,实现对点赞对象(若此对象的文章/评论是在小程序内用评论组件生产)的消息通知。需要将点赞对象的文章/评论内容一起提交
    follow-swan关注小程序 button 组件可帮助开发者实现用户对小程序的关注。用户通过本组件“关注小程序”后,可以在“百度 APP” - “我的”中找到我的小程序
    One-stop Interaction一站式互动组件。为开发者提供一整套包含评论发布器、评论列表及详情、点赞、转发功能的互动 bar 能力,此外还提供数据存储、数据内容审核、用户接收百度 APP 消息通知的一站式组件服务
    comment-list一站式互动组件的评论列表组件。可单独使用
    comment-detail一站式互动组件的评论详情组件。需与列表组件搭配使用

    动态库组件

    组件名称 解释
    Editor 富文本编辑器eidtor 动态库提供了在小程序中进行富文本编辑的方法
    swan-sitemap 小程序索引页组件swan-sitemap 动态库是百度小程序官方发布的用于生成小程序索引页的动态库组件,开发者可以在小程序项目中引用 swan-sitemap 动态库,并通过 swan-sitemap-list 组件高效的开发出符合搜索收录规范的小程序索引页
    ECharts 图表-betaECharts 动态库是智能小程序基于 ECharts 实现的图表动态库,提供了图表在小程序中的使用方法。如果在使用中碰到问题,可以在 Github 提问
    modelviewer VR 3D 模型-betamodelviewer 动态库提供了在小程序中展示 3D 模型功能,底层基于百度 webVR SDK Hydreigon 实现
    panoviewer VR 全景图-betapanoviewer 动态库提供了在小程序中播放全景图的方法,底层基于百度 webVR SDK Hydreigon 实现
    spintileviewer VR 3D 环物—betaspintileviewer 动态库提供了在小程序中播放 3D 环物的方法,底层基于百度 webVR SDK Hydreigon 实现
    vrvideo VR 全景-betavrvideo 动态库提供了在小程序中播放全景视频的方法

    分享文章:创新互联百度小程序教程:组件列表
    URL分享:http://www.36103.cn/qtweb/news12/6012.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联