小程序开发

一、小程序基础

1、小程序概述

小程序（Mini Program）是一种轻量级的应用程序，嵌入在更大的移动应用平台中，无需下载安装即可使用。它们通常被用来提供特定功能或服务，并与主应用程序的功能无缝集成。

以下是一些关键点：

嵌入平台：小程序依赖于宿主应用，例如微信、支付宝、百度等。这意味着用户必须先安装这些平台的应用才能使用小程序。
轻量级：小程序通常体积小、启动快，因为它们的资源和逻辑通常部分或完全存储在云端。这样可以减少用户的等待时间，提高用户体验。
即用即走：用户无需下载和安装小程序，只需通过扫描二维码、点击链接或搜索即可打开和使用。这种即用即走的特性使得小程序非常适合提供临时或快速的服务。
开发与技术栈：小程序的开发通常使用特定的技术栈。例如，微信小程序使用类似于前端开发的技术，如 WXML（类似于 HTML）、WXSS（类似于 CSS）、JavaScript 等。
功能和限制：小程序的功能范围通常有限制，无法访问宿主应用的某些原生功能，但可以使用平台提供的 API，比如获取用户信息、调用地理位置、支付等功能。
跨平台能力：不同平台的小程序开发框架和规范有所不同，因此开发者需要针对不同平台做适配或重新开发。

小程序的广泛应用场景包括电商、社交分享、工具服务、在线预约等。由于其便捷性和高用户转化率，小程序已成为许多企业数字化营销的重要工具之一。

2、创建小程序

创建微信小程序项目涉及几个步骤，从环境配置到项目创建和开发。

以下是详细的步骤：

1. 安装微信开发者工具

首先，您需要下载并安装微信开发者工具，这是开发微信小程序的官方工具。

前往微信公众平台开发者工具官网下载适合您操作系统的开发者工具。
安装完成后，打开开发者工具。

An image

2. 注册微信小程序账号

如果还没有小程序账号，需要注册一个微信小程序账号。

前往微信公众平台进行注册。
选择“小程序”类型，填写相关信息，完成注册和认证。

3. 创建一个新的小程序项目

在微信开发者工具中，您可以通过以下步骤创建一个新的小程序项目：

登录开发者工具：
- 打开微信开发者工具后，使用小程序账号扫码登录。
创建项目：

An image

点击“+ 创建小程序”按钮。
在弹出的窗口中，输入以下信息：
- AppID：在公众平台注册的小程序账号生成的 AppID。
- 项目名称：为您的小程序项目命名。
- 目录路径：选择一个本地文件夹来存放项目文件。
- 开发模式：一般选择“小程序”模式。
点击“确定”按钮。

选择模板：
- 开发者工具会提供一个默认的模板项目，您可以选择使用该模板，也可以选择空白项目来从头开始构建。

4. 项目结构概览

创建好项目后，您会看到以下主要文件和文件夹：

An image

app.js：小程序的逻辑文件，配置整个小程序的生命周期事件。
app.json：小程序的全局配置文件，定义页面路径、窗口表现等。
app.wxss：小程序的全局样式文件，用于定义通用样式。
pages/：页面目录，包含各个页面的文件夹，每个页面通常包含四个文件：.wxml（页面结构）、.wxss（页面样式）、.js（页面逻辑）、.json（页面配置）。

5. 启动开发

编写代码：根据您的需求，编辑各个页面的 .wxml、.wxss、.js 和 .json 文件。
实时预览：微信开发者工具提供了实时预览功能，您可以看到代码更改的实时效果。
调试：开发者工具内置调试器，可以帮助您检测和修复代码中的问题。

6. 上传和发布

上传代码：在开发者工具中，确认项目无误后，选择“上传”按钮，将代码上传到微信服务器。
提交审核：在微信公众平台后台提交小程序版本审核，审核通过后即可发布。

7. 管理和运营

数据分析：微信公众平台提供的数据分析工具，帮助您了解小程序的使用情况。
更新迭代：根据用户反馈和业务需求，不断优化和更新小程序。

通过以上步骤，您可以创建并启动一个微信小程序项目。

3、小程序的基本结构

微信小程序项目的基本组成结构由多个文件和目录构成，这些文件和目录协同工作，共同构成一个完整的小程序。

以下是微信小程序项目的基本组成结构及其主要功能：

1. 项目根目录

app.js：全局逻辑文件。定义了小程序的生命周期函数（如 onLaunch、onShow 等），以及全局数据或方法。
app.json：全局配置文件。配置小程序的页面路径、窗口样式、导航栏、底部 Tab 等信息。
app.wxss：全局样式文件。定义全局的样式规则，作用于整个小程序的页面。

2. pages/（页面目录）

每个页面通常对应一个独立的文件夹，文件夹的名称就是页面的路径名称。每个页面文件夹内包含以下四个文件：
- index.wxml：页面的结构文件，类似于 HTML，用于描述页面的结构和内容。
- index.wxss：页面的样式文件，类似于 CSS，用于描述页面的样式。
- index.js：页面的逻辑文件，类似于 JavaScript，包含页面的生命周期函数、事件处理函数、数据绑定等。
- index.json：页面的配置文件（可选），用于覆盖全局配置文件中的部分设置，如页面标题、背景颜色等。

3. 项目配置文件

project.config.json：项目配置文件，微信开发者工具使用的配置文件，定义了项目的基本信息、开发配置、代码压缩等选项。
sitemap.json：用于配置小程序页面的爬虫抓取行为，帮助微信平台识别哪些页面可以被抓取。

4. 自定义组件

如果项目中需要复用一些 UI 组件或逻辑，您可以在项目中创建自定义组件。自定义组件通常放在 components/ 目录下，每个组件也包含 .wxml、.wxss、.js、.json 四个文件。
component.wxml：组件的结构文件。
component.wxss：组件的样式文件。
component.js：组件的逻辑文件。
component.json：组件的配置文件，用于声明组件的属性、方法等。

5. utils/（工具类库）

utils/ 目录通常用于存放项目中的公共函数、工具类库等，便于在各个页面和组件中复用。例如，utils/util.js 中可以存放格式化日期、网络请求等通用方法。

6. 其他文件和目录

images/：存放项目中用到的图片资源。
data/：如果有一些静态数据或 JSON 文件，可以放在这个目录中。
logs/：有时项目会记录日志文件，可以放在这个目录中。

7. 分包（可选）

如果小程序项目较大，可以使用分包加载来提高加载速度。分包通常放在 subpackage/ 目录下，每个分包包含自己的页面和配置文件。

8. node_modules/（可选）

如果使用 npm 包管理工具来管理依赖库，node_modules/ 目录将存放这些依赖。

9. 第三方插件

plugin/：存放项目中使用的第三方插件文件，可以通过 plugin.json 文件配置插件。

10. 配置与开发工具

.eslintrc.js：ESLint 配置文件，用于规范代码格式和质量。
.gitignore：Git 忽略文件配置，指定哪些文件和目录不需要纳入版本控制。

通过以上结构，小程序项目的文件和逻辑被合理地组织和管理，使得开发和维护变得更加高效和规范。

4、小程序的页面组成

微信小程序的页面由以下四个主要部分组成，每个部分都有其特定的作用：

1. WXML（.wxml 文件）

作用：描述页面的结构和内容，类似于 HTML。在 WXML 中，开发者使用标签来定义页面的布局，并将数据绑定到页面元素上。

示例：

xml

<view>
  <text>{{message}}</text>
</view>

特点：支持数据绑定和条件渲染，可以动态地展示数据。

2. WXSS（.wxss 文件）

作用：定义页面的样式，类似于 CSS。通过 WXSS，开发者可以控制页面元素的外观，例如颜色、字体、布局等。

示例：

css

view {
  padding: 10px;
}
text {
  color: #ff0000;
}

特点：支持大部分 CSS 语法，提供了尺寸单位 rpx，可以根据屏幕尺寸自动适配。

3. JavaScript（.js 文件）

作用：处理页面的逻辑，包括数据处理、事件处理、与后端的交互等。开发者可以在这个文件中定义页面的生命周期函数、事件响应函数，以及与数据相关的操作。

示例：

javascript

Page({
  data: {
    message: 'Hello, World!'
  },
  onLoad: function() {
    console.log('Page loaded');
  }
});

特点：与 WXML 进行数据绑定，支持各种事件处理，如点击、滑动等。

4. JSON（.json 文件）

作用：用于配置页面的特定设置，例如页面的标题、导航栏颜色等。这个文件是可选的，如果不需要特殊配置，可以不创建该文件。

示例：

json

{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#ffffff"
}

特点：覆盖全局配置文件中的相关设置，只对当前页面生效。

组合示例

假设有一个页面 index，它的文件结构可能是：

index.wxml：定义页面布局，如文本、图片等。
index.wxss：定义页面元素的样式，如颜色、字体等。
index.js：处理页面的逻辑，如按钮点击、数据加载等。
index.json：配置页面的特定属性，如页面标题、导航栏颜色等。

这些部分共同构成了一个完整的小程序页面。通过合理使用它们，开发者可以创建具有丰富功能和良好用户体验的微信小程序页面。

5、WXML

WXML（WeiXin Markup Language）是微信小程序的标记语言，用于描述小程序页面的结构和内容。它的作用类似于网页开发中的 HTML，负责定义页面的布局和显示内容。WXML 通过标签的形式来组织页面元素，并支持数据绑定和条件渲染，使得页面内容能够动态更新。

WXML 的主要特点和功能

标签语法：
- WXML 使用与 HTML 类似的标签语法来描述页面结构。常用的标签包括 <view>（类似于 div）、<text>（类似于 span 或 p）、<image>（用于显示图片）等。
- 例如：
  xml
```
<view>
  <text>Hello, World!</text>
  <image src="/images/logo.png"></image>
</view>
```
数据绑定：
- WXML 支持数据绑定，可以将 JavaScript 文件中的数据动态绑定到页面元素上。使用双花括号来表示数据绑定。
- 例如：
  xml
```
<view>
  <text>{{message}}</text>
</view>
```
  在对应的 JavaScript 文件中，如果 message 的值是 "Hello, World!"，那么页面上会显示 Hello, World!。
条件渲染：
- WXML 支持条件渲染，可以根据条件决定是否显示某些页面元素。使用 wx:if 或 wx:elif 和 wx:else 指令来实现。
- 例如：
  xml
```
<view wx:if="{{isVisible}}">
  <text>这段文字只有在 isVisible 为 true 时才会显示。</text>
</view>
```
列表渲染：
- WXML 支持列表渲染，可以根据数据数组动态生成多个相同结构的元素。使用 wx:for 指令实现。
- 例如：
  xml
```
<view wx:for="{{items}}" wx:key="id">
  <text>{{item.name}}</text>
</view>
```
事件绑定：
- WXML 标签可以绑定事件处理函数，用于响应用户的交互行为，如点击、输入等。常用的事件包括 bindtap（点击）、bindinput（输入）等。
- 例如：
  xml
```
<button bindtap="handleTap">点击我</button>
```

模板复用：

WXML 支持模板功能，可以将重复使用的代码块定义为模板，方便在多个地方引用，提升代码复用性。

例如：

xml

<template name="itemTemplate">
  <view>
    <text>{{name}}</text>
  </view>
</template>

<import src="path/to/template.wxml"/>
<template is="itemTemplate" data="{{...itemData}}"/>

总结

WXML 是微信小程序页面开发的核心部分，通过与 WXSS（样式）和 JavaScript（逻辑）文件的结合，开发者可以创建结构清晰、功能丰富的小程序页面。

6、WXSS

WXSS（WeiXin Style Sheets）是微信小程序的样式语言，用于描述小程序页面的视觉表现。它的作用类似于网页开发中的 CSS，主要负责控制页面元素的样式，包括布局、颜色、字体、大小等。

WXSS 的主要特点和功能：

基本语法：

WXSS 的语法与 CSS 基本一致，可以使用选择器、属性和值来定义元素的样式。

例如：

css

view {
  margin: 10px;
  padding: 20px;
  background-color: #f0f0f0;
}

text {
  color: #333333;
  font-size: 16px;
}

尺寸单位：
- WXSS 支持所有的 CSS 尺寸单位，如 px、em、rem，还增加了一个特有的尺寸单位 rpx（responsive pixel，响应式像素）。
- rpx 可以根据屏幕宽度进行自适应，750 rpx 等于设备屏幕宽度，对于不同设备的屏幕，rpx 会自动转换成相应的 px 值。
- 例如：
  css
```
view {
  width: 100rpx;
  height: 200rpx;
}
```
样式继承与层叠：
- WXSS 继承了 CSS 的样式继承和层叠规则，样式可以通过继承从父级元素传递到子级元素，同时样式可以层叠应用，后定义的样式会覆盖前面定义的相同属性。
- 例如：
  css
```
text {
  color: #000000;
}

.highlight {
  color: #ff0000;
}
```
  当 <text> 元素同时具有 highlight 类时，文字颜色会变为红色。
全局与局部样式：
- 小程序的全局样式通常定义在 app.wxss 文件中，影响整个小程序的所有页面。
- 每个页面也可以有自己独立的 .wxss 文件，用于定义该页面特有的样式。
选择器支持：
- WXSS 支持常见的选择器，如类选择器、ID 选择器、标签选择器、后代选择器、属性选择器等。
- 例如：
  css
```
#header {
  background-color: #ff5722;
}

.container .content {
  margin: 10px;
}
```
样式变量（基础库 2.10.0 及以上支持）：
- WXSS 支持使用样式变量，可以通过 @ 符号定义变量，然后在样式中使用。样式变量使得样式的管理更加灵活和方便。
- 例如：
  css
```
@primary-color: #1c92d2;

button {
  background-color: @primary-color;
  color: #ffffff;
}
```

WXSS 使用场景

布局和定位：控制页面元素的布局方式，如使用 flex 布局、设置边距和内边距等。
颜色和字体：定义页面元素的颜色、字体、大小、行高等样式。
响应式设计：使用 rpx 单位，确保页面在不同设备上的显示效果一致。
视觉层级：通过 z-index、透明度、阴影等属性，控制元素的视觉层级和表现。

总结

WXSS 是微信小程序开发中至关重要的部分，帮助开发者定义和管理页面的视觉样式。通过 WXSS，开发者可以创建出具有一致性、美观性和响应性的用户界面。

7、常见的组件

在微信小程序中，常见的组件可以分为几大类，包括视图容器组件、基础内容组件、表单组件、导航组件、媒体组件等。以下是一些常见的微信小程序组件及其作用：

1. 视图容器组件

<view>：基本的容器组件，用于布局和包裹其他组件，相当于 HTML 中的 <div>。
<scroll-view>：可滚动视图区域，用于显示可滚动的内容。
<swiper>：滑块视图容器，用于实现轮播图效果。
<movable-view> 和 <movable-area>：可移动的视图容器，通常用于实现拖拽功能。

2. 基础内容组件

<text>：文本组件，用于显示文本内容，类似于 HTML 中的 <span> 或 <p>。
<icon>：图标组件，用于显示内置图标或自定义图标。
<progress>：进度条组件，用于显示任务或操作的进度。

3. 表单组件

<button>：按钮组件，用于触发事件或提交表单。
<input>：输入框组件，用于单行文本输入，如用户名、密码等。
<textarea>：多行输入框组件，用于输入长文本内容。
<checkbox> 和 <checkbox-group>：复选框组件，用于在一组选项中进行多选。
<radio> 和 <radio-group>：单选按钮组件，用于在一组选项中进行单选。
<switch>：开关组件，用于表示二选一的操作，如开/关、是/否等。
<picker>：选择器组件，用于从列表中选择单个或多个值（日期、时间、地区等）。
<slider>：滑块组件，用于选择连续的数值范围。

4. 导航组件

<navigator>：导航组件，用于跳转到其他页面，类似于 HTML 中的 <a> 标签。
<functional-page-navigator>：功能页导航组件，用于导航到小程序的功能页（如客服会话、用户反馈等）。

5. 媒体组件

<image>：图片组件，用于显示图片内容。
<video>：视频组件，用于播放视频。
<audio>：音频组件，用于播放音频内容。
<camera>：相机组件，用于调用设备的相机进行拍照或录像。
<live-player>：直播播放器组件，用于播放直播内容。
<live-pusher>：直播推流组件，用于推送直播内容。

6. 地图组件

<map>：地图组件，用于显示地图及标注、路线等功能。

7. 画布组件

<canvas>：画布组件，用于绘制图形或其他复杂内容。

8. 开放能力组件

<open-data>：开放数据组件，用于展示用户信息等开放数据（如用户昵称、头像等）。
<web-view>：内嵌网页组件，用于展示外部网页内容。
<ad>：广告组件，用于显示广告内容。
<official-account>：公众号组件，用于嵌入微信公众号的关注按钮。

9. 其他常见组件

<rich-text>：富文本组件，用于展示富文本内容（支持 HTML 标签）。
<picker-view>：滚动选择器视图，用于实现自定义滚动选择效果。

这些组件可以帮助开发者构建功能丰富、界面友好的微信小程序。通过合理组合和使用这些组件，开发者可以满足大多数的 UI 和交互需求。

二、小程序进阶

1、页面导航

在微信小程序中，页面之间的导航跳转可以通过以下几种方式实现。这些方式主要依赖于微信小程序提供的路由功能。

1. 使用 `<navigator>` 组件

<navigator> 组件相当于 HTML 中的 <a> 标签，常用于页面之间的简单跳转。

wxml

<navigator url="/pages/target/target">跳转到目标页面</navigator>

url 属性指定目标页面的路径。路径可以是相对路径或绝对路径。
通过点击该组件，小程序会自动跳转到指定的页面。

2. 使用 JavaScript 的 API 实现跳转

微信小程序提供了多个 JavaScript API 用于实现页面跳转，每种方式适用于不同的场景。

1. wx.navigateTo() - 普通跳转

wx.navigateTo() 用于从一个页面跳转到另一个页面，跳转后的页面会被压入栈中，用户可以使用页面左上角的返回按钮返回上一页。

javascript

wx.navigateTo({
  url: '/pages/target/target'
});

页面栈最多保留 10 个页面，当栈满时，新页面会替换掉栈底的页面。

2. wx.redirectTo() - 重定向跳转

wx.redirectTo() 用于跳转到新页面，并关闭当前页面。新页面不会保留在页面栈中，因此无法返回上一页。

javascript

wx.redirectTo({
  url: '/pages/target/target'
});

适用于不需要返回的页面跳转，比如登录后跳转到主页面。

3. wx.switchTab() - Tab 切换

wx.switchTab() 用于跳转到一个 tabBar 页面，并关闭其他所有非 tabBar 页面。

javascript

wx.switchTab({
  url: '/pages/home/home'
});

这个方法只能跳转到已经在 app.json 中配置为 tabBar 的页面。

4. wx.reLaunch() - 重启跳转

wx.reLaunch() 用于关闭所有页面，并跳转到一个新页面。

javascript

wx.reLaunch({
  url: '/pages/target/target'
});

适用于一些需要完全重置应用状态的场景，比如用户登出后回到登录页面。

5. wx.navigateBack() - 返回上一页

wx.navigateBack() 用于关闭当前页面，返回上一页或多页。这个方法主要用于用户操作后回到上一个页面。

javascript

wx.navigateBack({
  delta: 1  // 返回上一级
});

delta 参数指定要返回的页面层级，默认为 1。

3. 自定义导航逻辑

可以在 JavaScript 中结合业务逻辑，实现更复杂的导航操作。例如，根据用户的状态决定跳转的目标页面。

javascript

if (userLoggedIn) {
  wx.navigateTo({
    url: '/pages/dashboard/dashboard'
  });
} else {
  wx.redirectTo({
    url: '/pages/login/login'
  });
}

4. 页面路径的注意事项

路径格式：路径可以是相对路径或绝对路径。相对路径是相对于当前页面的，绝对路径是从根目录开始的路径。

传递参数：在页面跳转时可以通过 URL 传递参数，目标页面可以通过 onLoad 生命周期函数中的 options 参数获取这些参数。

javascript

wx.navigateTo({
  url: '/pages/target/target?id=123&name=John'
});

在目标页面：

javascript

Page({
  onLoad: function(options) {
    console.log(options.id); // 123
    console.log(options.name); // John
  }
});

总结

微信小程序提供了多种页面跳转方式，可以根据不同的业务需求选择合适的跳转方法。无论是普通页面跳转、tabBar 页面切换还是页面重定向，都可以通过简单的 API 调用来实现。这些功能让开发者能够灵活地管理页面之间的导航。

2、页面事件

在微信小程序中，实现下拉刷新和上拉触底功能可以增强用户的交互体验，特别是当页面需要加载更多内容或更新数据时。以下是如何实现这两种功能的详细步骤：

一、下拉刷新功能

1. 开启下拉刷新

要使用下拉刷新功能，首先需要在页面的配置文件（.json）中开启 enablePullDownRefresh 选项。

在页面的 JSON 配置文件中开启：

json

{
  "enablePullDownRefresh": true
}

如果想在整个小程序中开启，可以在 app.json 中进行全局配置：

json

{
  "window": {
    "enablePullDownRefresh": true
  }
}

2. 监听下拉刷新事件

在页面的逻辑文件（.js）中，通过 onPullDownRefresh 方法监听用户下拉刷新事件。

示例：

javascript

Page({
  onLoad: function() {
    // 页面加载时，初始化数据
    this.loadData();
  },

  onPullDownRefresh: function() {
    console.log('用户触发下拉刷新');

    // 重新加载数据
    this.setData({
      dataList: [],  // 清空现有数据
      page: 1        // 重置分页
    });
    this.loadData();

    // 停止下拉刷新
    wx.stopPullDownRefresh();
  },

  loadData: function() {
    // 模拟请求数据
    const newItems = Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`);
    this.setData({
      dataList: newItems
    });
  }
});

3. 停止下拉刷新

在数据加载完毕后，调用 wx.stopPullDownRefresh() 来停止下拉刷新动画。这个方法非常重要，因为如果不调用，刷新动画将会持续，影响用户体验。

二、上拉触底功能

1. 页面滚动

确保页面内容高度超过屏幕高度，使页面可以滚动。如果页面高度不足，上拉触底事件不会触发。

2. 监听上拉触底事件

通过 onReachBottom 方法监听上拉触底事件。当用户滚动到页面底部时，该方法会被调用。

示例：

javascript

Page({
  data: {
    dataList: [],
    page: 1
  },

  onLoad: function() {
    // 初始化加载数据
    this.loadData();
  },

  onReachBottom: function() {
    console.log('用户触发上拉触底');
    // 加载更多数据
    this.loadData();
  },

  loadData: function() {
    // 模拟请求数据
    const newItems = Array.from({ length: 10 }, (_, i) => `Item ${i + 1 + (this.data.page - 1) * 10}`);
    this.setData({
      dataList: [...this.data.dataList, ...newItems],
      page: this.data.page + 1
    });
  }
});

3. 数据加载

在 onReachBottom 方法中，通过加载更多数据并更新 dataList 数据源，实现“加载更多”的功能。

三、注意事项

防止重复加载：在实现上拉触底时，最好设置一个“加载中”状态，以防止用户在短时间内多次触发上拉触底事件，导致重复加载。
优化体验：在下拉刷新或上拉加载时，可以使用 wx.showLoading 显示加载动画，提升用户体验。

通过上述步骤，你可以轻松地在微信小程序中实现下拉刷新和上拉触底功能，从而为用户提供更流畅的交互体验。

3、生命周期函数

在微信小程序中，生命周期函数是指页面或组件从创建到销毁的不同阶段，开发者可以在这些阶段中插入自定义逻辑来控制页面或组件的行为。

页面生命周期

微信小程序的页面有以下几个主要的生命周期函数：

onLoad(options)：
- 触发时机：页面加载时触发。
- 用途：通常用于获取页面初始化数据或参数。
- 示例：
  javascript
```
Page({
  onLoad: function(options) {
    // 页面初始化
    console.log(options);
  }
});
```
onShow()：
- 触发时机：页面显示时触发（每次打开页面或返回页面时）。
- 用途：可以用来刷新数据或页面状态。
- 示例：
  javascript
```
Page({
  onShow: function() {
    // 页面显示
    console.log('页面显示');
  }
});
```
onReady()：
- 触发时机：页面初次渲染完成时触发。
- 用途：常用于在页面完全呈现后执行一些操作，如动画、获取页面元素等。
- 示例：
  javascript
```
Page({
  onReady: function() {
    // 页面初次渲染完成
    console.log('页面渲染完成');
  }
});
```
onHide()：
- 触发时机：页面隐藏时触发（用户跳转到其他页面或小程序被后台运行时）。
- 用途：可以用来保存数据或停止某些操作（如计时器）。
- 示例：
  javascript
```
Page({
  onHide: function() {
    // 页面隐藏
    console.log('页面隐藏');
  }
});
```
onUnload()：
- 触发时机：页面卸载时触发（如用户关闭页面或跳转到其他页面）。
- 用途：常用于清理工作，如取消网络请求或清除定时器。
- 示例：
  javascript
```
Page({
  onUnload: function() {
    // 页面卸载
    console.log('页面卸载');
  }
});
```

组件生命周期

对于自定义组件，微信小程序也提供了一些特定的生命周期函数：

created()：
- 触发时机：组件实例刚刚被创建，还不能进行DOM操作。
- 用途：可以用来初始化组件内部的数据。
attached()：
- 触发时机：组件实例进入页面节点树时触发，可以操作DOM。
- 用途：通常用于获取初始数据或绑定事件。
ready()：
- 触发时机：组件布局完成，可以获取节点信息。
- 用途：用于处理需要操作完成布局的逻辑。
moved()：
- 触发时机：组件实例被移动到页面节点树的另一个位置。
- 用途：可以用来处理移动后的操作。
detached()：
- 触发时机：组件实例从页面节点树中移除。
- 用途：通常用于清理工作，如解除事件绑定。

如何使用

在使用生命周期函数时，你只需要在页面或组件的配置对象中定义对应的函数即可。通过这些生命周期函数，你可以更好地控制页面或组件的行为，例如初始化数据、清理资源、更新UI等。

示例

以下是一个页面生命周期的简单示例：

javascript

Page({
  onLoad: function() {
    console.log('页面加载');
  },
  onShow: function() {
    console.log('页面显示');
  },
  onReady: function() {
    console.log('页面渲染完成');
  },
  onHide: function() {
    console.log('页面隐藏');
  },
  onUnload: function() {
    console.log('页面卸载');
  }
});

通过理解和使用这些生命周期函数，可以更好地管理小程序的运行过程，提升开发效率。

4、全局数据共享

在微信小程序中，全局数据共享是指在不同页面或组件之间共享数据，使得数据可以在整个小程序的生命周期中被访问和修改。微信小程序提供了几种常见的方式来实现全局数据共享：

一、使用全局变量（`App` 对象）

微信小程序的 App 对象可以用于存储全局数据。在 app.js 文件中，可以定义和初始化全局变量，然后在其他页面或组件中通过 getApp() 方法来访问这些变量。

1. 定义全局变量

在 app.js 中：

javascript

App({
  globalData: {
    userInfo: null,
    theme: 'light'
  },

  onLaunch: function() {
    // 初始化操作
  }
});

2. 访问全局变量

在其他页面或组件中，通过 getApp() 获取全局数据：

javascript

Page({
  onLoad: function() {
    const app = getApp();
    console.log(app.globalData.userInfo); // 访问全局变量

    // 修改全局变量
    app.globalData.theme = 'dark';
  }
});

二、使用小程序的页面传参

页面跳转时，可以通过 wx.navigateTo 或 wx.redirectTo 传递数据到目标页面。这种方式适合在页面之间进行数据传递，但不适用于跨页面的全局数据共享。

1. 传递数据

在当前页面中跳转时传递数据：

javascript

wx.navigateTo({
  url: '/pages/target/target?theme=dark&user=John'
});

2. 接收数据

在目标页面中通过 onLoad 获取传递的数据：

javascript

Page({
  onLoad: function(options) {
    console.log(options.theme); // 获取传递的数据
    console.log(options.user);
  }
});

三、使用数据缓存（`wx.setStorage` 和 `wx.getStorage`）

微信小程序提供了数据缓存机制，可以将数据存储在本地，并在整个小程序生命周期内进行访问。这种方式适合存储用户信息、配置信息等全局性数据。

1. 存储数据

将数据存储在本地缓存中：

javascript

wx.setStorage({
  key: 'userInfo',
  data: {
    name: 'John',
    age: 30
  }
});

2. 获取数据

在其他页面或组件中获取存储的数据：

javascript

wx.getStorage({
  key: 'userInfo',
  success: function(res) {
    console.log(res.data); // 获取到的数据
  }
});

3. 删除数据

可以使用 wx.removeStorage 或 wx.clearStorage 来删除特定的数据或清空整个缓存：

javascript

wx.removeStorage({
  key: 'userInfo'
});

wx.clearStorage(); // 清空所有缓存数据

四、使用状态管理工具

在复杂的小程序中，特别是当应用需要管理大量全局数据时，可以使用第三方状态管理工具，如 MobX 或小程序原生的 Mini Store（微信小程序团队提供的轻量级状态管理库）来管理全局状态。

1. 使用 Mini Store

Mini Store 是微信小程序官方提供的状态管理工具，适合用来管理全局状态。

安装 Mini Store：

bash

npm install @wxa/store

定义 Store：

javascript

// store.js
import { createStoreBindings } from '@wxa/store';

const store = createStoreBindings({
  state: {
    userInfo: null,
    theme: 'light'
  },
  actions: {
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
    },
    setTheme(state, theme) {
      state.theme = theme;
    }
  }
});

export default store;

在页面中使用 Store：

javascript

import store from '../../store';

Page({
  data: store.state,

  onLoad: function() {
    store.actions.setUserInfo({ name: 'John', age: 30 });
  },

  onShow: function() {
    console.log(this.data.userInfo); // 访问 Store 中的数据
  }
});

通过这种方式，你可以更有效地管理和共享全局数据，特别是在大型小程序中，使用状态管理工具可以提高代码的可维护性和数据的一致性。

总结

微信小程序提供了多种方式来实现全局数据共享，包括使用全局变量（App 对象）、页面传参、数据缓存（wx.setStorage 和 wx.getStorage）、以及状态管理工具。根据具体应用场景，你可以选择最合适的方式来管理和共享全局数据。

5、网络请求

在微信小程序中，进行网络请求通常是通过 wx.request 方法实现的。这个方法类似于浏览器中的 XMLHttpRequest 或 fetch API，用于与服务器通信，发送 HTTP 请求，并处理响应数据。

一、基本使用方法

1. 发起网络请求wx.request 的基本用法如下：

javascript

wx.request({
  url: 'https://api.example.com/data', // 请求的URL地址
  method: 'GET', // 请求方法（GET、POST、PUT、DELETE等）
  data: { // 发送给服务器的数据
    key: 'value'
  },
  header: { // 请求头信息
    'Content-Type': 'application/json'
  },
  success: function(res) {
    // 请求成功的回调函数
    console.log('请求成功', res.data);
  },
  fail: function(err) {
    // 请求失败的回调函数
    console.log('请求失败', err);
  },
  complete: function() {
    // 请求完成的回调函数（成功或失败都会执行）
    console.log('请求完成');
  }
});

2. 参数说明

url: 请求的服务器地址。
method: HTTP 请求方法，默认为 GET。可以是 GET, POST, PUT, DELETE 等。
data: 请求时携带的参数，可以是对象或字符串。
header: 设置请求头信息，通常用于指定内容类型或身份验证。
success: 请求成功时的回调函数，参数 res 包含服务器返回的数据。
fail: 请求失败时的回调函数，通常用于处理网络错误等情况。
complete: 请求完成时的回调函数，无论请求成功或失败都会调用。

二、处理异步数据

由于 wx.request 是异步的，因此通常需要在回调函数中处理服务器返回的数据。例如：

javascript

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    // 在这里处理返回的数据
    console.log('服务器返回的数据:', res.data);
    // 例如，将数据设置到页面的数据源中
    this.setData({
      items: res.data.items
    });
  }.bind(this), // 需要绑定this指向
  fail: function(err) {
    console.error('请求失败:', err);
  }
});

三、常见的用例

1. GET 请求 获取服务器上的数据，通常用于请求静态内容或查询数据：

javascript

wx.request({
  url: 'https://api.example.com/items',
  method: 'GET',
  success: function(res) {
    this.setData({
      items: res.data
    });
  }.bind(this)
});

2. POST 请求 发送数据到服务器，通常用于提交表单或上传数据：

javascript

wx.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: {
    name: 'John',
    age: 30
  },
  success: function(res) {
    console.log('提交成功:', res.data);
  }
});

3. 设置请求头 例如，如果需要发送带有身份验证信息的请求，可以设置请求头：

javascript

wx.request({
  url: 'https://api.example.com/secure-data',
  method: 'GET',
  header: {
    'Authorization': 'Bearer token_value'
  },
  success: function(res) {
    console.log('安全数据:', res.data);
  }
});

四、处理请求失败

网络请求可能会因为网络问题、服务器错误或其他原因失败。可以在 fail 回调中处理这些情况：

javascript

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log('请求成功:', res.data);
  },
  fail: function(err) {
    console.error('请求失败:', err);
    wx.showToast({
      title: '网络错误，请稍后重试',
      icon: 'none'
    });
  }
});

五、使用 Promise 进行封装

为了更好地处理异步请求，可以将 wx.request 封装成 Promise：

javascript

function requestPromise(url, method, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: resolve,
      fail: reject
    });
  });
}

// 使用示例
requestPromise('https://api.example.com/data', 'GET')
  .then(res => {
    console.log('请求成功:', res.data);
  })
  .catch(err => {
    console.error('请求失败:', err);
  });

通过这些步骤和方法，你可以在微信小程序中方便地进行网络请求，并处理服务器返回的数据，创建功能丰富的小程序应用。

6、分包

微信小程序的分包加载是指将小程序的代码和资源划分为多个包（即分包），并按需加载这些分包的机制。通过分包加载，可以降低小程序的首屏加载时间，优化用户体验，特别是当小程序体积较大时，分包能够显著提升性能。

分包加载的工作原理

主包与分包：微信小程序的分包结构通常包括一个主包和若干个分包。主包在用户首次进入小程序时加载，它通常包含一些基础的页面和功能。分包则包含其他的页面和功能，并在用户访问相关内容时才会被加载。

分包配置：在小程序的 app.json 配置文件中，可以通过 subPackages 字段来配置分包。你可以指定分包的路径以及分包中包含的页面。

json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [
    {
      "root": "pages/packageA/",
      "pages": [
        "pages/cat/cat"
      ]
    },
    {
      "root": "pages/packageB/",
      "pages": [
        "pages/dog/dog"
      ]
    }
  ]
}

在上述配置中，packageA 和 packageB 就是分包。

分包预加载：为了优化用户体验，可以通过 preloadRule 配置对分包进行预加载。这样当用户即将访问某个页面时，相关的分包会提前在后台加载，从而缩短用户等待时间。
json
```
{
  "preloadRule": {
    "pages/index/index": {
      "network": "wifi",
      "packages": ["packageA"]
    }
  }
}
```
分包大小限制：微信对分包的大小有一定限制。当前主包不能超过 2MB，每个分包不能超过 2MB，总体大小不能超过 20MB。

分包加载的优点

降低首屏加载时间：通过分包，用户只需要加载主包中的内容，减少了首次加载的数据量，提升了加载速度。
提升用户体验：按需加载减少了不必要的网络请求和加载时间，使得小程序的使用更加流畅。
便于大规模应用的维护：将功能模块化，有助于团队分工、代码管理和维护。

适用场景

小程序内容较为丰富、页面众多时。
对首屏加载速度有较高要求的项目。
希望提高小程序的性能和用户体验。

了解并应用分包机制，能够帮助前端开发者有效优化微信小程序的性能，提升用户体验。

三、uni-app混合开发

1、uni-app概述

uni-app 是由 DCloud 开发的一款前端框架，它可以让开发者使用 Vue.js 语法来构建跨平台的应用。uni-app 的核心优势在于“一次开发，多端运行”，即开发者只需编写一套代码，就可以在多个平台上运行，包括：

An Image

小程序：如微信小程序、支付宝小程序、百度小程序、字节跳动小程序等。
H5：可以生成基于 Web 的移动端网页应用。
App：通过打包可以生成 iOS 和 Android 原生应用。
桌面应用：可以通过适配生成桌面端应用。

uni-app 的特点

跨平台支持：uni-app 支持几乎所有的主流移动端平台和部分桌面平台，通过条件编译的方式，开发者可以根据不同平台的特点进行差异化开发。
基于 Vue.js：uni-app 使用 Vue.js 语法，开发者可以复用已有的 Vue.js 知识进行开发。它还支持 Vue 2 和 Vue 3，提供类似于 Vue 的组件化开发模式。
强大的生态：uni-app 拥有丰富的插件市场，开发者可以方便地使用各种插件扩展应用功能。此外，uni-app 还支持各类第三方库的引入，如 Axios、Vuex、Pinia 等。
高效的开发工具：uni-app 提供了强大的开发工具，如 HBuilderX，这是一款专为 uni-app 开发优化的集成开发环境（IDE），支持多端调试、热更新、真机调试等功能。
优秀的性能：uni-app 的运行效率较高，特别是在小程序和 App 端，能够接近原生应用的性能表现。

典型应用场景

多端项目开发：需要在多个平台上运行的项目，如企业级应用、小程序商城、内容平台等。
移动优先的应用：需要开发移动端 App 和 Web 的项目，uni-app 提供了统一的代码管理和发布流程。
已有 Vue.js 项目扩展到多端：已有 Vue.js 项目可以通过 uni-app 迁移扩展到其他平台。

总的来说，uni-app 是一个强大且灵活的框架，能够帮助开发者高效地构建多端应用，同时兼顾性能和开发效率。

2、基础语法

uni-app 基于 Vue.js 语法，具有与 Vue.js 类似的开发方式，同时它还扩展了一些特定的语法和功能。以下是 uni-app 开发中常用的基础语法和概念：

1. 基本结构

uni-app 中的页面文件通常以 .vue 结尾，采用 Vue 组件的格式。
每个 .vue 文件通常包括三个部分：<template>、<script> 和 <style>。

vue

<template>
  <view class="container">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, uni-app!"
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

2. 模板语法

数据绑定：使用 {{ }} 进行数据绑定，将 JavaScript 表达式插入 HTML。
指令：uni-app 支持 Vue.js 的大部分指令，如 v-if、v-else、v-for、v-bind、v-on 等。

条件渲染：

vue

<view v-if="isShow">显示的内容</view>
<view v-else>隐藏的内容</view>

列表渲染：

vue

<view v-for="(item, index) in items" :key="index">
  {{ item }}
</view>

3. 组件

uni-app 提供了大量内置组件，例如 <view>、<text>、<button> 等，类似于 HTML 标签，但专门为跨平台设计。
自定义组件可以通过 components 属性引入并使用。

vue

<template>
  <my-component />
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}
</script>

4. 生命周期

uni-app 的生命周期函数类似于 Vue.js，但它扩展了适用于小程序和 App 的生命周期钩子，如 onLaunch、onShow、onHide 等。

javascript

export default {
  onLaunch() {
    console.log('App launched');
  },
  onShow() {
    console.log('App showed');
  }
}

5. 事件处理

通过 v-on 或简写 @ 绑定事件，处理用户交互。

vue

<view @click="handleClick">点击我</view>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
}
</script>

6. 样式

uni-app 支持标准 CSS，也支持预处理器如 LESS、SASS 等。不同平台可能会有样式差异，需要注意兼容性。
uni-app 提供了全局样式文件 uni.scss，可以定义全局共享的样式。

scss

// uni.scss
$primary-color: #007aff;

.button {
  background-color: $primary-color;
}

7. 条件编译

通过条件编译语法，可以针对不同的平台编写不同的代码。

javascript

// #ifdef MP-WEIXIN
console.log('这是微信小程序代码');
// #endif

// #ifdef H5
console.log('这是H5平台代码');
// #endif

8. API 调用

uni-app 提供了丰富的 API 用于调用原生功能，如网络请求、文件操作、设备信息获取等。

javascript

uni.request({
  url: 'https://api.example.com/data',
  success(res) {
    console.log(res.data);
  }
});

9. 路由

页面跳转和导航通过 uni.navigateTo、uni.redirectTo、uni.switchTab 等 API 实现。

javascript

uni.navigateTo({
  url: '/pages/detail/detail?id=123'
});

10. 全局配置

manifest.json：定义应用的全局配置，如名称、图标、版本、权限等。
pages.json：管理页面的路由和导航栏配置。
main.js：应用入口文件，进行全局插件注册和配置。

这些是 uni-app 的基本语法和使用方式。掌握这些基础知识，可以帮助你高效地开发跨平台应用。

3、uni-app开发小程序

使用 uni-app 开发微信小程序的流程主要包括以下几个步骤：

1. 安装开发环境

安装 HBuilderX：HBuilderX 是 DCloud 提供的一款集成开发环境，专门为 uni-app 开发进行了优化。可以在 HBuilderX 官网下载并安装最新版本。
安装微信开发者工具：微信小程序需要使用微信开发者工具来调试和预览，可以在微信小程序官网下载并安装。

2. 创建 uni-app 项目

An Image

启动 HBuilderX：打开 HBuilderX 后，选择“文件” -> “新建” -> “项目”。
选择 uni-app 模板：在新建项目窗口中，选择“uni-app”项目模板，然后填写项目名称和存储路径。
选择运行平台：在项目创建时，可以选择默认的运行平台，选择“微信小程序”。

3. 项目结构

pages：项目的页面文件存放在 pages 目录下，每个页面对应一个文件夹，里面包含 .vue 文件。
main.js：项目入口文件，配置全局的应用级生命周期函数。
manifest.json：项目配置文件，包含应用的基本信息，如名称、版本、AppID 等。
pages.json：页面路由配置文件，管理项目中页面的路径及导航选项。
uni.scss：全局样式文件，管理全局的 CSS 样式。

4. 编写代码

创建页面：在 pages 目录下创建新页面文件夹和 .vue 文件，如 pages/index/index.vue。

配置路由：在 pages.json 中添加新页面的路由配置，如：

json

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页"
  }
}

编写页面代码：使用 Vue.js 语法编写页面逻辑，uni-app 提供了大量组件和 API，适用于微信小程序环境。

5. 调试

运行到微信小程序：在 HBuilderX 中，点击运行按钮，选择“微信小程序”。
微信开发者工具调试：HBuilderX 会自动将项目打包并打开微信开发者工具，在开发者工具中可以预览和调试小程序。你可以通过在开发者工具中查看 Console、Network 等信息来调试应用。

6. 发布

检查代码：确保没有错误和不兼容的代码，尤其是特定平台的 API。
上传代码：在微信开发者工具中，点击“上传”按钮，将代码上传到微信公众平台。
提交审核：在微信公众平台上登录小程序管理后台，选择版本管理，提交新版本并等待审核。
发布小程序：审核通过后，可以将小程序正式发布上线。

7. 优化与维护

优化性能：通过懒加载、图片优化等手段提高小程序的加载和运行速度。
版本更新：根据用户反馈和新需求，定期更新和维护小程序的功能和性能。

通过这些步骤，你可以使用 uni-app 高效地开发和发布微信小程序，享受跨平台开发的优势，同时兼顾微信小程序的特定需求。

小程序开发 ​

一、小程序基础 ​

1、小程序概述 ​

2、创建小程序 ​

1. 安装微信开发者工具 ​

2. 注册微信小程序账号 ​

3. 创建一个新的小程序项目 ​

4. 项目结构概览 ​

5. 启动开发 ​

6. 上传和发布 ​

7. 管理和运营 ​

3、小程序的基本结构 ​

1. 项目根目录 ​

2. pages/（页面目录） ​

3. 项目配置文件 ​

4. 自定义组件 ​

5. utils/（工具类库） ​

6. 其他文件和目录 ​

7. 分包（可选） ​

8. node_modules/（可选） ​

9. 第三方插件 ​

10. 配置与开发工具 ​

4、小程序的页面组成 ​

1. WXML（.wxml 文件） ​

2. WXSS（.wxss 文件） ​

3. JavaScript（.js 文件） ​

4. JSON（.json 文件） ​

组合示例 ​

5、WXML ​

WXML 的主要特点和功能 ​

总结 ​

6、WXSS ​

WXSS 的主要特点和功能： ​

WXSS 使用场景 ​

总结 ​

7、常见的组件 ​

1. 视图容器组件 ​

2. 基础内容组件 ​

3. 表单组件 ​

4. 导航组件 ​

5. 媒体组件 ​

6. 地图组件 ​

7. 画布组件 ​

8. 开放能力组件 ​

9. 其他常见组件 ​

二、小程序进阶 ​

1、页面导航 ​

1. 使用 <navigator> 组件 ​

2. 使用 JavaScript 的 API 实现跳转 ​

3. 自定义导航逻辑 ​

4. 页面路径的注意事项 ​

总结 ​

2、页面事件 ​

一、下拉刷新功能 ​

二、上拉触底功能 ​

三、注意事项 ​

3、生命周期函数 ​

页面生命周期 ​

组件生命周期 ​

如何使用 ​

示例 ​

4、全局数据共享 ​

一、使用全局变量（App 对象） ​

二、使用小程序的页面传参 ​

三、使用数据缓存（wx.setStorage 和 wx.getStorage） ​

四、使用状态管理工具 ​

总结 ​

5、网络请求 ​

一、基本使用方法 ​

二、处理异步数据 ​

三、常见的用例 ​

四、处理请求失败 ​

五、使用 Promise 进行封装 ​

6、分包 ​

分包加载的工作原理 ​

分包加载的优点 ​

适用场景 ​

三、uni-app混合开发 ​

1、uni-app概述 ​

uni-app 的特点 ​

小程序开发

一、小程序基础

1、小程序概述

2、创建小程序

1. 安装微信开发者工具

2. 注册微信小程序账号

3. 创建一个新的小程序项目

4. 项目结构概览

5. 启动开发

6. 上传和发布

7. 管理和运营

3、小程序的基本结构

1. 项目根目录

2. pages/（页面目录）

3. 项目配置文件

4. 自定义组件

5. utils/（工具类库）

6. 其他文件和目录

7. 分包（可选）

8. node_modules/（可选）

9. 第三方插件

10. 配置与开发工具

4、小程序的页面组成

1. WXML（.wxml 文件）

2. WXSS（.wxss 文件）

3. JavaScript（.js 文件）

4. JSON（.json 文件）

组合示例

5、WXML

WXML 的主要特点和功能

总结

6、WXSS

WXSS 的主要特点和功能：

WXSS 使用场景

总结

7、常见的组件

1. 视图容器组件

2. 基础内容组件

3. 表单组件

4. 导航组件

5. 媒体组件

6. 地图组件

7. 画布组件

8. 开放能力组件

9. 其他常见组件

二、小程序进阶

1、页面导航

1. 使用 `<navigator>` 组件

2. 使用 JavaScript 的 API 实现跳转

3. 自定义导航逻辑

4. 页面路径的注意事项

总结

2、页面事件

一、下拉刷新功能

二、上拉触底功能

三、注意事项

3、生命周期函数

页面生命周期

组件生命周期

如何使用

示例

4、全局数据共享

一、使用全局变量（`App` 对象）

二、使用小程序的页面传参

三、使用数据缓存（`wx.setStorage` 和 `wx.getStorage`）

四、使用状态管理工具

总结

5、网络请求

一、基本使用方法

二、处理异步数据

三、常见的用例

四、处理请求失败

五、使用 Promise 进行封装

6、分包

分包加载的工作原理

分包加载的优点

适用场景

三、uni-app混合开发

1、uni-app概述

uni-app 的特点