程序员scholar
  • 小程序开发
  • 原生微信小程序
  • 小程序入门级配置
scholar
2024-10-18
目录

小程序的宿主环境

# 小程序的宿主环境

# 1. 小程序的宿主环境简介

# 1.1 什么是宿主环境

宿主环境（host environment）是指软件应用运行时所依赖的底层平台或操作系统。例如，Android 系统和 iOS 系统是两种不同的宿主环境，应用程序必须在相应的环境中运行，才能发挥其功能。软件和应用程序依赖宿主环境提供运行时的支持，包括硬件接口、操作系统资源等。

  • 例子：一个 Android 应用程序只能在 Android 系统的宿主环境中运行，无法在 iOS 系统中直接运行，反之亦然。因此，Android 系统就是 Android 应用的宿主环境。

如果软件脱离了其宿主环境，它将无法运行或起作用。这意味着宿主环境是应用程序存在和执行的基础。

宿主环境示意图

# 1.2 小程序的宿主环境

在微信小程序的架构中，微信 App 是小程序的宿主环境。无论是在 Android 设备还是 iOS 设备上，小程序都必须依赖微信 App 才能运行。这意味着小程序必须在微信客户端内启动并执行。

  • 微信 App 作为宿主环境的作用：微信不仅提供了小程序的运行平台，还提供了一系列强大的功能接口，允许开发者调用微信的能力。这些功能包括微信支付、微信登录、扫一扫、地理位置等。这些功能的集成使得小程序相比普通网页具有更多的功能和更好的用户体验。

下图展示了微信作为小程序的宿主环境所处的位置：

微信宿主环境

由于微信作为小程序的宿主环境，小程序可以借助微信的能力，完成一些网页应用无法实现的功能，例如：

  • 微信支付：用户可以通过小程序内直接调用微信支付接口，完成支付操作。
  • 微信登录：小程序可以调用微信提供的用户登录接口，让用户快速使用微信账号登录，无需单独注册。
  • 获取地理位置：小程序可以通过微信的 API 获取用户的当前地理位置信息，提供基于位置的服务。
  • 扫一扫：小程序可以调用微信的扫一扫功能，扫描二维码、条形码等，实现与线下物理场景的交互。

# 1.3 小程序宿主环境包含的内容

微信作为小程序的宿主环境，不仅提供了小程序运行的基础，还通过底层的架构支持小程序的核心功能。这些核心功能包括：

// 通信模型：负责渲染层和逻辑层之间的数据通信
// 运行机制：处理小程序的启动、运行和销毁过程
// 组件：提供一系列构建用户界面的基础模块
// API：通过微信开放的 API 接口，调用微信功能和设备资源
1
2
3
4

这些功能共同构成了小程序宿主环境的基础支持，使开发者可以基于微信平台开发出功能丰富的小程序。

# 2. 通信模型

# 2.1 通信的主体

在微信小程序中，通信的核心概念是 渲染层 和 逻辑层。这两个部分各司其职，通过通信机制实现数据和页面展示的同步。

  • 渲染层：负责页面的显示和渲染，主要由 WXML（微信标记语言）和 WXSS（微信样式表）组成。渲染层管理小程序页面的布局、内容和样式。
  • 逻辑层：负责处理页面的业务逻辑和数据操作，主要由 JavaScript 组成。逻辑层控制页面的动态行为，处理用户操作和数据交互。

这两层通过微信的底层机制相互通信。用户的操作触发逻辑层事件，逻辑层处理数据后通过通信机制将结果传递到渲染层，渲染层根据新的数据更新页面显示。

通信模型

# 2.2 小程序的通信模型

小程序的渲染层运行在 WebView 中，而逻辑层运行在独立的 JavaScript 线程中。这种分离的架构提高了小程序的性能，因为页面的渲染和数据处理是并行执行的，互不干扰。

  • 数据通信机制：逻辑层和渲染层之间通过一条底层数据传输通道进行通信。当逻辑层处理完数据后，会通过这条通道将数据发送到渲染层，从而更新页面展示。这种机制确保了小程序在复杂交互下也能保持良好的性能。

下图展示了渲染层与逻辑层的通信模型：

小程序通信模型

# 3. 运行机制

# 3.1 小程序启动的过程

当用户打开一个小程序时，微信会执行一系列步骤来启动它。这些步骤确保小程序能够顺利运行并呈现给用户。以下是小程序启动的详细步骤：

  1. 下载小程序代码包：首次使用时，微信会将小程序的代码包下载到本地设备中。代码包包含页面、样式、脚本和配置文件等资源。
  2. 解析 app.json 配置文件：微信会读取并解析小程序的全局配置文件 app.json，从中获取小程序的页面路径、窗口配置、底部导航栏等信息。
  3. 执行 app.js 文件：接着，微信会执行小程序的主入口文件 app.js，调用 App() 函数，创建小程序实例，初始化小程序的全局数据和事件处理。
  4. 渲染首页：根据 app.json 文件中的首页路径，微信会加载该页面的相关文件，执行页面的 page.js 文件，并将页面渲染到用户界面上。
  5. 小程序启动完成：小程序进入可交互状态，用户可以开始使用。
// 下载小程序的代码包到本地
// 解析 app.json 全局配置文件
// 执行 app.js 文件，调用 App() 创建小程序实例
// 渲染小程序首页
// 小程序启动完成
1
2
3
4
5

# 3.2 页面渲染的过程

在小程序的运行过程中，页面的加载和渲染是重要的环节。每当用户切换到新的页面时，微信会按照以下步骤加载并渲染页面：

  1. 加载解析页面的 .json 文件：读取当前页面的 .json 文件，获取该页面的窗口配置，如导航栏标题、背景颜色等。
  2. 加载页面的 WXML 和 WXSS 文件：解析页面的 WXML 模板和 WXSS 样式，构建页面的基本布局和视觉效果。
  3. 执行页面的 .js 文件：调用页面的 .js 文件，执行其中的逻辑代码，处理页面的交互和数据。
  4. 页面渲染完成：将页面内容渲染到屏幕上，用户可以开始与页面进行交互。
// 加载解析页面的 .json 配置文件
// 加载页面的 WXML 模板和 WXSS 样式
// 执行页面的 .js 文件，调用 Page() 创建页面实例
// 页面渲染完成
1
2
3
4

# 4. 组件

# 4.1 小程序中组件的分类

组件是小程序构建页面的基本单元。微信为小程序提供了大量预定义的组件，开发者可以通过这些组件快速搭建页面。根据功能，微信将小程序组件分为以下 9 大类：

  1. 视图容器：如 view、scroll-view，用于布局和容纳其他组件。
  2. 基础内容：如 text、image，用于显示文字、图片等基础内容。
  3. 表单组件：如 input、button，用于接收用户输入和操作。
  4. 导航组件：如 navigator，用于页面间的跳转。
  5. 媒体组件：如 audio、video，用于播放音视频内容。
  6. 地图组件：如 map，用于显示地图和地理位置。
  7. 画布组件：如 canvas，用于绘制自定义图形。
  8. 开放能力：如 open-data，用于展示微信用户的头像、昵称等数据。
  9. 无障碍访问：支持为视障用户提供无障碍体验。

# 4.2 常用的视图容器类组件

视图容器类组件是小程序中最常用的组件，用于组织和布局页面中的其他组件。常见的视

图容器组件有：

  • view：最常用的页面布局容器，可以用来包裹和布局页面中的其他组件。
  • scroll-view：创建可以滚动的区域，适合内容较多的页面部分，支持横向和纵向滚动。

这些组件帮助开发者构建复杂的页面布局，如下图所示：

视图容器组件

# 4.3 view 组件的基本使用

view 组件是最基础的布局组件，常用于包裹页面中的其他元素。在下图中，通过 flex 布局实现了横向排列的效果：

flex 布局

# 4.4 scroll-view 组件的基本使用

scroll-view 组件用于创建可滚动的区域，支持纵向和横向滚动。下图展示了 scroll-view 实现的纵向滚动效果：

scroll-view

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

swiper 组件用于创建轮播图效果，通常用于首页焦点图片的展示。swiper-item 则定义了轮播图中的每一项。

swiper 组件

# 4.6 swiper 组件的常用属性

swiper 组件支持多个配置属性，如自动播放、循环播放、分页指示器等常用属性如下：

swiper 属性

# 4.7 常用的基础内容组件

基础内容组件是用于展示文本、图片、图标等基础信息的组件。常用的基础内容组件有：

  • text：用于显示文本内容，支持基础样式如颜色、字体大小等。
  • image：用于展示图片，支持本地图片和网络图片的展示。
  • icon：用于展示图标，支持微信提供的内置图标或自定义图标。

下图展示了小程序中常用的基础内容组件：

基础内容组件

# 4.8 text 组件的基本使用

text 组件用于显示文本信息，通过设置 selectable 属性，可以使文本支持长按选中复制的功能。这个功能在显示较长的文本或需要用户手动复制信息时非常有用。

例如：

<text selectable="true">长按选中这段文本</text>
1

下图展示了 text 组件的使用效果：

text 组件

# 4.9 rich-text 组件的基本使用

rich-text 组件允许开发者通过 nodes 属性，渲染包含 HTML 标签的文本内容。这个组件非常适合用于展示富文本格式的内容，如动态生成的文章、消息等。

例如：

<rich-text nodes="{{nodes}}"></rich-text>
1

开发者可以通过 JavaScript 动态设置 nodes 内容，将 HTML 字符串渲染为小程序内的 UI 结构。下图展示了 rich-text 组件的实际使用效果：

rich-text 组件

# 4.10 其它常用组件

除了以上提到的组件，微信小程序中还包含了许多其他常用组件，如按钮、输入框、切换开关等。这些组件构成了小程序交互界面的基础部分，帮助开发者快速构建具有交互功能的页面。

其他组件

# 4.11 button 按钮的基本使用

button 组件是小程序中最常见的交互组件，用户可以点击按钮来触发事件操作，例如提交表单、跳转页面、分享内容等。

<button bindtap="onClick">点击我</button>
1

通过 bindtap 属性，可以监听按钮的点击事件，并在对应的 JavaScript 函数中处理逻辑。下图展示了 button 组件的基本使用效果：

button 组件

# 4.12 image 组件的基本使用

image 组件用于显示图片，可以通过 src 属性指定图片的来源，支持本地图片和网络图片。同时，image 组件可以通过 mode 属性设置图片的裁剪和缩放方式。

<image src="/images/picture.jpg" mode="aspectFit"></image>
1
  • src：图片的路径，可以是相对路径、本地路径或网络 URL。
  • mode：图片的显示模式，决定图片如何适配其容器大小。

下图展示了 image 组件的实际使用效果：

image 组件

# 4.13 image 组件的 mode 属性

image 组件的 mode 属性决定了图片的裁剪和缩放模式，常见的 mode 属性值有以下几种：

  • scaleToFill：不保持纵横比，缩放图片，使图片完全填充容器。
  • aspectFit：保持纵横比缩放图片，图片的长边完全显示在容器内。
  • aspectFill：保持纵横比缩放图片，图片的短边填满容器，可能部分内容被裁剪。

下图展示了常见的 mode 属性的效果：

image mode 属性

# 5. API

# 5.1 小程序 API 概述

微信小程序通过开放的 API 接口，为开发者提供了强大的功能调用能力。开发者可以通过这些 API 调用微信提供的各种功能，例如获取用户信息、调用设备功能（如相机、位置）、进行网络请求等。小程序 API 的灵活性极大地扩展了小程序的能力，使得开发者可以快速集成微信生态中的各种功能。

# 5.2 小程序 API 的 3 大分类

小程序中的 API 可以按功能大致分为以下三类：

  1. 界面 API：用于操作页面元素，处理用户界面的交互。例如，显示加载框、模态框、设置导航栏等。
  2. 设备 API：用于访问设备的功能，如获取地理位置、使用相机、访问通讯录、获取网络状态等。
  3. 网络 API：用于进行网络通信，例如发起 HTTP 请求、上传下载文件、WebSocket 连接等。

下图展示了小程序中 API 的主要分类及常见功能：

API 分类

  • 界面 API：例如 wx.showToast()，用于显示消息提示框。
  • 设备 API：例如 wx.getLocation()，用于获取用户的地理位置信息。
  • 网络 API：例如 wx.request()，用于发起 HTTP 请求，获取服务器数据。

# 5.3 常用 API 示例

  1. 界面 API 示例：显示消息提示框
wx.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
});
1
2
3
4
5
  1. 设备 API 示例：获取用户地理位置
wx.getLocation({
  type: 'wgs84',
  success(res) {
    console.log(res.latitude, res.longitude);
  }
});
1
2
3
4
5
6
  1. 网络 API 示例：发起网络请求
wx.request({
  url: 'https://example.com/data',
  success(res) {
    console.log(res.data);
  }
});
1
2
3
4
5
6

通过这些 API，开发者可以轻松实现丰富的功能和交互，增强用户体验。

# 6. 小程序的组件化与 API 的结合

通过小程序提供的组件和 API，开发者可以轻松构建出功能丰富的小程序。例如，在一个页面中，开发者可以通过按钮触发地理位置获取，并通过地图组件展示用户的当前位置；同时，通过网络请求从服务器获取数据并渲染在页面上。这样的组合使小程序能够提供接近原生应用的体验。

结论

通过理解小程序的宿主环境、通信模型、运行机制、组件系统和 API 功能，开发者能够充分利用微信提供的平台开发出高效、功能丰富的小程序。微信为开发者提供了强大的工具和灵活的框架，使得小程序开发不仅具有高效性，也能与微信生态无缝融合。

编辑此页 (opens new window)
上次更新: 2025/01/31, 00:08:39
小程序代码的构成
WXML 模板语法

← WXML 模板语法→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar