微信小程序之组件和API

学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您:
想系统/深入学习某技术知识点…
一个人摸索学习很难坚持,想组团高效学习…
想写博客但无从下手,急需写作干货注入能量…
热爱写作,愿意让自己成为更好的人…

文章目录

  • 前言
  • 一、组件
    • 1、小程序中组件的分类
    • 2、常用的视图容器类组件
    • 3、view 组件的基本使用
    • 4、scroll-view 组件的基本使用
    • 5、swiper 和 swiper-item 组件的基本使用
    • 6、swiper 组件的常用属性
    • 7、常用的基础内容组件
    • 8、text 组件的基本使用
    • 9、rich-text 组件的基本使用
    • 10、其它常用组件
    • 11、button 按钮的基本使用
    • 12、image 组件的基本使用
    • 13、image 组件的 mode 属性
  • 二、API
    • 1、小程序 API 概述
    • 2、小程序 API 的 3 大分类
  • 总结


前言

一、组件
1、小程序中组件的分类
2、常用的视图容器类组件
3、view 组件的基本使用
4、scroll-view 组件的基本使用
5、swiper 和 swiper-item 组件的基本使用
6、swiper 组件的常用属性
7、常用的基础内容组件
8、text 组件的基本使用
9、rich-text 组件的基本使用
10、其它常用组件
11、button 按钮的基本使用
12、image 组件的基本使用
13、image 组件的 mode 属性
二、API
1、小程序 API 概述
2、小程序 API 的 3 大分类


一、组件

1、小程序中组件的分类

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:

  • 视图容器
  • 基础内容
  • 表单组件
  • 导航组件
  • 媒体组件
  • map 地图组件
  • canvas 画布组件
  • 开放能力
  • 无障碍访问

2、常用的视图容器类组件

  • view
    • 普通视图区域
    • 类似于 HTML 中的 div,是一个块级元素
    • 常用来实现页面的布局效果
  • scroll-view
    • 可滚动的视图区域
    • 常用来实现滚动列表效果
  • swiper 和 swiper-item
    • 轮播图容器组件 和 轮播图 item 组件

3、view 组件的基本使用

实现如图的 flex 横向布局效果:
在这里插入图片描述

<view class="container1"><view>A</view><view>B</view><view>C</view>
</view>
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: lightgreen;
}
.container1 view:nth-child(2){background-color: lightskyblue;
}
.container1 view:nth-child(3){background-color: lightcoral;
}
.container1{display: flex;justify-content: space-around;
}

4、scroll-view 组件的基本使用

实现如图的纵向滚动效果:
在这里插入图片描述

<scroll-view class="container1" scroll-y><view>A</view><view>B</view><view>C</view>
</scroll-view>
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: lightgreen;
}
.container1 view:nth-child(2){background-color: lightskyblue;
}
.container1 view:nth-child(3){background-color: lightcoral;
}
.container1{border: 1px solid red;width: 100px;height: 120px;
}

5、swiper 和 swiper-item 组件的基本使用

实现如图的轮播图效果:
在这里插入图片描述

<!-- 轮播图 -->
<swiper class="swiper--container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular> <!-- 第一个轮播图 --><swiper-item><view class="item">A</view></swiper-item><!-- 第二个轮播图 --><swiper-item><view class="item">B</view></swiper-item><!-- 第三个轮播图 --><swiper-item><view class="item">C</view></swiper-item>
</swiper> 
/*轮播图*/
.swiper--container{height: 150px;
}
.item{height: 100%;line-height: 150px;text-align: center;
}
.swiper--container:nth-child(1) .item{background-color: lightgreen;
}
.swiper--container:nth-child(2) .item{background-color: lightskyblue;
}
.swiper--container:nth-child(3) .item{background-color: lightpink;
}

6、swiper 组件的常用属性

在这里插入图片描述

7、常用的基础内容组件

  • text
    • 文本组件
    • 类似于 HTML 中的 span 标签,是一个行内元素
  • rich-text
    • 富文本组件
    • 支持把 HTML 字符串渲染为 WXML 结构

8、text 组件的基本使用

通过 text 组件的 selectable 属性,实现长按选中文本内容的效果:
在这里插入图片描述

<view>手机号支持长按选中效果<text selectable>13800005006</text>
</view>

9、rich-text 组件的基本使用

通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构
在这里插入图片描述

<!--应用场景:商品详情页的结构渲染-->
<rich-text nodes="<h1 style='color: red;'>标题</h1>"></rich-text>

10、其它常用组件

  • button
    • 按钮组件
    • 功能比 HTML 中的 button 按钮丰富
    • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
  • image
    • 图片组件
    • image 组件默认宽度约 300px、高度约 240px
  • navigator(后面课程会专门讲解)
    • 页面导航组件
    • 类似于 HTML 中的 a 链接

11、button 按钮的基本使用

在这里插入图片描述

<view>~~~通过type指定按钮类型~~~</view><button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button><view>~~~size="mini"小尺寸按钮~~~</view><button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button><view>~~~plain镂空按钮~~~</view><button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

12、image 组件的基本使用

在这里插入图片描述

<!--1、空照片-->
<image></image>
<!--2、使用src指向图片路径-->
<image src="/images/1.jpeg"></image>
image{/*通过边框线证明 image 有默认的宽和高*/border:1px solid red;
}

13、image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
在这里插入图片描述

二、API

1、小程序 API 概述

小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。

2、小程序 API 的 3 大分类

小程序官方把 API 分为了如下 3 大类:

  • 事件监听 API
    • 特点:以 on 开头,用来监听某些事件的触发
    • 举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
  • 同步 API
    • 特点1:以 Sync 结尾的 API 都是同步 API
    • 特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
    • 举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
  • 异步 API
    • 特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
    • 举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据

总结

以上就是微信小程序之组件和API的相关知识点,希望对你有所帮助。
积跬步以至千里,积怠惰以至深渊。时代在这跟着你一起努力哦!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630515.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot教程(十二) | SpringBoot集成JPA

SpringBoot教程(十二) | SpringBoot集成JPA 1. JPA简介 概念&#xff1a; JPA顾名思义就是Java Persistence API的意思&#xff0c;是JDK 5.0注解或XML描述对象&#xff0d;关系表的映射关系&#xff0c;并将运行期的实体对象持久化到数据库中。 优势&#xff1a; 标准化 …

Linux驱动学习—IIC总线之FT5X06触摸驱动实验

1、实现触摸坐标值上报 流程图&#xff1a; 设备树如下&#xff1a; 触摸设备对应的设备树节点是&#xff1a; 读取坐标的寄存器&#xff1a; #include <linux/init.h> #include <linux/module.h> #include <linux/i2c.h> #include <linux/gpio.h> #i…

spring boot学习第七篇:通过spring boot使用redis

1、pom.xml文件里面增加如下依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 2、yml文件增加如下配置&#xff1a; redis:host: loc…

【不用找素材】ECS 游戏Demo制作教程(3) 1.17

一、生成墓碑 新建脚本如下&#xff1a; using Unity.Entities; using Unity.Mathematics;namespace ECSdemo {public struct GraveyardRandom : IComponentData{public Random Value;}}扩充GraveyardMono如下&#xff1a; using Unity.Entities; using Unity.Mathematics; …

【计算机硬件】3、输入输出技术、总线结构

文章目录 输入输出技术内存与接口地址的编址方法1、 内存与接口地址独立编址方法2、内存与接口地址统一编址方法 计算机和外设间的数据交互方式1、程序控制(查询)方式2、程序中断方式3、DMA方式&#xff08;直接主存存取&#xff09; 总线结构 输入输出技术 内存与接口地址的编…

【思科】IPsec VPN 实验配置(动态地址接入)

【思科】IPsec VPN 实验配置&#xff08;动态地址接入&#xff09; 注意实验需求配置思路配置命令拓扑R1基础配置配置第一阶段 IKE SA配置第二阶段 IPsec SA ISP_R2基础配置 R3基础配置配置第一阶段 IKE SA配置第二阶段 IPsec SA PCPC1PC2 检查建立成功查看命令清除IKE / IPse…

C/C++ 基本数据类型的范围

一、常见的数据类型及其范围 数据类型Size(64位)范围int4Byteunsigned int4Bytelong4Byteunsigned long4Bytelong long8Byteunsigned long long8Byte 查询Size代码&#xff1a;sizeof(类型) 查询范围代码&#xff1a;numeric_limits<类型>::max和numeric_limits<类…

django大数据_草稿本01

文档 Learning_Spark/5.Spark Streaming/ReadMe.md at master LeslieZhoa/Learning_Spark # 在pyspark下运行 from pyspark.ml.feature import HashingTF,IDF,Tokenizer # 导入相关包# 创建一个dataframe&#xff0c;toDF为定义列名 sentenceData spark.createDataFrame([(0…

数据科学与大数据导论期末复习笔记(大数据)

来自于深圳技术大学&#xff0c;此笔记涵盖了期末老师画的重点知识&#xff0c;分享给大家。 等深分箱和等宽分箱的区别&#xff1a;等宽分箱基于数据的范围来划分箱子&#xff0c;每个箱子的宽度相等。等深分箱基于数据的观测值数量来划分箱子&#xff0c;每个箱子包含相同数量…

智慧校园大数据平台架构

平台架构 基础硬件层 基础硬件层是由一组低廉的PC或服务器组合构建而成。基础硬件层主要承载着数据的存储、运算、容错、调度和通信等任务,对基础应用层下达的指令进行执行和反馈。 数据集成 大数据特征表现在实时、交互、海量等方面,并且以半结构化、非结构化数据为主,价…

HarmonyOS应用开发者高级认证试题库(鸿蒙)

目录 考试链接&#xff1a; 流程&#xff1a; 选择&#xff1a; 判断 单选 多选 考试链接&#xff1a; 华为开发者学堂华为开发者学堂https://developer.huawei.com/consumer/cn/training/dev-certification/a617e0d3bc144624864a04edb951f6c4 流程&#xff1a; 先进行…

K8s(二)Pod资源——node调度策略、node亲和性、污点与容忍度

目录 node调度策略nodeName和nodeSelector 指定nodeName 指定nodeSelector node亲和性 node节点亲和性 硬亲和性 软亲和性 污点与容忍度 本文主要介绍了在pod中&#xff0c;与node相关的调度策略&#xff0c;亲和性&#xff0c;污点与容忍度等的内容 node调度策略node…

2024.1.17 网络编程 作业

思维导图 练习题 广播服务器端 #include <myhead.h>int main(int argc, char const *argv[]) {//创建套接字int sfd socket(AF_INET, SOCK_DGRAM, 0);//填充网络信息结构体struct sockaddr_in cin;cin.sin_family AF_INET;cin.sin_port htons(6789);cin.sin_addr.s_…

Rxjava链式调用解析

本文以下面代码为例逐步解析 Observable.just("数据源").map(new Function<String, Integer>() {Overridepublic Integer apply(String s) throws Exception {return 1;}}).filter(integer -> {return integer 1;}).subscribeOn(Schedulers.io()).observe…

element-ui表单验证同时用change与blur一起验证

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 当审批时不通过审批意见要必须输入&#xff0c; 1&#xff1a;如果用change验证的话删除所有内容时报错是massage的提示&#xff0c;但是在失去焦点的时候报错就成了英文&#xff0c;如下图&#xf…

SQL语句详解四-DQL(数据查询语言-多表查询一)

文章目录 表和表的关系一对一关系一对多、多对一关系多对多关系 表和表的关系 概述&#xff1a;数据库中表的关系有三种&#xff0c;一对一关系、一对多的关系、多对多的关系。 一对一关系 例如&#xff1a;一个人只能有一个身份证号&#xff0c;一个身份证号只属于一个人 示…

STM32F103标准外设库——RCC时钟(六)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

PyQt5零基础入门(四)——信号与槽

信号与槽 前言信号与槽单对单直接连接使用lambda表达式 信号与槽多对多一个信号连接多个槽多个信号连接一个槽信号与信号连接 自定义信号 前言 PyQt5的信号与槽是一种对象之间的通信机制&#xff0c;允许一个QObject对象发出信号&#xff0c;与之相连接的槽函数将会自动执行。…

漏洞复现-科荣AIO UtilServlet任意命令执行漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

【MySQL】管理用户

DCL-管理用户 查询用户 use mysql; select * from user;创建用户 create user 用户名主机名 identified by 密码;修改用户密码 alter user 用户名主机名 identidied with mysql_native_password by 新密码;删除用户 drop user 用户名主机名;创建用户test&#xff0c;只能够…