当前位置: 首页 > news >正文

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

在这里插入图片描述

🎥 作者简介: CSDN\阿里云\腾讯云\华为云开发社区优质创作者,专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页: 长风清留杨的博客
🍃形式准则: 无论成就大小,都保持一颗谦逊的心,尊重他人,虚心学习。
推荐专栏: Python入门到入魔,Mysql入门到入魔,Python入门基础大全,Flink入门到实战
🍂若缘分至此,无法再续相逢,愿你朝朝暮暮,皆有安好,晨曦微露道早安,日中炽热说午安,星河长明寄晚安🍂

宿主环境

宿主环境简介

什么是宿主环境

宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!

宿主环境特点

  1. 平台依赖性:小程序通常依赖于特定的平台或框架,如微信小程序依赖于微信客户端。
  2. 跨平台性:尽管小程序具有平台依赖性,但许多小程序平台都提供了跨操作系统的支持,如微信小程序可以在Android和iOS系统上运行。
  3. 沙箱环境:小程序通常运行在一个独立的沙箱环境中,以确保用户数据的安全性和隐私保护。

宿主环境

手机微信是小程序的宿主环境,小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:
微信扫码、微信支付、微信登录、地理定位、etc…

宿主环境介绍

  1. 通信模型:
    • 渲染层与逻辑层通信:小程序的渲染层(包括WXML和WXSS)和逻辑层(JS脚本)之间的通信由微信客户端进行转发。
    • 逻辑层与服务器通信:逻辑层可以通过网络请求与第三方服务器进行通信,实现数据的获取和更新。
  2. 运行机制:
    • 启动过程:小程序启动时,微信客户端会下载小程序的代码包到本地,解析全局配置文件(如app.json),执行入口文件(如app.js),创建小程序实例,并渲染首页。
    • 页面渲染过程:页面加载时,会解析页面的配置文件(如.json),加载页面的模板(.wxml)和样式(.wxss),执行页面的脚本(.js),创建页面实例,并完成页面渲染。
  3. 组件与API:
    • 组件:小程序提供了丰富的组件库,如视图容器、基础内容、表单组件、导航组件等,开发者可以使用这些组件快速搭建页面。
    • API:小程序宿主环境提供了丰富的API,如网络请求、存储、媒体操作、用户授权等。这些API允许开发者调用微信提供的功能,实现更多样化的业务逻辑。

通信模型

通信的主体

在小程序的通信模型中,通信的主体主要是指两个层面:渲染层和逻辑层。

  • 渲染层:主要负责页面的渲染和展示,包含WXML(WeiXin Markup Language,微信小程序的标记语言)模板和WXSS(WeiXin Style Sheets,微信小程序的样式表)样式。WXML定义了页面的结构,而WXSS则定义了页面的样式和布局。
  • 逻辑层:主要负责处理页面的逻辑和数据,包含JavaScript脚本。逻辑层通过JavaScript代码来处理用户交互、数据请求、数据处理等任务,并将处理结果传递给渲染层进行展示。

小程序的通信模型

小程序的通信主体主要包括两个层面:渲染层和逻辑层。

  1. 渲染层:
    主要负责页面的渲染和展示。
    包含WXML(WeiXin Markup Language,微信小程序的标记语言)模板和WXSS(WeiXin Style Sheets,微信小程序的样式表)样式。
    WXML定义了页面的结构,WXSS定义了页面的样式和布局。
  2. 逻辑层:
    主要负责处理页面的逻辑和数据。
    包含JavaScript脚本,通过JavaScript代码来处理用户交互、数据请求、数据处理等任务。
    逻辑层处理完事件后,会更新数据状态,并通过setData方法将数据状态的变化传递给渲染层进行展示。

小程序的通信模型主要分为两部分:

  1. 渲染层和逻辑层之间的通信:
    • 渲染层通过事件监听机制接收用户的交互行为,并将这些行为转化为事件对象传递给逻辑层。
    • 逻辑层处理完这些事件后,会更新数据状态,并通过setData方法将数据状态的变化传递给渲染层。
    • 渲染层根据新的数据状态重新渲染页面,从而展示最新的内容。
    • 这一通信过程由微信客户端进行转发和协调。
  2. 逻辑层和第三方服务器之间的通信:
    • 逻辑层通过发起网络请求(如HTTP请求)与第三方服务器进行通信,获取或发送数据。
    • 微信客户端在这里起到了转发的作用,它帮助小程序建立与第三方服务器之间的连接,并转发请求和响应数据。
    • 这种通信方式使得小程序能够获取外部数据或服务,从而丰富小程序的功能和用户体验。

运行机制

小程序启动的过程

  1. 下载并解压小程序的代码包:
    • 当用户通过扫描小程序码或点击小程序链接时,小程序客户端会首先请求服务器的代码包。
    • 代码包包含小程序的所有源代码和资源文件,这些文件被打包成一个压缩包,以便快速传输。
    • 客户端下载完代码包后,会对其进行解压,以便后续的处理和渲染。
  2. 解析app.json全局配置文件:
    • 解压完代码包后,小程序会开始解析app.json文件。
    • app.json文件是小程序的全局配置文件,包含小程序的页面路径、窗口表现、tabBar等全局配置信息。
    • 通过解析这个文件,小程序能够了解到自己的页面结构和一些全局设置。
  3. 执行app.js小程序入口文件:
    • 接下来,小程序会执行app.js文件。
    • app.js文件是小程序的入口文件,包含了小程序的初始化逻辑和全局状态管理。
    • 在执行过程中,app.js会调用App()函数来创建小程序实例,并注册一些全局的生命周期函数,如onLaunch(小程序启动时触发)、onShow(小程序显示时触发)等。
  4. 调用App()函数创建小程序实例:
    • 在app.js文件中,通过调用App()函数,小程序会创建一个全局的小程序实例。
    • 这个实例包含了小程序的全局数据和方法,可以在小程序的任何页面中访问和使用。
    • 通过这个实例,小程序能够管理全局状态、触发全局事件以及进行其他全局操作。
  5. 渲染小程序首页:
    • 最后,小程序会根据app.json中配置的页面路径,找到并渲染首页。
    • 在渲染过程中,小程序会加载首页的WXML模板、WXSS样式和JavaScript逻辑代码。
    • 这些代码会被组合成一个完整的页面,并通过WebView容器展示给用户。
    • 当首页渲染完成后,小程序就完成了整个启动过程,并准备好与用户进行交互。

页面渲染的过程

  1. 加载解析页面的.json配置文件:
    • 小程序的每个页面都会有一个对应的.json配置文件,这个文件包含了页面的配置信息,如页面的标题、导航栏的样式、是否允许下拉刷新等。
    • 在页面渲染之前,小程序会首先加载并解析这个.json配置文件,以获取页面的配置信息。
  2. 加载页面的.Wxml模板和.Wxss样式:
    • 接下来,小程序会加载页面的.wXml模板文件。这个文件定义了页面的结构,使用了类似于HTML的标记语言,但具有小程序特定的标签和属性。
    • 同时,小程序也会加载页面的.wXSS样式文件。这个文件定义了页面的样式,使用了类似于CSS的语法,但针对小程序做了一些优化和调整。
  3. 执行页面的.js文件:
    • 在加载完页面的.wXml模板和.wXSS样式之后,小程序会执行页面的.js文件。这个文件包含了页面的逻辑代码,如数据的处理、事件的处理等。
    • 在.js文件中,通常会调用Page()函数来创建一个页面实例。这个函数会接收一个对象作为参数,这个对象定义了页面的各种生命周期函数和事件处理函数。
  4. 调用Page()创建页面实例:
    • 通过调用Page()函数,小程序会创建一个页面实例。这个实例包含了页面的数据、方法以及生命周期函数等。
    • 在创建页面实例的过程中,小程序会执行Page()函数中定义的生命周期函数,如onLoad(页面加载时触发)、onShow(页面显示时触发)等。
  5. 页面渲染完成:
    • 当页面实例创建完成后,小程序会根据.wXml模板和.wXSS样式来渲染页面。这个过程会生成一个DOM树(在小程序中称为虚拟DOM树),并将其渲染到屏幕上。
    • 在渲染过程中,小程序会根据数据的变化来更新页面,以实现数据的双向绑定和页面的动态更新。

组件

小程序中组件的分类

小程序中的组件是由宿主环境提供的,这些组件为开发者提供了快速搭建美观页面结构的工具。官方将小程序的组件分为了九大类,每一类都有其特定的功能和用途。

组件分类组件描述示例组件
视图容器用于布局和创建页面结构的容器组件- view:基础容器,类似于HTML的<div>
- scroll-view:可滚动的视图区域
- swiper:滑动视图容器,常用于轮播图
基础内容用于展示页面中的基本文本、图标、进度条等- text:显示文本内容
- rich-text:富文本,支持HTML字符串渲染
- icon:显示图标
- progress:显示进度条
表单组件用于接收用户输入的数据,包括各种输入框、选择器、开关等- button:按钮,用于提交表单或触发事件
- checkbox:复选框
- form:表单容器,用于收集用户输入的数据
- input:输入框
- label:标签,与表单组件关联文本
- picker:选择器,用于选择日期、时间或自定义选项
- radio:单选框
- slider:拖动条,用于选择一个范围内的值
- switch:开关,用于打开或关闭状态
导航组件用于页面之间的跳转和导航- navigator:页面链接,点击后跳转到指定页面
媒体组件用于展示图片、音频、视频等多媒体内容- image:显示图片
- audio:音频播放器
- video:视频播放器
map地图组件用于显示地图和进行地图相关的操作- map:地图显示和操作
canvas画布组件用于在页面中绘制图形、图像或文字等- canvas:画布,支持绘图API
开放能力组件提供与微信或其他服务交互的功能,如获取用户信息、支付等- 各类与微信开放接口相关的组件(具体根据接口而定)
无障碍访问确保小程序对所有用户都友好,包括视力障碍者、听力障碍者等- 无障碍访问相关的设置和组件(如屏幕阅读器支持等,具体实现可能因小程序版本和平台而异)

常用的视图容器类组件

组件名称组件描述
view普通视图区域,类似于HTML中的div,是一个块级元素,常用来实现页面的布局效果
scroll-view可滚动的视图区域,常用来实现滚动列表效果
swiper轮播图容器组件,用于展示多个视图或页面,并支持左右滑动切换
swiper-item轮播图的单个组件,通常与swiper组件配合使用,表示轮播图中的每一项

view 组件的基本使用

简单设置一个页面,设置三个颜色,分别是红色、绿色、黄色

index.wxml
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list"><view class="container1"><view>红色</view><view>绿色</view><view>黄色</view></view>
</scroll-view>
  • 组件名称:view。这是微信小程序中最基本的容器组件,用于包裹其他组件或内容。
  • 类名:container1。这个 view 组件被赋予了一个 CSS 类名 container1,用于在 index.wxss 文件中定义其样式。
  • 子组件:包含三个 view 子组件,每个子组件都包含一些文本(“红色”、“绿色”、“黄色”),并且根据 index.wxss 中的样式,这些子组件将有不同的背景颜色。
index.wxss
/**index.wxss**/
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: red;
}
.container1 view:nth-child(2){background-color: green;
}
.container1 view:nth-child(3){background-color: yellow;
}
.container1{  display: flex;justify-content: space-around;
}
  1. .container1 view 选择器
    这个选择器会选中所有在 .container1 类下的 view 元素,并应用以下样式:

    • width: 100px;:宽度设置为100像素。
    • height: 100px;:高度设置为100像素。
    • text-align: center;:文本内容居中对齐。
    • line-height: 100px;:行高设置为100像素,这通常用于垂直居中单行文本。
  2. .container1 view:nth-child(1) 选择器
    这个选择器会选中 .container1 类下的第一个 view 元素,并应用以下样式:

    • background-color: red;:背景颜色设置为红色。
  3. .container1 view:nth-child(2) 选择器
    这个选择器会选中 .container1 类下的第二个 view 元素,并应用以下样式:

    • background-color: green;:背景颜色设置为绿色。
  4. .container1 view:nth-child(3) 选择器
    这个选择器会选中 .container1 类下的第三个 view 元素,并应用以下样式:

    • background-color: yellow;:背景颜色设置为黄色。
  5. .container1 类
    这个类会应用于所有带有 .container1 的元素,并应用以下样式:

    • display: flex;:使用 Flexbox 布局。
    • justify-content: space-around;:在主轴方向上(默认是水平方向),将子元素之间的间隔平均分配,使得子元素之间的间隔相等,且子元素与容器边缘的间隔是子元素之间间隔的一半。

scroll-view 组件的基本使用

实现纵向滚动效果

index.wxml
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="container1" scroll-y ><view>红色</view><view>绿色</view><view>黄色</view>
</scroll-view>
  1. <navigation-bar> 组件:
    • 这是一个自定义组件,不是微信小程序的标准组件。它可能是在项目的其他地方定义的,用于显示导航栏。
    • 属性包括标题(title=“Weixin”)、是否显示返回按钮(back=“{{false}}”,这里设置为不显示)、文字颜色(color=“black”)和背景颜色(background=“#FFF”)。
  2. <scroll-view> 组件:
    • 这是微信小程序的标准组件,用于实现可滚动的视图区域。
    • 使用了 class=“container1” 来应用样式。
    • scroll-y 属性允许在垂直方向上滚动。
    • 包含了三个 <view> 子组件,每个都包含一些文本(“红色”、“绿色”、“黄色”)。
index.wxss
/**index.wxss**/
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;
}
.container1 view:nth-child(1){background-color: red;
}
.container1 view:nth-child(2){background-color: green;
}
.container1 view:nth-child(3){background-color: yellow;
}
.container1{  border: 1px solid blue;/* 给scroll-view 固定高度*/height: 120px;width: 100px;
}
  1. .container1 view:
    • 为 .container1 下的所有 view 元素设置样式。
    • 每个 view 的宽度和高度都被设置为 100px。
    • 文本内容居中对齐(text-align: center;)。
    • 行高设置为 100px,这有助于使单行文本垂直居中。
  2. .container1 view:nth-child(n):
    • 使用 :nth-child() 伪类选择器来分别为第一个、第二个和第三个 view 元素设置背景颜色。
    • 第一个 view 的背景颜色为红色。
    • 第二个 view 的背景颜色为绿色。
    • 第三个 view 的背景颜色为黄色。
  3. .container1:
    • 为 .container1(即 scroll-view)设置样式。
    • 添加了一个蓝色的 1px 实线边框。
    • 设置了固定的高度(120px)和宽度(100px)。这里的高度设置需要注意,因为它决定了 scroll-view 的可视区域大小。由于你设置了三个高度为 100px 的 view 元素作为子元素,它们总共需要 300px 的高度才能完全显示,但 scroll-view 的高度只有 120px,因此用户将需要滚动才能看到所有内容。

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

实现轮播图效果

index.wxml
<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<swiper class="swiper-container" indicator-dots><swiper-item><view class="item">红色</view></swiper-item><swiper-item><view class="item">绿色</view></swiper-item><swiper-item><view class="item">黄色</view></swiper-item>
</swiper>
  1. <navigation-bar> 组件:
    • 这是一个自定义组件,用于显示导航栏。它可能是在项目的其他地方定义的,不是微信小程序的标准组件。
    • 属性包括:标题(title=“Weixin”)、是否显示返回按钮(back=“{{false}}”,这里设置为不显示)、文字颜色(color=“black”)和背景颜色(background=“#FFF”)。
  2. <swiper> 组件:
    • 这是微信小程序的标准组件,用于实现轮播图效果。
    • 使用了 class=“swiper-container” 来应用样式。
    • indicator-dots 属性表示在轮播图底部显示指示点。
    • 包含了三个 <swiper-item> 子组件,每个都包含一个 <view> 元素,分别显示“红色”、“绿色”和“黄色”文本。
index.wxss
/**index.wxss**/
.swiper-container{height: 150px; /*轮播图容器的高度 */
}
.item{height: 100%;line-height: 150px;text-align: center;
}
swiper-item:nth-child(1) .item{background-color: red;
}
swiper-item:nth-child(2) .item{background-color: green;
}
swiper-item:nth-child(3) .item{background-color: yellow;
}
  1. .swiper-container:
    • 设置了轮播图容器的高度为 150px。
  2. .item:
    • 高度设置为父容器(.swiper-container)的 100%,即 150px。
    • 行高也设置为 150px,这有助于使单行文本垂直居中。
    • 文本内容居中对齐(text-align: center;)。
  3. 选择器问题:
    • 在 WXSS(微信小程序样式表)中,选择器应该使用类名、ID 或元素名(对于标准组件)来定义样式。但是,swiper-item:nth-child(n) .item 这样的选择器实际上在 WXSS 中可能不会按预期工作,因为 swiper-item 是微信小程序自定义组件的内部元素,通常不会直接通过 WXSS 选择器进行样式定义(除非这些组件暴露了相应的类或ID供外部使用)。
    • 在实际的小程序开发中,最好将这些样式定义在对应的 <swiper-item> 内部或通过其他方式(如组件的属性)来传递样式信息。然而,由于 <swiper-item> 是微信小程序的标准组件,并且通常不包含子元素的样式定义(它只是一个容器),因此可能需要依赖 .item 类来为每个轮播项设置样式。
  • 在这个例子中,如果 <swiper-item> 组件没有提供修改内部元素样式的方法,那么可能需要将 .item 的样式规则改为更通用的类名,并在每个 <swiper-item> 内部直接应用该类名。不过,由于你已经使用了 .item 类,并且这个类名在 <swiper-item> 内部是唯一的,因此如果 <swiper-item> 允许其内部内容应用外部样式(这通常是可以的),那么样式应该能够正常工作。

在这里插入图片描述

swiper 组件的常用属性

属性类型默认值说明
indicator-dotsbooleanfalse是否显示面板指示点
indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
indicator-active-colorcolor#000000当前选中的指示点颜色
autoplaybooleanfalse是否自动切换
intervalnumber5000自动切换时间间隔(毫秒)
circularbooleanfalse是否采用衔接滑动

常用的基础内容组件

  1. text组件:
    • 功能:这是一个文本组件,用于在小程序中显示文本内容。
    • 特点:类似于HTML中的span标签,text组件是一个行内元素,这意味着它不会独占一行,而是根据内容的长度来决定占据的空间。
    • 使用场景:适用于需要显示简短文本信息的场景,如按钮上的文字、标签上的提示等。
  2. rich-text组件:
    • 功能:这是一个富文本组件,支持将HTML字符串渲染为WXML结构。
    • 特点:通过该组件,开发者可以将HTML代码嵌入到小程序中,并实现HTML中的排版和样式效果。这大大增强了小程序内容的丰富性和表现力。
    • 使用场景:适用于需要显示复杂文本内容(如包含多种字体、颜色、大小或包含图片、链接等)的场景,如新闻资讯、产品介绍等。

text 组件的基本使用

index.wxml文件

<!--index.wxml--><navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view><text selectable>150150150150</text>
</view>

通过 text 组件的 selectable 属性,实现长按选中文本内容的效果

rich-text 组件的基本使用

index.wxml文件

<!--index.wxml--><navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<rich-text nodes="<h1 style='color:blue;'>我是蓝色标题1<h1>">
</rich-text>

其他常用组件

  1. 按钮组件(button)
    • 功能:按钮组件是小程序中用于触发特定动作的重要元素。与HTML中的button按钮相比,小程序中的button组件功能更加丰富。
    • 特点:通过为button组件设置open-type属性,可以调用微信提供的各种功能,如客服、转发、获取用户授权和获取用户信息等。这使得小程序在交互性和功能性上得到了极大的提升。
    • 使用场景:按钮组件常用于表单提交、页面跳转、触发弹窗等场景。
  2. 图片组件(image)
    • 功能:图片组件用于在小程序中显示图片。
    • 特点:image组件具有默认的宽度和高度(宽度约300px,高度约240px),但开发者可以根据实际需求对其进行调整。此外,image组件还支持懒加载、裁剪模式等高级功能。
    • 使用场景:图片组件广泛应用于商品展示、用户头像、背景图片等场景。
  3. 导航器组件(navigator)
    • 功能:导航器组件用于引导用户浏览小程序的不同部分或跳转到其他小程序/页面。
    • 特点:与HTML中的a链接类似,navigator组件可以实现页面间的跳转。同时,它还具有更丰富的跳转方式和参数设置,如设置跳转的目标页面路径、是否显示动画等。
    • 使用场景:导航器组件常用于底部导航栏、分类列表页、商品详情页等场景,以实现页面间的快速切换。
  4. 页面导航组件
    • 功能:虽然图中未详细列出页面导航组件的具体名称和属性,但根据描述可以推断,该组件的功能与HTML中的a链接类似,用于链接到其他网页或页面的部分。
    • 特点:在小程序中,页面导航组件可能具有更多的自定义属性和事件处理函数,以满足小程序特定的交互需求。
    • 使用场景:页面导航组件常用于文章阅读、商品分类浏览等场景,以实现页面间的无缝跳转。

button 按钮的基本使用

index.wxml文件

<!--index.wxml--><navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar><view>-----通过 type 指定按钮类型-----</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>-----小尺寸按钮-----</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>-----镂空按钮-----</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

image 组件的基本使用

index.xml文件

<!--index.wxml--><navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<image src="https://img2.baidu.com/it/u=1983234234,4077983892&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=333"></image>

image 组件的 mode 属性

image 组件的 mode 属性用来指定图片的裁剪和缩放模式,以下是常用的mode属性

mode 值说明
ScaleToFill(默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

API

小程序API概述

小程序中的API(Application Programming Interface,应用程序编程接口)是由其宿主环境提供的。在小程序的场景下,宿主环境通常指的是微信这样的平台。这些API为开发者提供了与微信平台进行交互的能力,使得开发者能够轻松地实现各种功能,而无需从头开始构建这些功能。

API的特点与优势

  1. 丰富性:微信为小程序提供了大量的API,涵盖了从用户信息获取到支付、从网络请求到文件操作等多个方面,满足了开发者在不同场景下的需求。
  2. 易用性:小程序API的设计简洁明了,易于理解和使用。开发者可以通过查阅官方文档或相关教程,快速掌握这些API的使用方法。
  3. 安全性:小程序API在调用时会进行权限校验,确保只有经过授权的用户或小程序才能调用相应的API。这有助于保护用户的隐私和数据安全。
  4. 稳定性:微信对小程序API进行了严格的测试和验证,确保其具有较高的稳定性和可靠性。这有助于开发者在开发过程中减少因API问题导致的错误和故障。

小程序API的三大分类

在微信小程序开发中,API(应用程序编程接口)扮演着至关重要的角色,它们为开发者提供了与小程序宿主环境进行交互的能力。根据小程序官方的分类,我们可以将小程序API分为以下三大类:

  1. 事件监听API
    • 特点:这些API通常以“on”开头,用于监听某些特定事件的触发。当这些事件发生时,小程序会调用相应的回调函数来处理这些事件。
    • 举例:wx.onWindowResize(function callback)是一个事件监听API的例子,它用于监听窗口尺寸变化的事件。当窗口尺寸发生变化时,小程序会调用传递给wx.onWindowResize的回调函数来处理这个事件。
  2. 同步API
    • 特点:
      以“Sync”结尾的API都是同步API。
      同步API的执行结果可以直接通过函数的返回值获取。
      如果执行出错,同步API会抛出异常,开发者可以通过try-catch语句来捕获和处理这些异常。
    • 举例:wx.setStorageSync(key, value)是一个同步API的例子,它用于向本地存储中写入内容。调用这个函数后,它会立即返回执行结果(通常是一个布尔值,表示写入是否成功),如果写入过程中发生错误,它会抛出异常。
  3. 异步API
    • 特点:
      异步API的执行结果不是立即返回的,而是需要通过回调函数、Promise或其他异步机制来获取。
      小程序中的异步API通常会提供success、fail和complete三个回调函数(或类似的机制)来接收调用的结果。
    • 举例:wx.request()是一个异步API的例子,它用于发起网络数据请求。调用这个函数后,它不会立即返回结果,而是会在请求完成后通过success回调函数来接收数据。如果请求失败,则会调用fail回调函数;无论请求成功还是失败,都会调用complete回调函数(如果提供了的话)。

相关文章:

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…...

用Moninfo.exe轻松获取显示器EDID

我们天天在用显示器&#xff0c;但显示器的一些关键参数却总是记不住。有时为了配置电脑&#xff0c;有时为了发挥显示器的极限性能&#xff0c;有时为了定制驱动&#xff0c;等等&#xff0c;都需要获取显示器的EDID数据。有些工具虽然可以读出EDID&#xff0c;但难以解读那一…...

【开源库 | xlsxio】C/C++读写.xlsx文件,xlsxio 在 Linux(Ubuntu18.04)的编译、交叉编译

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 2024-12-20 …...

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之分支结构(switch语句)

if语句处理多个分支时需要用if-else if结构&#xff0c;分支越多&#xff0c;嵌套的if语句层就越多&#xff0c;程序不但庞大、复杂&#xff0c;理解起来也比较困难。在C编程中&#xff0c;针对有些问题除了使用if-else if结构之外&#xff0c;还有switch语句也可以实现&#x…...

SQL Server数据库多主模式解决方案

SQL Server 本身并不直接支持多主模式(Multi-Master Replication),即多个数据库实例可以同时进行写操作,并且这些更改会自动同步到其他实例。不过,SQL Server 提供了多种高可用性和复制解决方案,可以实现类似多主模式的功能。以下是几种常见的方法: 1. Always On 可用性…...

如何训练Stable Diffusion 模型

训练Stable Diffusion模型是一个复杂且资源密集的过程&#xff0c;通常需要大量的计算资源&#xff08;如GPU或TPU&#xff09;和时间。Stable Diffusion是一种基于扩散模型的生成式AI&#xff0c;能够根据文本提示生成高质量的图像。它的训练过程涉及多个步骤&#xff0c;包括…...

网络编程(王铭东老师)笔记

网络编程的目的 1.将多个设备通过网络进行连接在一起&#xff0c;可以将数据共享。 基础知识-01-ip地址 1.引入 为了能够确定网络数据收发双方是哪台电脑&#xff0c;需要用ip来标记电脑。 2.什么是地址 地址就是用来标记地点的 3.ip地址的作用 作用&#xff1a;在逻辑上标…...

项目亮点案例

其实对我来说是日常操作&#xff0c;但是如果在面试的时候面试者能把日常的事情总结好发出来&#xff0c;其实足矣。 想让别人认同项目&#xff0c;选取的示例需要包含以下要素&#xff1a; 亮点项目四要素&#xff1a;明确的目标&#xff0c;问题点&#xff0c;解决方法和结果…...

ShardingSphere-Proxy 连接实战:从 Golang 原生 SQL 到 GORM 的应用

在这篇文章《ShardingSphereProxy:快速入门》中&#xff0c;我们介绍了如何通过 Navicat 连接 ShardingSphere-Proxy。 实际上&#xff0c;ShardingSphere-Proxy 兼容标准的 SQL 和原生数据库协议&#xff0c;因此你可以使用任何 MySQL 客户端与其进行连接&#xff0c;包括 Go…...

uniapp验证码

一、 页面结构 假设你有一个发送短信按钮&#xff0c;点击按钮时会触发发送短信并启动倒计时。 <template><view><button click"sendSms" :disabled"isSending">{{ buttonText }}</button></view> </template>二、脚…...

C/C++基础知识复习(43)

1) 什么是运算符重载&#xff1f;如何在 C 中进行运算符重载&#xff1f; 运算符重载是指在 C 中为现有的运算符定义新的行为&#xff0c;使得它们能够用于用户定义的数据类型&#xff08;如类或结构体&#xff09;。通过运算符重载&#xff0c;可以让自定义类型像内置数据类型…...

GIT安装过程

文章目录 ‌下载安装包‌安装过程‌验证安装‌Git的基本使用‌ ‌Git的安装可以通过以下步骤完成‌ ‌下载安装包‌ 首先&#xff0c;访问Git官网(https://git-scm.com/)或Git for Windows(https://gitforwindows.org/)下载对应系统的安装包。 对于Windows系统&#xff0c;通常…...

评估大语言模型在药物基因组学问答任务中的表现:PGxQA

​这篇文献主要介绍了一个名为PGxQA的资源&#xff0c;用于评估大语言模型&#xff08;LLM&#xff09;在药物基因组学问答任务中的表现。 研究背景 药物基因组学&#xff08;Pharmacogenomics, PGx&#xff09;是精准医学中最有前景的领域之一&#xff0c;通过基因指导的治疗…...

[HNCTF 2022 Week1]你想学密码吗?

下载附件用记事本打开 把这些代码放在pytho中 # encode utf-8 # python3 # pycryptodemo 3.12.0import Crypto.PublicKey as pk from hashlib import md5 from functools import reducea sum([len(str(i)) for i in pk.__dict__]) funcs list(pk.__dict__.keys()) b reduc…...

MongoDB教程001:基本常用命令(数据库操作和集合操作)

1.1 案例需求 存放文章评论的数据存放到MongoDB中&#xff0c;数据结构参考如下&#xff1a; 数据库&#xff1a;【articledb】 专栏文章评论comment字段名称字段含义字段类型备注_id&#xff08;MongoDB自动生成&#xff09;IDObjectId或StringMongo的主键的字段articleId文…...

Springboot logback 日志打印配置文件,每个日志文件100M,之后滚动到下一个日志文件,日志保留30天(包含traceid)

全部配置 logback.xml <?xml version"1.0" encoding"UTF-8"?> <configuration debug"false"><property name"LOG_HOME" value"log"/><property name"LOG_NAME" value"admin"/&g…...

flink sink kafka

接上文&#xff1a;一文说清flink从编码到部署上线 之前写了kafka source&#xff0c;现在补充kafka sink。完善kafka相关操作。 环境说明&#xff1a;MySQL&#xff1a;5.7&#xff1b;flink&#xff1a;1.14.0&#xff1b;hadoop&#xff1a;3.0.0&#xff1b;操作系统&#…...

vue万达地产物业缴费分析系统

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设万达地产物业缴费分析…...

数据库 MYSQL的概念

数据库的概念 数据库是按照数据结 构来组织、存储和管理数据的系统&#xff0c;它允许用户高效地存储、检索、更新和管理数据 database&#xff1a;用来组织&#xff0c;存储&#xff0c;管理数据的仓库 数据库的管理系统&#xff1a;DBMS&#xff0c;实现对数据的有效储值&am…...

docker 容器的基本使用

docker 容器 一、docker是什么&#xff1f; 软件的打包技术&#xff0c;就是将算乱的多个文件打包为一个整体&#xff0c;打包技术在没有docker容器之前&#xff0c;一直是有这种需求的&#xff0c;比如上节课我把我安装的虚拟机给你们打包了&#xff0c;前面的这种打包方式是…...

Nginx IP优化限制策略

Nginx 如何限制每个 IP 地址的连接数&#xff0c;优化资源分配&#xff1f; Nginx 限制每个 IP 地址的连接数 Nginx 提供了多种机制来限制单个 IP 地址所能建立的同时连接数&#xff0c;这对于防止资源耗尽和提高服务稳定性至关重要。以下是几种有效策略&#xff1a; 1. 使用…...

某科技局国产服务器PVE虚拟化技术文档

环境介绍 硬件配置 服务器品牌&#xff1a;黄河 型号&#xff1a;Huanghe 2280 V2 Cpu型号&#xff1a;kunpeng-920 磁盘信息 :480SSD * 2 ,4T*4 网卡&#xff1a;板载四口千兆 如下表 四台服务器同等型号配置&#xff0c;均做单节点虚拟化&#xff0c;数据保护采用底层r…...

新能源汽车锂离子电池各参数的时间序列关系

Hi&#xff0c;大家好&#xff0c;我是半亩花海。为了进一步开展新能源汽车锂离子电池的相关研究&#xff0c;本文主要汇总并介绍了电动汽车的锂离子电池的各项参数&#xff0c;通过 MATLAB 软件对 Oxford Dataset 的相关数据集进行数据处理与分析&#xff0c;进一步研究各项参…...

单片机:实现自动关机电路(附带源码)

单片机实现自动关机电路 在许多嵌入式系统或便携式设备中&#xff0c;自动关机功能非常重要&#xff0c;尤其是在电池供电的设备中&#xff0c;防止设备长时间开启以节省电能。自动关机电路的基本功能是检测设备是否处于待机状态&#xff0c;若一定时间内未收到用户操作信号或…...

/etc/fstab 文件学习systemd与该文件关系

文章目录 一、文件字段1.1、设备标识1.2、挂载点1.3、文件系统类型1.4、挂载选项1.5、dump1.5、fsck顺序 二、/etc/fstab 与systemd 的关系2.1、/etc/fstab 与systemd 的关系2.2、systemd 之前/etc/fstab生效过程2.3、systemd 时代/etc/fstab生效过程 三、相关知识3.1、如何更具…...

springcloud基础

一 SpringCloud简介 1.1 SpringCloud是什么 SpringCloud,基于SpringBoot提供了一套微服务解决方案&#xff0c;包括服务注册与发现&#xff0c;配置中心&#xff0c;全链路监控&#xff0c;服务网关&#xff0c;负载均衡&#xff0c;熔断器等组件&#xff0c;除了基于NetFli…...

全面解析 Kubernetes 流量负载均衡:iptables 与 IPVS 模式

目录 Kubernetes 中 Service 的流量负载均衡模式 1. iptables 模式 工作原理 数据路径 优点 缺点 适用场景 2. IPVS 模式 工作原理 数据路径 优点 缺点 适用场景 两种模式的对比 如何切换模式 启用 IPVS 模式 验证模式 总结 Kubernetes 中 Service 的流量负载…...

HTML+CSS+JS制作汽车网站(内附源码,含5个页面)

一、作品介绍 HTMLCSSJS制作一个汽车网站&#xff0c;包含首页、新车发布页、预约试驾页、最新资讯页、品牌故事页等5个静态页面。其中每个页面都包含一个导航栏、一个主要区域和一个底部区域。 二、页面结构 1. 顶部导航栏 包含logo、主导航菜单&#xff08;首页、新车、二…...

GraalVM完全指南:云原生时代下使用GraalVM将Spring Boot 3应用转换为高效Windows EXE文件

一、前言 在现代软件开发中,启动速度和资源利用率常常是衡量应用性能的关键指标。对于基于Spring Boot的应用来说,虽然它们易于开发和部署,但JVM的启动时间有时会成为一个瓶颈。本文介绍如何使用GraalVM将Spring Boot 3应用编译成原生Windows可执行文件(EXE),从而显著提…...

微软开源GraphRAG的使用教程-使用自定义数据测试GraphRAG

微软在今年4月份的时候提出了GraphRAG的概念&#xff0c;然后在上周开源了GraphRAG,Github链接见https://github.com/microsoft/graphrag,截止当前&#xff0c;已有6900Star。 安装教程 官方推荐使用Python3.10-3.12版本&#xff0c;我使用Python3.10版本安装时&#xff0c;在…...

C++ 中的字面量类型定义

在 C 中&#xff0c;字面量类型&#xff08;Literal Type&#xff09;是指可以作为字面量使用的类型。字面量是指代码中直接写出的常量值&#xff0c;比如整数 42、浮点数 3.14、字符串 "hello" 等。而字面量类型则是支持创建这些字面量的类型。 C 中的字面量类型定…...

LeetCode:101. 对称二叉树

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;101. 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输…...

Docker Compose 配置指南

目录 1. Docker Compose 配置1.1 基本配置结构1.2 docker-compose.yml 的各部分1.3 常用配置选项 2. Docker Compose 使用方法2.1 创建 Docker Compose 配置文件2.2 启动服务2.3 查看容器状态2.4 查看服务日志2.5 停止服务2.6 重新构建服务 3. Docker Compose 常用命令3.1 dock…...

【Linux开发工具】自动化构建-make/Makefile

&#x1f525;个人主页&#x1f525;&#xff1a;孤寂大仙V &#x1f308;收录专栏&#x1f308;&#xff1a;Linux &#x1f339;往期回顾&#x1f339;&#xff1a;【Linux开发工具】gcc和g &#x1f516;流水不争&#xff0c;争的是滔滔不 一、make和Makefile简介1.1 什么是…...

VSCode 搭建Python编程环境 2024新版图文安装教程(Python环境搭建+VSCode安装+运行测试+背景图设置)

名人说&#xff1a;一点浩然气&#xff0c;千里快哉风。—— 苏轼《水调歌头》 创作者&#xff1a;Code_流苏(CSDN) 目录 一、Python环境安装二、VScode下载及安装三、VSCode配置Python环境四、运行测试五、背景图设置 很高兴你打开了这篇博客&#xff0c;更多详细的安装教程&…...

Python 异步协程:从 async/await 到 asyncio 再到 async with

在 Python 3.8 以后的版本中&#xff0c;异步编程变得越来越重要。本文将系统介绍 Python 标准库中的异步编程工具&#xff0c;带领大家掌握 async/await 语法和 asyncio 的使用。 从一个简单的场景开始 假设我们在处理一些耗时的 I/O 操作&#xff0c;比如读取多个文件或处理…...

矩阵-向量乘法的行与列的解释(Row and Column Interpretations):中英双语

本文是学习这本书的笔记 网站是&#xff1a;https://web.stanford.edu/~boyd/vmls/ 矩阵-向量乘法的行与列的解释 矩阵-向量乘法&#xff08;Matrix-Vector Multiplication&#xff09;是线性代数中的基本操作&#xff0c;也是机器学习、数据科学和工程中常用的数学工具。本文…...

针对超大规模病理图像分析!华中科技大学提出医学图像分割模型,提高干燥综合征诊断准确性

口干、眼干、皮肤干&#xff0c;每天伴有不明原因的肌肉酸痛和全身乏力&#xff0c;如果以上症状你「中招」了&#xff0c;除了考虑冬季天气干燥外&#xff0c;还应该警惕一种常见却总是被我们忽视的疾病——干燥综合征 (Sjgren’s Syndrome, SS)。 干燥综合征是以外分泌腺高度…...

混合开发环境---使用编程AI辅助开发Qt

文章目录 [toc]1、说明2、演示视频 1、说明 新时代的浪潮早就已经来临&#xff0c;上不了船的人终将被抛弃&#xff0c;合理使用AI辅助开发、提升效率是大趋势 注意&#xff1a;不要被AI奴隶 合理使用AI辅助编程&#xff0c;十倍提升效率。 大部分的编程AI都有vs code插件&…...

Unity复刻胡闹厨房复盘 模块一 新输入系统订阅链与重绑定

本文仅作学习交流&#xff0c;不做任何商业用途 郑重感谢siki老师的汉化教程与代码猴的免费教程以及搬运烤肉的小伙伴 版本&#xff1a;Unity6 模板&#xff1a;3D 核心 渲染管线&#xff1a;URP ------------------------------…...

[前端]HTTP库Axios

一、Axios简介 Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 node.js 环境。它是一个流行的 JavaScript 库&#xff0c;用于发起 HTTP 请求&#xff0c;如 GET、POST、DELETE 等。Axios 提供了易于使用的 API&#xff0c;支持请求和响应的拦截、转换数据格…...

Excel中index()函数

函数功能概述 INDEX 函数用于返回表格或区域中的值或对值的引用。它可以根据指定的行和列的位置从一个单元格区域中提取数据。这个函数有两种形式&#xff1a;数组形式和引用形式。语法结构&#xff08;数组形式&#xff09; INDEX(array, row_num, column_num)array&#xff0…...

linux-----文件命令

文件和目录的基本概念 文件类型&#xff1a; 普通文件&#xff1a;这是最常见的文件类型&#xff0c;用于存储数据&#xff0c;如文本文件、二进制文件等。文本文件可以用文本编辑器打开并查看内容&#xff0c;二进制文件则包含机器可执行的代码或其他特定格式的数据。目录文件…...

lua dofile 传参数

cat 1.lua arg[1] 111 arg[2] 222 dofile(./2.lua) cat 2.lua print("First argument is: " .. arg[1]) print("Second argument is: " .. arg[2]) 执行 lua 1.lua&#xff0c;结果为&#xff1a; First argument is: 111 Second argument is: 222 l…...

【ETCD】【实操篇(二)】如何从源码编译并在window上搭建etcd集群?

要在 Windows 上编译 etcd 及 etcdctl 工具&#xff0c;并使用 bat 脚本启动 etcd 集群&#xff0c;首先需要准备好开发环境并确保依赖项正确安装。下面是从 etcd 3.5 源码开始编译和启动 etcd 集群的详细步骤&#xff1a; 目录 1. 安装 Go 环境2. 获取 etcd 源码3. 编译 etcd…...

重温设计模式--备忘录模式

文章目录 备忘录模式&#xff08;Memento Pattern&#xff09;概述定义&#xff1a; 作用&#xff1a;实现状态的保存与恢复支持撤销 / 恢复操作 备忘录模式UML图备忘录模式的结构原发器&#xff08;Originator&#xff09;&#xff1a;备忘录&#xff08;Memento&#xff09;&…...

如何借助边缘智能网关实现厂区粉尘智能监测告警

在诸如木制品加工、纺织品加工、塑料橡胶制品加工等多种工业生产场景中&#xff0c;粉尘问题的隐患和风险不可小觑。如果缺少对生产环境中粉尘的监测和管理&#xff0c;可能发生易燃易爆、环境污染和工人尘肺等生产事故。 针对工业场景中的粉尘状况监测、管理及预警&#xff0c…...

解析mysqlbinlog

一、前置设置 ps -ef | grep mysql 查看mysql进程对应的安装目录 需设置mysql binlog日志模式为 ROW 二、执行命令 [rootlocalhost bin]# mysqlbinlog --verbose --base64-outputdecode-rows /usr/local/mysql/data/binlog.000069 > 1.sql 查看文件具体内容...

【gym】理解gym并测试gym小游戏CartPole (一)

一、gym与文件位置的联合理解 import gym import inspect# 加载 CliffWalking 环境 env gym.make(CliffWalking-v0)# 获取环境的类 env_class type(env)# 获取环境类所在的文件路径 file_path inspect.getfile(env_class)print(f"The source code for CliffWalking-v0…...

【jvm】内存泄漏的8种情况

目录 1. 说明2. 静态集合类持有对象引用3. 单例模式4. 内部类持有外部类5. 未关闭的连接6. 变量不合理的作用域7. 改变对象的哈希值8. 缓存Cache泄漏9. 监听器和回调 1. 说明 1.内存泄漏&#xff08;Memory Leak&#xff09;指的是程序中动态分配的内存由于某种原因没有被释放…...