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

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

相关推荐
00后程序员张12 小时前
iOS 上架费用全解析 开发者账号、App 审核、工具使用与开心上架(Appuploader)免 Mac 成本优化指南
android·macos·ios·小程序·uni-app·cocoa·iphone
WenGyyyL14 小时前
微信小程序开发——第三章:WXML 与 WXSS —— 小程序页面结构与样式设计
微信小程序·小程序
万岳科技系统开发15 小时前
外卖小程序中的高并发处理:如何应对大流量订单的挑战
算法·小程序·开源
WenGyyyL15 小时前
微信小程序开发——第四章:小程序的组件与模块化开发
微信小程序·小程序·notepad++
说私域18 小时前
社群时代下的商业变革:“开源AI智能名片链动2+1模式S2B2C商城小程序”的应用与影响
人工智能·小程序·开源
毕设源码-朱学姐19 小时前
【开题答辩全过程】以 基于Java的医务室病历管理小程序为例,包含答辩的问题和答案
java·开发语言·小程序
文人sec20 小时前
微信小程序minium自动化测试SOP
微信小程序·小程序
克里斯蒂亚诺更新20 小时前
微信小程序 点击地图后弹出一个模态框
微信小程序·小程序·notepad++
云起SAAS20 小时前
患者随访管理抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·患者随访管理
2501_9160088920 小时前
HTTPS 请求抓包,从原理到落地排查的工程化指南(Charles / tcpdump / Wireshark / Sniffmaster)
ios·小程序·https·uni-app·wireshark·iphone·tcpdump