北京华网天下

小程序是什么？微信小程序的定义、功能与源码结构详解

2024-07-26

来源：网络整理

什么是小程序

小程序是微信推出的一种新的公众账号形式

无需下载安装即可在微信中使用的应用

小程序、订阅号、服务号、企业号是平行的系统

微信小程序在微信开发中的地位

尽可能简单、高效地让开发者在微信进行开发

具有原生APP体验的服务

小程序能为开发者提供什么？

为了方便和限制开发者的开发，微信定义了一系列基础组件，这些组件是视图层的组件（表单组件、媒体组件、导航等）。组件具有一些功能和微信风格的样式，类似于 HTML 标签。微信也提供了很多原生的微信 API 来调用微信提供的功能，同时还提供了一个微信小程序开发者工具。

微信小程序源码结构

视图层（将逻辑层的数据展示在视图上）

逻辑层（通过改变数据[方法]来改变视图）

配置文件

在小程序中，微信规定了界面的组成模式，由四个文件组成。

.wxml文件（页面结构文件）标签语言，类似html，是真正负责页面结构，能绑定数据的文件。

.wxss文件（样式表文件）与css类似，大部分css样式都相同

.js文件（脚本文件）用于运行我们的逻辑，使用js语言

.json文件（配置文件）主要配置常用的样式，比如标签栏，窗口样式等。

知识库微信小程序示例

开发CSDN小程序的初步尝试，主要关注js文件和wxml文件。

知识库将开发领域划分为一定的区域，比如技术语言、运维体系、行业应用等，并对每个技术、知识点设计一张网络图，将技术某一方面涉及到的知识进行归纳总结，为知识架构准备一些优质内容，让大家可以比较系统地学习知识。

在知识库产品中，需要实现内容推荐、个人中心和搜索。用户端和内容推荐端都包含四层：库->知识结构->内容列表->内容详情页。搜索功能可以根据用户搜索的关键词，在用户端或推荐中找到相关内容。方便用户阅读和收藏。

知识库页面设计

小程序组件满足所有展示功能和结构（列表、窗口、按钮、事件）

API齐全，逻辑开发简单，不同功能模块放在不同的页面。

View层：标签栏、列表页、知识结构页、内容详情页、搜索页

逻辑层：

标签栏->通过绑定数据选择第一级页面

列表页->通过改变绑定的数据数组来控制列表的显示和动态加载

搜索页面->通过绑定数据，通过事件及时获取用户输入

小程序开发的陷阱

限制打开页面的数量（仍然）

微信提供了标签栏设置，可以在app.json中配置，应用中配置的标签栏会出现在所有一级页面中。但是这样有个问题，就是第一次点击标签会打开一个新页面，而微信限制打开的页面数为5个。

微信提供了几种跳转页面的方式，，，和返回。重点就这两个，会直接在原页面打开新页面，打开新页面。由于微信对页面数量有限制，而且我们的产品层级很多，所以不能直接在app.json中设置标签栏。所以我们单独设计了标签栏，点击标签不会打开新页面，而是在各个一级页面中引用，然后二级、三级页面就不用标签切换了，而是需要返回到一级页面。

树形结构显示

每个库都是一个树状的知识结构，请看这个例子。每个层级的展示方法都是一样的，所以一般情况下，我们会选择递归的方式来展示。比如这张图，当我们判断这个节点有子节点的时候，我们就想再次调用同样的方法来展示。但很可惜，在小程序中，无论是使用模板，还是使用引用文件的方法，都没有办法自己调整。

幸好我们知道我们的层级有多深，所以我们可以写几个相同的文件和模板，添加不同的名称，然后调用。如果是层级不明的树形结构，那就很难处理了。这里我建议大家把树形结构变成数组，添加层级标识，用循环来处理 wxml 文件中层级的显示。

小程序开发中的坑_开发简单的小程序_软件小程序开发

顺序调用，如果html标签层级超过模板数量，超过的部分不会显示出来。本应用运行在微信中，建议你在服务端转换数据，再将转换后的数据发送给小程序。另外小程序()不能超过一次，如果你的json格式数据超过这个限制，拼接起来会比较困难。

冒泡事件

小程序在运营上的优势在于微信用户量大，适合推广。一些功能单一的APP可以放在小程序中实现，不需要下载APP，开发者不用考虑平台，开发成本低。但不适合开发逻辑复杂，界面丰富的程序，受框架限制，灵活性不高，不能满足所有功能。

（=”/form-data”），这样post上传的表单就可以包含文件等key-数据了。微信小程序也使用了类似的操作。

我使用PHP编写了服务器，接受文件的接口是save，我将$和$中的数据直接输出到info.log文件中，方便调试，代码如下：

保存（$）{（“：”。$）。“\r\n”，3，“。/logs/info.log”）；（“POST：”。$）。“\r\n”，3，“。/logs/info.log”）；（“城市：”。$[“city”]。“\r\n”，3，“。/logs/info.log”）；（“名称：”。$[“name”]。“\r\n”，3，“。/logs/info.log”）；（“：”。$[“”]。“\r\n”，3，“。/logs/info.log”）；（“：”。$[“”]。“\r\n”，3，“。/logs/info.log”）； .log”); (“标签：”. $[“city”]. “\r\n”, 3, “./logs/info.log”);echo '';}

在小程序开发工具中运行小程序，选择图片并上传，服务端成功接收数据，info.log输出的数据信息如下：

:{"":{"name":".jpg","type":"\/jpeg","":"\/tmp\/","":0,"size":}}POST: {"":"0","":"0","":"0","tags":"","city":"\\","name":"\\\\\\\"}城市: 北京名称: ปัก ก回复: : : 0

（ps:php中，有文件接收，将临时文件从该路径移动到指定目录即可保存文件，这里可以看到/tmp/临时文件，就代表文件接收成功了）

在手机上预览小程序，点击上传，但是出现问题，如下图：

POST数据为空，接收成功，但是单独输出的$data却是乱码（中文和泰文部分），出现溢出。

可以看到非英文和数字数据都是乱码，其他数据都没问题，明显是编码有问题，POST数据输出为空，乱码导致溢出，格式乱了。

如果编码有问题，请尝试更改其传输编码并添加

{"":"utf-8"} 或 {"-type":'/x-www-form-'}

但是没有效果，在微信小程序工具里还是有效的，但是在真机上预览会出现乱码。

刚刚发现中的数据在真机预览时无效，需要改为。受此启发，我尝试将编码后的数据添加到中，但只是传输了数据，并没有改变编码。小程序开发工具中调试依然成功，但真机预览有问题。估计微信团队得回答这个问题了。

知道是bug了，暂时只能手动进行编码操作，于是就把小程序段里的数据全部编码了。

代码中，字符串编码函数是，我在小程序中试了一下，也有这个函数，于是，我把小程序代码改成如下

在服务器端，PHP 用于解码 URL 的函数是

保存( $)