小程序中各个组件以及其作用

各位小伙伴又见面啦,今天我们来学习微信小程序中包含但不限于使用的组件以及常见API。废话不多说,我们马上进入正题。

一,常见组件

组件是小程序应用中可缺失的一部分,就像吃羊头没有老马家的满口香椒盐的浇给,索然无味。

1,scroll-view

功能描述

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

  1. 横向滚动需打开 enable-flex 以兼容 WebView,如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
  2. 滚动条的长度是预估的,若直接子节点的高度差别较大,则滚动条长度可能会不准确
  3. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

2,swiper

功能描述

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

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

3,view

重中之重!!!孩子们记住了(敲黑板)

功能描述

视图容器

示例代码

复制代码
<view class="container">
  <view class="page-body">
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>
      <view class="page-section-spacing">
        <view class="flex-wrp" style="flex-direction:row;">
          <view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>
        </view>
      </view>
    </view>
    <view class="page-section">
      <view class="page-section-title">
        <text>flex-direction: column\n纵向布局</text>
      </view>
      <view class="flex-wrp" style="flex-direction:column;">
        <view class="flex-item flex-item-V demo-text-1"></view>
        <view class="flex-item flex-item-V demo-text-2"></view>
        <view class="flex-item flex-item-V demo-text-3"></view>
      </view>
    </view>
  </view>
</view>

4,button

功能描述

按钮。

5,checkbox

功能描述

多选项目。

6,input

功能描述

输入框。

7,label

功能描述

用来改进表单组件的可用性。

使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for的优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

8,form

功能描述

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

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

9,camera

功能描述

系统相机。扫码二维码功能。

10,image

功能描述

图片。支持JPG,PNG,SVG,WEBP,GIF,等格式。

  1. 使用svg格式且mode=scaleToFil时,WebView会居中。
  2. svg格式不支持百分比单位
  3. svg格式不支持<style>element

以上就是十种小程序中常用的组件,接下来我们将认识几种小程序中常见的API

二,常见API

1,wx.showToast(Object object)

功能描述

显示消息提示框。

2,wx.showLoading(Object object)

功能描述

显示加载的提示框。

3,wx.hideToast(Object object)

功能描述

隐藏消息提示框。

4,wx.hideLoading(Object object)

功能描述

隐藏加载提示框。

5,wx.startPullDownRefresh(Object object)

功能描述

开始下拉刷新,调用后触发下拉刷新动画,效果与手动下拉刷新一致。

以上就是微信小程序中常用的五种API

相关推荐
游戏开发爱好者812 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang13 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金15 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠17 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184120 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序
前端呆猿1 天前
小程序性能优化全攻略:提升用户体验的关键策略
前端·性能优化·小程序
说私域1 天前
直播带货与开源AI智能名片链动2+1模式S2B2C商城小程序:重塑电商营销新格局
人工智能·小程序