小程序技术开发手册

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

一、小程序开发前准备

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

1、小程序接入流程

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

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

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

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

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

2、微信Web开发者工具

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

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

二、小程序的结构及其核心技术

1、小程序的文件结构

使用微信Web开发工具新建一个项目，框架会自动生成描述整体程序的APP和多个描述页面的page文件。完整的小程序主要组成有：一个入口文件：app.js；一个全局样式：app.wxss；一个全局配置：app.json；

在页面pages下将页面安装文件夹划分，每个页面存在4个文件，分别是：视图层：wxml文件、wxss文件；逻辑层：js文件、json文件（页面配置，不是必须）。

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

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

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

page.json可以对独立定义的页面进行一些属性的设置，以满足实际需要。config.json可以设置一些个性化配置，当重新安装工具或者换一台电脑时，只要导入相同的代码包，开发工具就会自动恢复到开发这个项目时的个性化设置。

JS文件主要用于用户交互、响应用户点击等。在小程序中，通过JS脚本来响应用户操作。

2、小程序的框架

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

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

3、小程序的相关组件

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

（1）<view/>和html5中的<div/>类似，是布局中最基本的一个组件，任何一种复杂的布局都可以通过嵌套<view/>组件来实现，<view/>是一个块级容器组件，默认display：block，它是盒模型，在布局过程中一般推荐display:flx的写法。

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

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

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

4、小程序的API及其配置

（1）域名配置：

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

（2）常用API：

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

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

三、小程序设计的项目发布

1、小程序发布流程

项目开发完成后，管理员需手动打包上传代码，填写相关配置类目并将代码提交审核，若第一次审核未通过，再次提交审核将开放提供测试的入口，该入口由开发者提供，用于微信审核人员审核微信小程序时登录。审核后手动发布即可。

2、小程序上传原理

管理员手动将代码打包上传是怎样实现的呢？编辑器本身是基于Web技术体系实现的。简单是说就是node+webkit，node提供给我们本地api的能力，而webkit提供给我们Web的能力，两者结合之后便可以使用JS+HTML实现本地应用程序。既然有nodejs，那打包选项里的功能就好实现了。其中ES6转ES5就是引入babel-core的node包，CSS补全是引入postcss和autoprefixer的node包，代码压缩则是引入uglifyjs的node包。

结语

微信小程序站在月活跃用户9亿人次的微信的肩膀上，自带流量趋势，入口多，功能简单便捷。小程序功能快速迭代，意味着围绕小程序的开发和生态工具建设将会是移动互联网的一个巨大机会。目前各行业内诸多企业单位纷纷加入了小程序开发，开通了小程序功能。虽然前段时间不少声音都不看好小程序，但小程序进行优化后，开放了很多入口，使得开发者和用户关注度不断提升。纵使一些高频和复杂应用暂时无法被小程序取代，但是一些低频应用的主要功能，只要能在小程序上实现，APP就可以完全卸载了。总的来说，微信小程序目前发展空间甚好，至于以后未来的发展仍旧不能够准确预测。

以上就是我们深圳市组创微电子有限公司为您介绍的微信小程序开发技术详情。如果您有智能电子产品的软硬件功能开发需求，可以放心交给我们，我们有丰富的电子产品定制开发经验，可以尽快评估开发周期与IC价格，也可以核算PCBA报价。我们是多家国内外芯片代理商，有MCU、语音IC、蓝牙IC与模块、wifi模块。我们的拥有硬件设计与软件开发能力。涵盖了电路设计、PCB设计、单片机开发、软件定制开发、APP定制开发、微信公众号开发、语音识别技术、蓝牙wifi开发等。还可以承接智能电子产品研发、家用电器方案设计、美容仪器开发、物联网应用开发、智能家居方案设计、TWS方案开发、蓝牙音频开发、儿童玩具方案开发、电子教育产品研发。