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

宿主环境

宿主环境简介

什么是宿主环境

宿主环境（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 组件的基本使用

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

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 组件的常用属性

常用的基础内容组件

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属性

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回调函数（如果提供了的话）。