微信小程序的架构与开发浅析

福 建 电 脑 Journal of Fujian Computer

Vol. 35 No.12

Dec. 2019

微信小程序的架构与开发浅析

李哲 周灵

(佛山科学技术学院 广东 佛山 528225)

摘 要 随着移动互联网的不断发展，网络应用和移动互联网产品日益朝着“微、小、轻”的方向不断前进，微信小程序就是一个重要体现。微信小程序的特点是无需下载、触手可及、用完即走不占用手机内存且开发成本较低。微信小程序是一个基于MINA框架的前端应用，核心技术是JavaScript技术、WXML技术、WXSS技术。本文将从微信小程序的主体架构做出分析和探究核心技术的应用，最后阐述微信小程序开发思路及市场前景。 关键词 微信小程序；MINA框架；JavaScript技术；WXML技术；WXSS技术 中图法分类号 TP399 DOI:10.16707/j.cnki.fjpc.2019.12.024

Overview and Development of WeChat Applet

LI Zhe, ZHOU Ling

(Foshan Institute of Science and Technology, Foshan, China, 528225)

Abstract With the continuous development of mobile Internet, network applications and mobile Internet products are advancing in the direction of \"micro, small, and light\". WeChat Applet is an important example. WeChat Applet is characterized by no need to download, easy access, memory free after running, and low development cost. WeChat Applet is a front-end application based on MINA framework. The core technologies include JavaScript technology, WXML technology, and WXSS technology. This paper analyzes and explores the application of core technologies in terms of the main structure of WeChat Applet. Finally, this paper expounds the development ideas and market prospects of WeChat Applet.

Keywords WeChat Applet; MINA Framework; JavaScript Technology; WXML Technology; WXSS Technology

1微信小程序概述

2016年初微信之父张小龙提出一种新的应用形态微信“小程序”，目的是为了让微信用户更好地在网络化的今天方便地享受优质服务。2016年9月微信小程序开始内部测试，为上线做最后的准备。2017年1月，微信小程序正式上线运行，随着市场的不断检验与反馈，微信小程序的相关功能和技术规范日益完善。

微信小程序可简称为小程序（Mini Program），

———————————————

是可以通过“二维码”或者移动端微信平台“搜一

搜”找到并能直接使用的应用。本应用采用全新的服务方式，通用的网络通信应用框架MINA框架和web前端开发技术相似的开发思路。微信小程序一经推出，便引起了业界的关注和追捧，其开发方式相较于web前端开发、APP开发更加简洁、开发成本小、开发门槛低。开发者利用微信小程序MNIA框架和微信小程序组件及对应样式表，就能快速地开发出微信小程序产品。同时运用微信平台作为后台支撑，微信小程序作为依附社交软件而发展的优势是与生俱来的[1]。

本文得到佛山科学技术学院研究生自由探索基金项目(No.2019ZYTS43)资助。李哲，男，1993年生，主要研究领域为计算机网络、前端开发。 E-mail: lz2014210993@163.com。周灵，男，1972年生，博士，主要研究领域为计算机网络、嵌入式系统，E-mail: 393703276@qq.com。

2019年 福 建 电 脑 67

2微信小程序系统架构

微信小程序基于移动端微信平台采用C/S架构相同的交互方式，实现小程序的高效运行和数据传输。利用MINA框架的实时响应特点，完成数据的绑定和同步响应。 2.1设计基础架构

微信小程序利用传统的C/S网络架构为基础，完成客户端和服务端直接相连。这种点对点的连接方式最为突出的特点就是数据传输安全高效。网络架构如图1所示。

客户端服务端本地数据库数据请求数据返回用户移动终端云端服务器数据库HTTP方式微信小程序 图1 微信小程序网络架构

微信小程序网络架构为小程序与服务器之间的数据交互提供了速度和安全的保障。微信小程序网络架构在C/S架构的基础上利用动态语言和算法突破客户端必须安装客户端服务软件的限制。微信小程序采用MINA框架的实时数据绑定和算法完成加载和运行同步，类似于DCloud流应用。当需要发布最新版的微信小程序时，只需要把完善好的微信小程序传送到服务器供用户调用，正在使用该版本的用户不影响其继续使用，因为代码包已经缓存到本地。再次打开微信小程序时会检查是否有更新版本，若有则加载最新版的代码包为用户提供服务。 2.2客户端框架

微信小程序的开发框架基于MINA框架。MINA框架是一个通用的网络通信框架，采用IT界推崇的MVVM模式，框架核心是一个实时响应的数据绑定系统。此系统分为视图层（View）和逻辑层（APP Service），MINA框架的作用就是保障视

图层视图和逻辑层的数据同步。当需要数据更新时，只须在逻辑层修改数据，视图层就会自动响应并更新视图。微信小程序开发框架如图2所示。

逻辑层视图层JavaScript数据请求WXMLWXSS page{实现事件响应、view组件 display:flex;}数据请求等页面事件反馈 view{逻辑行为text组件 width:100%; height:auto;}var userData={... .mark{input组件 font-stize:30rpx;name:'WeChat'} color:#a4de22;}展示页面元素 ...布局页面样式 图2 微信小程序开发框架

逻辑层采用JavaScript语言实现微信小程序逻

辑行为，视图层由微信官方提供的WXML(WeiXin Mark Language)和WXSS(Wei Xin Style Sheet)语言来编辑。视图层和逻辑层之间的交互依靠数据传输和事件系统完成。

MINA框架不但为微信小程序开发提供了开发基础，同时对微信小程序所有页面的路由进行管理并赋予页面生命周期。框架以栈的形势维护当前页面，当页面进行路由切换时页面栈的表现为堆栈和入栈行为。每个页面生命周期通常以onLoad页面加载开始至onUnload页面卸载为止。在生命周期内可以完成页面渲染、函数调用、数据更新等操作。除此之外MINA框架还为微信小程序提供了丰富的页面组件和特有的样式风格以及微信原生API。组件是页面的基本组成元素，利用不同组件之间的相互结合与配套样式表的使用能开发出各式各样的小程序，通过API则可以完成数据存储、页面路由、网络请求等功能。 2.3文件结构

一个微信小程序主体部分由app.js、app.json、app.wxss这三个文件组成[2]。当需要微信小程序项目开发时，可根据需求建立产品对应的文件系统，如图3即为一个通常的文件系统。

微信小程序文件系统中images主要存放项目所需图片。图片不宜太大，因为微信小程序对项目大小有限制。开发过程中可根据项目需要，自己制作矢量图标或者从网上下载可免费使用的占用空间较小的图片。若所需图片较大，则可把图片传至服务器，然后通过image组件访问服务器提供的

68 李哲等：微信小程序的架构与开发浅析 第12期

URL即可。

app.json主要负责全局配置、项目页面组成、窗口表现、页面切换及tab栏表现。

app.js是小程序脚本代码，负责整个项目的公共事件逻辑处理、全局变量定义、公共方法封装、处理小程序生命周期等。

app.wxss负责整个项目的公共样式，每个页面可通过组件属性调用样式规则，不同页面的样式共同的部分可利用公共样式布局，从而简化项目代码使样式布局更加清晰。

index.js页面逻辑images（项目所需图片）index.json（可选）页面配置pagesindexindex.wxml页面结构index.wxss(可选)页面样式项目所需页面（名字方式任意，页面结构如上index）微信小程序文件系统app.js公共逻辑app.json公共配置app.wxss(可选)公共样式utils或外部样式、文件引用 图3 微信小程序文件系统图

3微信小程序开发步骤与关键技术

微信小程序开发基于MINA框架建立项目文件结构，核心技术主要有页面逻辑JavaScript、页面结构WXML、页面样式WXSS。普通的前端开发渲染线程和脚本线程互斥不能同时提供服务，而微信小程序将逻辑层和视图层分开。视图层WXML和WXSS利用Webview线程渲染，逻辑层JS利用JSCore(IOS)/X5(Android)/nwjs(DevTool)线程渲染解析，两个线程同时工作为小程序的快速响应提供了条件。微信客户端作为中间介质，为两个运行在不同环境中的独立线程进行数据传输，保障视图层和逻辑层的同步。 3.1创建微信小程序项目

开发微信小程序项目，可以从以下几个方面着手：

（1）)了解微信小程序框架和运行机制，并熟悉微信官方提供的微信小程序开放文档。

（2）熟练掌握微信小程序开发者工具的使用和微信小程序的配置，如小程序ID获取、合法域名配置、通过调试器调试代码和页面样式。

（3）根据需求建立开发方案，确定整个项目的预期功能以及界面结构设计。对所需的页面按照文件结构图画出框架，为后续的开发打下基础。

（4）确定项目文件结构后，对每个页面根据需求利用微信小程序组件和样式完成视图层配置，并利用js完成微信小程序逻辑层配置。 3.2视图层WXML

WXML(WeiXin Markup Language)是一种非编程性标签语言，用于页面结构描述，为用户“静态”呈现内容。微信小程序WXML具有数据绑定、列表渲染、条件渲染、模板、事件绑定的功能。组件一般格式如下：

<标签名 属性=”属性值” 事件=”事件名”> 标签内容（可嵌套标签）…

组件（或页面元素）通常包括开始标签、组件内容、结束标签三部分。属性用来修饰组件在页面中的显示效果，是连接页面样式和页面结构主要的途径。事件用来为组件赋以“思想”，使组件能够有行为效果，是实现视图层和逻辑层之间交互的桥梁，同时可以利用事件冒泡机制为父子组件传递数据。

3.3视图层WXSS

WXSS(WeiXin Style Sheets)是基于MINA框架设计的一套样式语言，描述WXML的组件样式，给用户显示样页面元素的外观。页面中布局、元素类别、字体、颜色等均由WXSS文件设置。WXSS样式一般由选择器和声明两部分组成。基本格式如下：

选择器 {属性：属性值；属性2：属性值2… } 微信官方支持的选择器如.class、#id element等，而属性则根据组件的种类以及用户的需要去选择。

为了适应广大的前端开发者，微信小程序样式语言WXSS具有大部分CSS特性[3]。同时为了自身开发需要，WXSS扩展了如rpx、rem屏幕尺寸，提供了全局样式功能设置以及外部样式导入功能。当用户需要导入外部样式时可在公共样式（app.wxss）中使用@import“外部样式路径”方式。根据样式

2019年 福 建 电 脑 69

的使用方式不同可将WXSS分为外联样式、内联样式，而样式优先级内联样式高于外联样式。内联样式中组件属性style用于接收动态的样式、以class为首的组件属性用于接收静态样式。 3.4 逻辑层JS

JS(JavaScript)是小程序逻辑层配置语言，以.js为后缀的脚本文件，负责整个项目的逻辑部分。包括应用级和页面级注册，在注册页面中可根据开发需要编写事件逻辑完成组件功能。在.js文件中利用API函数可完成小程序与服务器之间的数据交互、数据缓存、界面路由等。在.js文件中函数定义格式：

函数名：Function（形参）{ 函数体 }。

本文微信小程序与服务器之间的数据交互将以网络请求request函数为例做出说明。首先根据项目需求完成服务器接口配置，通过配置好的URL，利用微信小程序进行网络通信。其次根据符合服务器接口配置格式的文件，发起基于https/wss协议的数据请求。服务器在接收到请求参数后做出应答，request函数利用回调函数如success函数获取返回数据。然后把返回数据更新到.js文件中，利用框架提供的数据绑定功能，使返回的代数据同步更新到视图层呈现给用户。

4微信小程序发展前景

经过调研发现，市面上很多APP下载到手机上后使用频次较少，平常停留在手机上占用了大量内存，而且当再次使用时可能因版本太旧需要花费资源更新最新版本才能使用。对于这些开发成本较高、使用频次较少的APP，如何降低成本，提升用户体验至关重要。在这种情况下，用户应该对留存率不高的APP“小程序化”，对代码较大的APP“功能主体化”，如携程、美团外卖等均在有APP的前提下开发了精简版小程序。微信小程序给用户提供了一个开发思路。传统的web前端开发基于浏览器，APP开发基于操作系统，相比于以上两种开发模式，基于微信平台开发的小程序则让开发者的准入门槛降低很多，低成本、开发难度简单以及反应速度快等, 正在不断的赢得用户和市场的广泛认可，为很多微小企业提供了机遇[4]。

微信小程序服务主要有五类：便民服务、政务民生、商业服务、游戏娱乐、服务工具，影响最大的是商业领域。商业的本质就是流量，微信小程序

搭载微信平台本身就具有独特的大流量优势，在加上微信小程序触手可得，无需安装，用完即走的特点都促进了微信小程序的良性发展。微信小程序双线程服务机制，能为用户带来更好的体验，可以有效地避免页面卡顿、加载缓慢、延迟等问题。

5结论

微信官方提供了免费的开发工具和详细的开发文档，为开发者快速上手提供了很好的平台。与传统的APP开发相比，微信小程序的开发框架更为简单，开发技术与传统的前端开发技术JavaScript技术、HTML技术、CSS技术相似，并根据需要作出了修改和扩展，使微信小程序技术更为简单和更好地适应微信平台。同时可开发自己的插件和引用外部插件提升微信小程序功能。微信小程序制作成本较低、开发简单、推广度高的特点符合公司发展，同时微信小程序“微、小、轻”的特点符合网络发展趋势。但微信小程序也有其缺陷：当它打开时才会从云端加载代码，虽不占用手机存储空间，但也限制了代码的大小，所以功能不可能像传统APP那样完善。同时微信小程序基于微信平台开发，虽然增加了流量，提高了推广度，也使得开发者为适用微信平台牺牲了一些独特的创意和限制了开发的范围[5]。因此，用户应该根据自己项目的需求和产品定位确定开发方向，权衡采用那种开发方式能更好地实现需求。微信小程序虽拥有广泛的发展空间和市场前景但也有其要突破的限制和挑战。

参 考 文 献

[1] 郑雨萌.新媒体时代下微信小程序的困境与发展.声屏世

界,2018(03):64-65

[2] 王婷婷.微信小程序开发.信息技术与信息化,2018(12):62-63 [3] 微信官方文档.小程序, https://developers.weixin.qq.com/

miniprogram/dev/framework/MINA.html, 2019,06,29

[4] 张晓燕.微信“小程序”开发的系统实现及前景.电子技术与软件工

程,2018(12):49-50

[5] 丁益,钱文波,关维娟.微信小程序市场现状与发展前景的分析.统计与

管理,2018(12):76-78