第35卷 第12期 福 建 电 脑 Vol. 35 No.12
2019年12月
Journal of Fujian Computer
Dec. 2019
———————————————
本文得到佛山科学技术学院研究生自由探索基金项目(No.2019ZYTS43)资助。李哲，男，1993年生，主要研究领域为计算机网络、前端开发。 E-mail: lz2014210993@163 。周灵，男，1972年生，博士，主要研究领域为计算机网络、嵌入式系统，E-mail: 393703276@qq 。
小程序的架构与开发浅析
李哲 周灵
(佛山科学技术学院 广东 佛山 528225)
摘 要 随着移动互联网的不断发展，网络应用和移动互联网产品日益朝着“微、小、轻”的方向不断前进，
小程序就是一个重要体现。小程序的特点是无需下载、触手可及、用完即走不占用手机内存且开发成本较低。小程序是一个基于MINA 框架的前端应用，核心技术是JavaScript 技术、WXML 技术、WXSS 技术。本文将从小程序的主体架构做出分析和探究核心技术的应用，最后阐述小程序开发思路及市场前景。 关键词 小程序；MINA 框架；JavaScript 技术；WXML 技术；WXSS 技术 中图法分类号 TP399 DOI:10.16707/jki.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 marke
t 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]。
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所示。
逻辑层实现事件响应、数据请求等页面逻辑行为var userData={name:'WeChat'}
JavaScript 视图层适合做头像的红旗图片
WXML
慌张夫妇page{
display:flex;} view{
width:100%; height:auto;} .mark{
font-stize:30rpx; color:#a4de22;} ...WXSS
view 组件
text 组件...input 组件
数据请求
事件反馈
展示页面元素
布局页面样式
图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 负责整个项目的公共样式，每个页面可通过组件属性调用样式规则，不同页面的样式共同的部分可利用公共样式布局，从而简化项目代码使样式布局更加清晰。
小程序文件系统
app.json utils 或外部样式、文件引用
pages
index
公共配置index.wxml index.wxss(可选)
index.json （可选）
app.js 公共逻辑app.wxss(可选)
公共样式
index.js郑元畅的老婆
页面逻辑页面配置页面结构页面样式
项目所需页面（名字方式任意，页面结
构如上index ）
images （项目所需图片）
图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] 官方文档.小程序, developers.weixin.qq/
miniprogram/dev/framework/MINA.html, 2019,06,29允儿和鸟叔
[4] 张晓燕.“小程序”开发的系统实现及前景.电子技术与软件工
程,2018(12):49-50
[5] 丁益，钱文波，关维娟.小程序市场现状与发展前景的分析.统计与
管理,2018(12):76-78
发布评论