前言

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

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

背景

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

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

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

认识小程序小程序 VS 网站

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

两者相似点：

两者不同点：

微信小程序 VS Vue

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

相同点：

不同点：

宿主环境

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

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

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

通信模型

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

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

运行机制

小程序启动过程：

小程序代码下载到本地：用户首次打开或更新小程序时，微信客户端会从远程服务器下载小程序的代码包。这个过程会根据网络状况和代码包大小有所不同，微信平台会对代码包进行一定的优化和压缩处理以加快下载速度。解析 app.json 全局配置文件：下载完成后，微信客户端会首先解析app.json文件，这个文件包含了小程序的全局配置信息，如页面路径、窗口表现、网络超时时间、底部tab等。这些配置决定了小程序的基本框架和表现形式。执行 app.js，小程序入口文件：接下来，微信客户端会执行app.js文件，这是小程序的逻辑层入口。在app.js中，会调用App函数来创建小程序实例，并可以在这个函数中定义全局的数据和方法，进行一些初始化操作，如注册全局的生命周期回调函数（如onLaunch, onShow, onHide等）。渲染小程序首页：根据app.json中配置的首页路径，微信客户端会加载首页的.wxml（结构）、.wxss（样式）和.js（逻辑）文件，开始渲染小程序的首页。逻辑层会通过Page函数创建页面实例，并执行页面的生命周期函数，如onLoad，进行数据初始化、网络请求等操作。随后，渲染层依据逻辑层提供的数据渲染页面内容。小程序启动完成：当首页页面渲染完成并呈现给用户时，标志着小程序的启动过程结束，此时用户可以开始与小程序进行交互。同时，小程序的不同页面之间可以通过页面路由进行跳转，逻辑层与渲染层继续根据用户的操作进行数据更新和界面重绘。

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

页面渲染过程：

加载解析页面的 .json 配置文件：当需要渲染某个页面时，微信小程序框架首先会加载该页面对应的.json配置文件。这个文件定义了页面的窗口样式、导航栏样式等页面级的配置信息，这些配置会影响页面的外观和行为。加载页面的 .wxml 和 .wxss 样式：紧接着，框架会加载页面的结构文件.wxml和样式文件.wxss。.wxml文件定义了页面的结构和布局，类似于HTML；而.wxss文件则是用来控制页面元素样式的，类似于CSS。这两个文件共同决定了页面的外观。执行页面的 .js 文件，调用 Page() 创建页面实例：之后，框架会执行页面的逻辑文件.js。在这个文件中，通过调用Page函数来创建页面实例，并可以在其中定义页面的初始数据、生命周期函数（如onLoad、onShow、onHide等）、事件处理函数等。页面的初始化数据和逻辑处理都在这个阶段完成。页面渲染完成：当页面的结构、样式和数据都准备就绪后，微信小程序的渲染引擎会根据.wxml和.wxss以及页面实例中的数据来渲染页面。这个过程包括解析WXML模板，应用WXSS样式，绑定数据到模板，最终生成用户可见的界面。页面渲染完成后，用户就可以看到并开始与这个页面进行交互了。API

小程序官方把API分三类：

小程序研发流程

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

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

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

申请小程序账号，获得 AppId（你要创建的小程序唯一标识）通过小程序开发者工具创建项目通过小程序开发者工具编译预览效果通过小程序开发者工具把代码上传到微信平台选择一个开发版本作为体验版体验完成申请发布发布到微信平台

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

小程序账号和APPID

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

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

大致流程如下：

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

小程序开发工具

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

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

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

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

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

自定义编译模式

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

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

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

协同工作

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

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

开发者的权限有：

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

小程序版本

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

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

总结

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

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

最后

如果你觉得这篇文章对你有帮助，不妨点个赞支持一下！你的支持是我继续分享知识的动力。如果有任何疑问或需要进一步的帮助，欢迎随时留言。

也可以加入微信公众号 [DotNet技术匠] 社区，与其他热爱技术的同行一起交流心得，共同成长！

优秀是一种习惯，欢迎大家留言学习！