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

各位小伙伴又见面啦,今天我们来学习微信小程序中包含但不限于使用的组件以及常见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

相关推荐
低代码布道师14 分钟前
少儿舞蹈小程序需求规格说明书
低代码·小程序·规格说明书
浩星5 小时前
react+taro打包到不同小程序
react.js·小程序·taro
diygwcom1 天前
AI实现超级客户端打印 支持APP 网页 小程序 调用本地客户端打印
小程序
zkmall1 天前
ZKmall模块商城的推荐数据体系:从多维度采集到高效存储的实践
小程序·架构·开源·代码规范
源码哥_博纳软云1 天前
JAVA国际版多商户运营版商城系统源码多商户社交电商系统源码支持Android+IOS+H5
android·java·ios·微信·微信小程序·小程序·uni-app
CRMEB定制开发1 天前
CRMEB私域电商系统后台开发实战:小程序配置全流程解析
小程序·开源软件·小程序商城·商城源码·微信商城·crmeb
2501_915106322 天前
iOS混淆工具实战 金融支付类 App 的安全防护与合规落地
android·ios·小程序·https·uni-app·iphone·webview
從南走到北2 天前
JAVA国际版东郊到家同城按摩服务美容美发私教到店服务系统源码支持Android+IOS+H5
android·java·开发语言·ios·微信·微信小程序·小程序
Summer不秃2 天前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
井云AI2 天前
井云智能体封装小程序:独立部署多开版 | 自定义LOGO/域名,打造专属AI智能体平台
人工智能·后端·小程序·前端框架·coze智能体·智能体网站·智能体小程序