初识微信小程序

微信小程序概述

与传统的原生应用相比，微信小程序是一种全新的连接用户与服务的应用，它可以在微信内被便捷地获取和传播，同时具有良好的用户体验。

微信小程序是运行在微信中的应用，是一种不需要下载即可使用的应用，用户通过微信扫一扫或者搜一搜即可打开，且每个微信小程序的体积非常小。

微信小程序特点

微信小程序是继原生 APP 和 HTML5 应用之后出现的一种新的应用形态。

• 无需安装，触手可及：用户在使用微信小程序时无需安装，直接使用，不占用存储空间。
• 用完即走，无需卸载：在使用微信小程序后，可以用完即走，无需卸载。
• 名称唯一：某一个名称被注册后，另一个微信小程序将不能使用相同的名称。
• 入口丰富：用户可以通过多种途径打开微信小程序。
• 传播能力强：微信小程序入口丰富，再加上基于微信生态，使得微信小程序的传播能力强。

微信小程序与原生 APP 相比：

微信小程序与 HTML5 应用相比：

微信小程序发展前景

微信自从出现以来，受到广大用户的喜爱，目前已成为人们必不可少的通信工具，对于用户而言，使用依托于微信的小程序的频率也越来越高。

微信小程序的发展前景：

• 生态体系：微信小程序已经形成了自己的生态体系，它连接了开发者、运营者、投资者等各领域的企业，并且接入了多个第三方服务的平台。微信小程序已经进入到了一个快速发展的阶段，未来的发展空间也越来越大。
• 开放能力：在发展过程中，微信小程序不断自我完善， 为开发者开放了越来越多的接口，它可以适用于大多数的用户和场景，还可以方便开发者进行深度挖掘。同时，微信为小程序提供了越来越多的开放功能，例如微信扫码、微信支付、地理定位等，这对微信小程序的发展也会起到推动作用。
• 用户黏性：微信小程序已经积累了大量用户，用户黏性高，使其他行业与微信用户有更好的连接，能够更好地与微信结合。

微信小程序宿主环境

宿主环境（Host Environment）是指程序运行所依赖的环境。

微信小程序可以跨平台，因为微信小程序并不是一个直接安装在 Android 系统或 iOS 系统中的应用，而是运行在微信客户端上的应用，微信客户端给微信小程序提供的环境就是微信小程序的宿主环境。

微信小程序的宿主环境为微信小程序提供了丰富的组件和 API，可以完成许多普通网页无法完成的功能。

• 组件：用于快速搭建页面的结构，包括视图容器、基础内容、表单、导航、媒体、地图、画布、开放能力等。
• API：用于让开发者方便地调用微信提供的功能，如获取用户信息、微信登录、微信支付等。

微信小程序开发准备

注册微信小程序开发账号

微信公众平台：https://mp.weixin.qq.com/

开发微信小程序时，需要具备开发微信小程序的权限，可以先在微信公众平台上注册一个小程序账号，并根据微信公众号平台指引注册小程序账号，也可以使用小程序测试号。

获取微信小程序 AppID

在微信小程序中，AppID 又称为小程序 ID，是每个小程序的唯一标识，每个小程序账号只有一个 AppID，因此每个账号只能发布一个小程序，如果要发布多个小程序，需要注册多个小程序账号。

下载与安装微信开发者工具

微信公众平台为开发者提供了微信开发者工具，帮助开发者快速实现微信小程序的开发。

下载微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

创建微信小程序项目

在进行微信小程序开发前，需要先使用微信开发者工具创建一个空的小程序项目，创建完成后可以进行微信小程序代码的编写。

微信小程序开发基础

微信小程序项目结构

项目创建完成后，微信开发者工具会自动创建微信小程序的项目工程结构。

微信小程序项目的基本结构：

微信小程序页面组成

一个微信小程序是由一个或多个页面组成的，这些页面被存放在 pages 目录中。

一个页面由 4 个文件组成：xx.js、xx.json、xx.wxml 和 xx.wxss。

• JS：类似 JavaScript 语言，用于实现页面逻辑和交互。微信小程序中的 JS 不含 DOM 和 BOM，但它提供了丰富的 API，可以实现许多特殊的功能，如微信登录、音频播放、文件上传等。
• JSON：用于利用 JSON 语法对页面进行配置。
• WXML（WeiXin Markup Language，微信标记语言）：类似 HTML 语言，用于构建页面结构。
• WXSS（WeiXin Style Sheets，微信样式表）：类似 CSS 语言，用于设置页面样式。

微信小程序通信模型

微信小程序实现了渲染层、逻辑层和第三方服务器的通信。

微信小程序的通信模型分为两个部分：

• 第 1 部分是渲染层与逻辑层之间的通信，即将逻辑层的数据渲染到页面中。
• 第 2 部分是逻辑层和第三方服务器之间的通信，即通过向第三方服务器发送请求，得到需要的数据。

微信小程序的架构层：

• 渲染层（Webview）：负责小程序的页面展示，也就是用户实际看到的界面。Webview 是网页渲染引擎，小程序的每个页面通常对应一个独立的 Webview，用于解析 HTML、CSS 等前端资源，将界面元素渲染到屏幕上。
• 逻辑层（JsCore）：负责小程序的业务逻辑处理，是小程序的“大脑”。JsCore 是 JavaScript 的运行环境，用于执行小程序的 JS 代码。渲染层与逻辑层之间通过微信客户端提供的特定通道通信，实现数据同步。
• Native 层：是微信客户端的原生层，属于底层支撑。Native 为渲染层和逻辑层提供基础能力，如设备硬件调用、本地存储、界面组件原生渲染等，小程序的许多核心 API（如 wx.getSystemInfo）本质上是通过调用 Native 层能力实现的。
• 微信客户端：是整个小程序的运行载体，整合了 Webview、JsCore、Native 等模块，为小程序提供了统一、安全的运行环境，避免了直接暴露手机系统底层，保障了运行稳定性和安全性。
• HTTPS Request：小程序通过 HTTPS 协议向第三方服务器发送请求，获取或提交数据，这是小程序与后端服务交互的主要方式，且强制要求 HTTPS 以保障数据传输安全。
• Web Socket：用于实现小程序与第三方服务器的实时双向通信，适用于需要实时更新的场景。

微信开发者工具使用

认识微信开发者工具

在完成微信小程序项目的创建后，可以使用微信开发者工具进行微信小程序的开发和调试。

IntelliJ IDEA 也可以用于微信小程序的开发，IntelliJ IDEA 插件市场有微信小程序开发专用的插件，但仅限于在 IntelliJ IDEA 中编写微信小程序代码，微信小程序项目创建、预览、调试、发布均需要在微信开发者工具中进行操作。

微信小程序项目设置

在微信开发者工具中，可以对微信小程序的项目进行相关设置。

微信小程序项目成员

项目成员和体验成员的管理

微信小程序的成员管理包括：

• 项目成员：参与微信小程序开发、运行的成员，可登录微信小程序管理后台，包括运营者、开发者及和数据分析者。
• 体验成员：表示参与小程序内测体验的成员，可使用体验版小程序，但不属于项目成员。

项目成员的权限

在一个微信小程序中，每个项目成员的权限各有不同，只有为每个项目成员分配了各自的权限，才能保证项目的正常进行。

添加项目成员和体验成员

在微信公众号平台后台，可以为微信小程序添加项目成员和体验成员。

微信小程序的发布上线

微信小程序版本

微信小程序开发的流程一般是开发者编写代码并自测，直到微信小程序达到一个稳定可体验的状态，然后开发者把这个体验版本交给产品组和设计组的相关人员进行体验，并交给测试组的相关人员进行测试，修复程序的 Bug，最后发布微信小程序，供外部用户正式使用。

根据开发流程，可将微信小程序划分为不同的版本。

• 开发版本：使用微信开发者工具可将代码上传到开发版本中。
• 体验版本：可以选择某个开发版本作为体验版本，只能存在一个体验版本。
• 审核版本：只能有一份代码处于审核中。审核通过后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
• 线上版本：线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

微信小程序上线流程

一个微信小程序从开发完到发布上线，一般分为 3 个步骤：上传代码、提交审核、发布。