微信小程序自 2017 年1月9日正式上线以来，就引起广泛关注。微信团队也不停地对小程序进行更新。微信小程序的优势十分明显，小程序触及了 PC网页，公众号，H5，APP 无法触及的地方，其无需安装，用完即走的理念能够满足用户需求且节省手机内存。站在小程序的拥有者的立场，其开发成本大大减小，同时可借助微信强大的流量入口，因而也降低了推广的难度。总的来说，微信小程序是一种全新的方式能够更好地在用户和服务中建立连接，并且可以在微信中便捷地获取和传播，具有不错的使用体验。

1小程序开发前准备

小程序采用了类似 React Native 和 Weex一样的解析技术，开发者可以编写一套程序在多种客户端运行，同时，相比于公众号、微商城具有更好的原生体验。全面开放申请以后，作为企业、政府、媒体、其他组织或者个人的开发者，都可以申请并注册小程序。小程序和微信的订阅号、服务号以及企业号是并行的体系，具有独立的注册以及发布流程。

1.1小程序接入流程

小程序的接入主要有4个步骤

(1)小程序注册：在微信公众平台官网首页(mp.weixin.qq.com)注册并提交注册信息、完善主体信息和管理员信息。

(2)完善小程序信息：完善小程序的基本信息如名称、头像及服务范围等。开发前需绑定开发者并获取APPID，以保证程序可以通过手机进行扫码测试。

(3)开发小程序：下载安装微信开发者工具，微信官方提供了一套完整的开发框架，开发者可以根据微信开发文档进行小程序的开发与调试。

(4)代码审核及发布：小程序开发完成后，不能够直接发布，需提交代码与开发配置信息提交审核，完成后尚可发布。

1.2微信Web开发者工具

官方公布的微信开发工具名为微信 Web 开发者工具，小程序前端开发框架是微信官方提供的框架。微信 Web 开发工具是一种基于Native System 系统层的框架，由于并不是运行在浏览器中，所以JavaScript 在 Web 中的一些诸如 Document，Window 等方法均不可使用，以往HTML5加载的时候在网络环境会有所限制，需要逐步加载HTML，CSS，JS，然后返回数据，最后染页面展现在浏览器中。用户总是需要等待很久，这样使得用户体验感大大降低。相比之下，小程序的两个线程：AppserviceThread 和 ViewThread 会同时进行、并行加载，甚至Appservice Thread 会更早执行当视图线程加载完，通知 Appservice，Appservice 会把准备好的数据用 setData 的方法返回给视图线程。小程序的这种优化策略，可以减少用户的等待时间，加快小程序的响应速度。

微信 Web 开发者工具区别于 H5的开发工具+浏览器 Device Mode 预览的模式，而是基于自己的开发者工具，可以实现同步本地文件+开发调试+编译预览+ 上传+发布等一整套流程。同时小程序自己开发了一套WXML标签语言和 WXSS样式语言，并非直接使用标准的 HTML5+CSS3。同时提供了很多原生 APP 的组件，之前在HTML5中需要模拟才能实现的功能，在小程序中可以直接调用组件来实现。

2结构及其核心技术

2.1框架

2.1.1小程序的文件结构

使用微信Web开发工具新建一个项目，框架会自动生成描述整体程序的APP和多个描述页面的 page文件。完整的小程序主要组成有:

一个入口文件：app.js

一个全局样式：app.wxss

一个全局配置：app.json

在页面 pages 下将页面安装文件夹划分，每个页面存在4个文件，分别是：

视图层：wxml文件、wxss 文件;

逻辑层：js 文件json 文件(页面配置，不是必须)

(1)app.js 是控制小程序逻辑的脚本文件，appjson 是小程序的配置文件，负责对小程序的全局配置。app.wxss 是全局样式表，作用范围是项目的每一个页面

(2)wxml是一种类似xm格式的语言，具有数据绑定、条件染、列表染自定义模板、事件回调和外部引用等功能。pagewxml主要通过使用基础组件构建页面结构。

wxss和css 格式的语言有相同之处，用于描述 wxml的组件样式，page.wxss的优先级比 app;json的Window 高。同时，微信为小程序新增了尺寸单位 rpx，rpx 可以根据屏幕宽度进行自适应，rpx 实际上就是系统级的 rem(把页面按比例分 750份Irpx=innerWidth/750)

pagejson 可以对独立定义的页面进行一些属性的设置，以满足实际需要config.json 可以设置一些个性化配置，当重新安装工具或者换一台电脑时，只要导入相同的代码包，开发工具就会自动恢复到开发这个项目时的个性化设置JS文件主要用于用户交互、响应用户点击等。在小程序中，通过JS 脚本来响应用户操作。

2.1.2了解小程序框架

微信小程序开发是基于框架的，从软件设计角度来说，框架是一个可复用的软件架构解决方案，规定了应用的体系结构，阐明软件体系结构中各层次间及其层次内部名组件间的毅力关系，责任分配和控制流程，表现为一组接口、抽象类以及实例间协作的方法，是指对某一指定应用领域中的应用系统的部分设计与实现子系统的整体结构。

小程序开发框架的核心是一个响应的数据绑定系统。分为视图层(View)和逻辑层(APP Service)，小程序开发工具提供了视图层描述语言 WXML和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间设置了数据传输和事件系统，使得开发者能够很简单地将重心放在数据与逻辑上。处理事务逻辑的地方被称为逻辑层。在微信小程序中，所有 js 脚本文件的集合构成逻辑层。逻辑层与视图层相互配合，完成数据处理及接收事件反馈。框架的视图层由 WXML与WXSS编写，通过组件进行展现。对于小程序本身，.wxml 文件与.wxss 文件的集合构成了视图层，逻辑层处理数据之后，会发送给视图层用于与用户的交互，同时接收用户对视图层的反馈。视图层以给定的样式展现数据并反馈事件给逻辑层，数据展现是通过组件来进行的。视图的基本构成是组件。

2.2相关组件

微信提供了一系列基本组件，可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件。

2.2 相关组件

微信提供了一系列基本组件，可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件

(1)类似，是布局中最基本的一个组件，任何一种复杂的布局都可以通过嵌套组件来实现，是一个块级容器组件，默认 display: block，它是盒模型，在布局过程中一般推荐display：flex的写法

(2)是多行输入框，与HTML 中不同的是，它的值需要赋值给 value 属性，而不是被标签包裹，是一个自闭合标签，css动画对组件无效。

(3)是页面链接，和 HTML 中超链接标签一样，主要进行页面跳转控制。链接的内容可以是一个字、词或者一幅图片，通过点击内容实现页面的跳转

(4)主要用于绘制图形，其本身是一块无色透明区域，并没有绘制的能力，仅仅是图形容器，需要调节相关的应用程序编程接口(Application ProgrammingInterface，API)来完成实际的绘图任务。

2.3API及其配置

2.3.1 域名配置

根据小程序提供的组件，开发者可以根据需要设计 UI 界面，然而小程序的一些功能就要依赖框架提供的 API来实现。在使用 API时，首先要对小程序进行服务器域名的配置，每个小程序都需要设定通信的域名，小程序可以跟指定的域名进行网络通信。目前支持的有 HTTPS(request)、上传文件(uploadFile )、下载文件( downloadFile)和WebSocket 通信。

(1)wxrequest( Object ) ：实现小程序与开发者的服务器实现数据交互request方法的作用是发起HTTPS请求，在小程序中，只能使用HTTPS请求而不能使用HTTP 请求，一个微信小程序同时只能有5个网络请求连接；

(2)WebSocket：request 方法是通过客户端主动向服务器发起请求，而服务器端响应返回数据来实现通信的目的。这种方法存在缺点，那就是服务器不能主动向客户端发送消息。因此要实现服务器和客户端之间的即时通信只能采用轮询的方法，而且request 的 Header 是十分长的，为了传输一个很小的数据会占用很多的宽带。针对这种情况，开发者可以通过小程序提供的 WebSocket 相关 API 创建 WebSocket，WebSocket 只需要服务器和浏览器通过 HTTP 协议进行一个握手的动作后单独建立一条传输控制协议(TransmissionControl Protocol，TCP)的通信通道就可以进行数据的传送，实现长连接以达到通信的目的。

出处 无线互联科技

原标题 微信小程序开发研究

作者 武思怡 解佺 张雨 侯秉昀