目录

前言

背景

认识小程序

小程序 VS 网站

微信小程序 VS Vue

宿主环境

通信模型

运行机制

API

小程序研发流程

小程序账号和APPID

小程序开发工具

自定义编译模式

协同工作

小程序版本

总结

最后

---

前言

做传统网站前端开发的同学初次接触小程序，会有许多困惑：为什么没有div，view 是什么、怎么没有 ajax，wx.request 为什么是回调方式、预览怎么要用小程序开发者工具、APPID有什么用、安装npm包怎么还要构建、tabBar 是什么、语法怎么和vue很像但是有的部分又不同、@import 用法怎么和 css 中不同...

本篇通过微信小程序（发布较早，影响力较大）来介绍小程序，帮助你快速认识小程序，并解决以上困惑。

背景

虽然会一些react、vue、js，但是移动端开发做的比较少，几乎不会小程序开发。

下一阶段的任务是移动端开发，涉及H5、小程序、公司内部自建的移动端的框架、调试工具、TS等。

如何快速上手这部分工作，经过三分钟的思考，决定出大致要加强的方向：

• 小程序：有许多小程序的开发

• js 基础：代码要写的优雅，比如许多 if 不是一个好习惯；不要看到别人的 Promise 就感觉生疏，别人的解构写法是否有问题也能看出来

• react：项目技术栈用到 react

• 加强TS：许多代码有TS，否则看不懂，修改代码也不能通过编译

• 移动端开发流程：熟悉公司移动开发流程，比如模拟器、云真机、实体机、公司的抓包工具

• 移动端玩法：比如调用 jsAPI（getLocation）需要同时开启“系统地理位置、系统授权宿主（支付宝/小程序）地理位置权限、宿主给小程序地理位置权限”，否则可能会弹出”地理位置权限申请“的弹框；悬浮球的玩法；半屏展示；全屏展示页面（即webview 扩展到状态栏）

认识小程序

小程序 VS 网站

小程序类似网站，只是网站在浏览器中打开，而小程序通过小程序平台（微信、支付宝）打开。

两者相似点：

• 跨平台：微信小程序在微信中打开，支付宝小程序在支付宝中打开；网站在浏览器中打开

• 无需下载和安装

• 实时更新：发布后，用户就会自动获取最新版本

两者不同点：

• 运行环境：小程序的宿主是小程序平台，例如微信、支付宝；网站运行在浏览器中；

• 功能和权限：小程序因为嵌在超级应用内（微信、支付宝），可以调用一些原生功能，比如支付、地理位置、摄像头，部分功能需要用户授权；网站受限于浏览器提供的API，总体上授权会更有限；

• 体验和性能：小程序在体验和性能上更接近原生应用，响应更快、UI更流畅

• 生态与流量：借助超级应用的平台生态，容易获取用户。比如微信小程序可以通过微信群、朋友圈等社交渠道快速传播；网站通过搜索引擎优化（SEO）、广告，相对小程序，推广难度可能大一些

• 开发语言和工具：使用特定的框架和工具集，例如微信小程序使用WXML、WXSS、JS；网站使用标准的HTML、CSS、JS以及各种前端框架和库（React、Vue）

• 开发模式：网站是浏览器+代码编辑器；微信小程序：申请小程序开发账号、安装小程序开发者工具、创建和配置小程序项目

• 代码托管：网站本地开发完提交到代码托管平台（github），之后会从托管平台部署到实际运行的服务器上；小程序代码在本地编写和调试后，直接上传到对应的小程序平台，这里涉及使用官方提供的开发者工具上传代码，平台审核，审核后发布；小程序平台负责代码的托管和版本控制。

微信小程序 VS Vue

有人说小程序比 Vue 简单多了。我们来对比两者异同，会发现小程序在语法上有许多和vue相似。

相同点：

• 组件开发：微信小程序使用 wxml定义组件结构、wxss 定义样式、js 定义逻辑、json 用于配置；Vue 使用 .vue 进行单文件组件开发

• 数据绑定：微信小程序通过 {{}}进行数据绑定，类似 vue.js 模板语法

• 事件处理：微信小程序使用 bingdtap 或 catchtap 等事件绑定；vue 使用 v-on(或@) 进行事件绑定

• 条件渲染和列表渲染：小程序使用 wx:if 和 wx:for 指令；vue 使用 v-if 和 v-for 指令

不同点：

• 运行环境：微信小程序运行在微信的容器环境中，只能在微信中使用，依赖于微信的API和平台；vue 运行在浏览器和node.js中。

• 文件结构：微信小程序，每个组件由4个文件组成（wxml, wxss, js, json）；vue 在一个 .vue 文件中

• 样式处理：微信小程序 使用wxss 进行定义，类似CSS；vue 使用标准的CSS

• 框架特征：微信小程序：提供了一些特定微信环境的API，例如访问微信支付；Vue专注于UI层，提供了丰富的生态系统

• 生态系统和扩展：微信小程序，由微信官方提供丰富的API，社区贡献组件库和开发工具；Vue 有强大的生态系统，包括大量的第三方插件、组件库和开发工具

宿主环境

手机微信是微信小程序的宿主环境，支付宝是支付宝小程序的宿主环境

小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，如：微信登录、微信支付、微信扫码、地理定位...

通过宿主环境，小程序提供的能力包含：通信模型、运行机制、组件和API

通信模型

小程序通信主体包含：渲染层和逻辑层

• wxml(类似 html) 和 wxss（类似 css） 工作在渲染层

• js脚本工作在逻辑层

小程序中的通信模型分两部分：

• 渲染层和逻辑层通信：由微信客户端进行转发

• 逻辑层和第三方服务器之间的通信：由微信客户端进行转发

运行机制

小程序启动过程：

1. 小程序代码下载到本地：用户首次打开或更新小程序时，微信客户端会从远程服务器下载小程序的代码包。这个过程会根据网络状况和代码包大小有所不同，微信平台会对代码包进行一定的优化和压缩处理以加快下载速度。

2. 解析 app.json 全局配置文件：下载完成后，微信客户端会首先解析app.json文件，这个文件包含了小程序的全局配置信息，如页面路径、窗口表现、网络超时时间、底部tab等。这些配置决定了小程序的基本框架和表现形式。

3. 执行 app.js，小程序入口文件：接下来，微信客户端会执行app.js文件，这是小程序的逻辑层入口。在app.js中，会调用App函数来创建小程序实例，并可以在这个函数中定义全局的数据和方法，进行一些初始化操作，如注册全局的生命周期回调函数（如onLaunch, onShow, onHide等）。

4. 渲染小程序首页：根据app.json中配置的首页路径，微信客户端会加载首页的.wxml（结构）、.wxss（样式）和.js（逻辑）文件，开始渲染小程序的首页。逻辑层会通过Page函数创建页面实例，并执行页面的生命周期函数，如onLoad，进行数据初始化、网络请求等操作。随后，渲染层依据逻辑层提供的数据渲染页面内容。

5. 小程序启动完成：当首页页面渲染完成并呈现给用户时，标志着小程序的启动过程结束，此时用户可以开始与小程序进行交互。同时，小程序的不同页面之间可以通过页面路由进行跳转，逻辑层与渲染层继续根据用户的操作进行数据更新和界面重绘。

Tip：上面是冷启动，对于已经打开过的小程序，再次进入可能就会有热启动的情况。比如代码下载可能就会被跳过

页面渲染过程：

1. 加载解析页面的 .json 配置文件：当需要渲染某个页面时，微信小程序框架首先会加载该页面对应的.json配置文件。这个文件定义了页面的窗口样式、导航栏样式等页面级的配置信息，这些配置会影响页面的外观和行为。

2. 加载页面的 .wxml 和 .wxss 样式：紧接着，框架会加载页面的结构文件.wxml和样式文件.wxss。.wxml文件定义了页面的结构和布局，类似于HTML；而.wxss文件则是用来控制页面元素样式的，类似于CSS。这两个文件共同决定了页面的外观。

3. 执行页面的 .js 文件，调用 Page() 创建页面实例：之后，框架会执行页面的逻辑文件.js。在这个文件中，通过调用Page函数来创建页面实例，并可以在其中定义页面的初始数据、生命周期函数（如onLoad、onShow、onHide等）、事件处理函数等。页面的初始化数据和逻辑处理都在这个阶段完成。

4. 页面渲染完成：当页面的结构、样式和数据都准备就绪后，微信小程序的渲染引擎会根据.wxml和.wxss以及页面实例中的数据来渲染页面。这个过程包括解析WXML模板，应用WXSS样式，绑定数据到模板，最终生成用户可见的界面。页面渲染完成后，用户就可以看到并开始与这个页面进行交互了。

API

小程序官方把API分三类：

• 事件监听API：以 on 开头，监听某些事件。例如 wx.onWindowResize(callback)（小程序中没有windown） 监听窗口尺寸变化

• 同步API：以Sync结尾的都是同步API，通过函数直接获取，如果执行出错会抛出异常。例如wx.setStorageSync('key', 'value') 向本地缓存写入数据

• 异步API：类似$.ajax，需要通过 success、fail、cpmplete 接收调用的结果，例如 wx.request 发起网络数据请求，通过 success 接收调用的结果

小程序研发流程

小程序开发流程不同于传统网站。

传统网站开发：vscode编写代码，浏览器预览效果，git提交到代码。

小程序开发步骤大致如下（以微信小程序三方开发为例）：

1. 申请小程序账号，获得 AppId（你要创建的小程序唯一标识）

2. 通过小程序开发者工具创建项目

3. 通过小程序开发者工具编译预览效果

4. 通过小程序开发者工具把代码上传到微信平台

5. 选择一个开发版本作为体验版

6. 体验完成申请发布

7. 发布到微信平台

Tip：一方开发通常指的是由小程序的所有者的开发，也是官方开发; 三方开发，是指由第三方开发者为小程序提供功能或服务;

小程序账号和APPID

注册小程序账号，主要是为了获得APPID。

APPID 是小程序唯一标识，用于在微信上识别和区分不同的小程序，在注册过程中，需要填写一些基本信息，如小程序名称、小程序介绍、小程序类别等。完成这些，微信会为你生成一个APPID。APPID将用于开发、发布和运营小程序各种操作，包含开发工具的配置等

大致流程如下：

• 点击注册：进入微信官网（https://mp.weixin.qq.com/cgi-bin/wx），点击“注册”

• 注册小程序：包含账号信息（邮箱、密码...）、邮箱激活、信息登记(注册国家、主体类型-个人：身份证姓名、身份证、手机、短信)

注册后就可以登录到小程序后台管理界面，在“开发”导航中就能找到APPID。

小程序开发工具

小程序你不用特定工具怎么预览效果？浏览器又不认识小程序

微信开发者工具提供如下功能：

• 快速创建小程序项目

• 代码查看和编辑

• 小程序进行调试、预览

• 小程序发布

找到稳定版下载安装成功，在桌面会看到一个二维码，用自己的微信扫一扫，登录后就能打开“微信开发者工具”。

创建项目：可以指定项目所在目录、后端服务是否选择云开发、语言有javascript或 TypeScript。

小程序工具主界面分五个部分：

• 菜单栏：如帮助(里面有“开发者文档”)、设置、项目、工具（有构建 npm、插件）

• 工具栏：模拟器、编辑器、调试器、编译、真机调试

• 模拟器：模拟微信（底部有：页面路径、页面参数）

• 代码编辑区

• 调试区：console控制台、Network、Storage

自定义编译模式

通过小程序工具，普通编译会从小程序首页开始，而平时我们修改某页面逻辑，保存后想立刻看到效果，而不是又从首页切换好几次才到该页面。这是，我们可以使用“自定义编译条件”。

点击“普通编译”下的“添加编译模式”，选择要启动的页面，还可以传参，新建即可。下次就选择这个页面编译即可。

一个页面可以创建多个编译页面，比如有参的、无参的...

协同工作

小程序通常不是一个人完成的。

微信小程序成员管理(三方)体现在管理员对小程序项目成员及体验成员的管理

• 项目成员：参与开发、运营，可登录小程序后台，管理员可添加、删除成员，并设置成员角色

• 体验成员：参与小程序内测体验、可使用体验版小程序，不属于项目成员，管理员及项目成员可以添加、删除体验成员

开发者的权限有：

• 开发者权限

• 体验者权限

• 登录权限：登录小程序后台，无需管理员确认

• 开发设置：设置小程序服务器域名、消息推送及扫描普通二维码打开小程序

Tip：之所以有这些角色，因为小程序的开发流程不同于网站开发，小程序的代码由小程序平台管理。

小程序版本

小程序发布流程大致如下：上传代码到开发版本，多次迭代开发版本，根据开发版本生成体验版本，验证通过后提交审核，审核通过后发布。

• 开发版本：使用开发者工具，可将代码上传到开发版本中。开发版本只保留每人最新的一份上传的代码。点击提交审核，可以将代码提交审核。开发版本删除，不影响线上版本和审核中的版本。

• 体验版本：选择某个开发版本作为体验版

• 审核中版本：只能有一份代码处于审核中。有审核结果后可以发布到线上，也可以直接重新提交审核，覆盖原审核版本

• 线上版本：线上所有用户使用的代码版本

Tip：微信小程序和支付宝小程序都提供了多版本开发和管理功能。体验版只能同时根据其中一个开发版本生成。

总结

本文以通俗易懂的语言深入浅出地介绍了小程序的开发基础与实践技巧。从基础知识入手，逐步剖析了小程序的设计理念、开发流程以及实际应用案例。无论您是刚刚接触小程序的新手，还是希望深化理解的开发者，本文都能为您提供有价值的洞察和实用的指导。

通过本文的学习，读者不仅可以掌握小程序的基本构造和功能实现方法，还能了解到如何优化用户体验、提升应用性能等方面的策略。希望本文能够帮助广大开发者在小程序开发领域取得更大的进步和成就。

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！优秀是一种习惯，欢迎大家留言学习！