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

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

相关推荐
2501_9160074714 小时前
Python实现HTTPS爬虫的完整指南:使用requests、BeautifulSoup、Selenium和Scrapy
爬虫·python·ios·小程序·https·uni-app·iphone
FungLeo15 小时前
Taro 开发小程序, 把 @ 配成 src 路径别名,webpack / tsconfig / scss 三处同步的正确姿势
webpack·小程序·taro
灵枢时代15 小时前
小程序在生鲜配送行业,如何设计夜间预约和次日达的订单处理流程?
数据结构·人工智能·小程序
2601_953720822 天前
【计算机毕业设计】基于微信小程序的拼车服务系统设计与实现
微信小程序·小程序·课程设计
乐启国际旅行社有限公司2 天前
文旅小程序性能优化:分包加载+地图视口懒加载解决景区卡顿与包超限
性能优化·小程序
万岳科技系统开发2 天前
校园跑腿外卖搭建助力高校周边商家拓展线上业务
大数据·人工智能·小程序
微三云 - 廖会灵 (私域系统开发)2 天前
消费返物业费平台搭建:美家时代商业模式拆解与系统开发选型指南
小程序·系统架构
greenbbLV3 天前
中小公司积分商城选型:SaaS与私有化方案对比解析
大数据·前端·小程序
2501_915909063 天前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张4 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone