微信小程序开发研究

-52-第11期2018年6月No.11June，2018微信官方给出的小程序的解释是：“小程序是不需要下载安装便可以使用的应用，它实现了应用触手可及的梦想，用户扫一扫或搜一下即可打开应用，也体现了用完即走的理念，用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载。”[1]微信小程序自2017年1月9日正式上线以来，就引起广泛关注。微信团队也不停地对小程序进行更新。微信小程序的优势十分明显，小程序触及了PC网页，公众号，H5，APP无法触及的地方，其无需安装，用完即走的理念能够满足用户需求且节省手机内存。站在小程序的拥有者的立场，其开发成本大大减小，同时可借助微信强大的流量入口，因而也降低了推广的难度。总的来说，微信小程序是一种全新的方式，能够更好地在用户和服务中建立连接，并且可以在微信中便捷地获取和传播，具有不错的使用体验。1小程序开发前准备小程序采用了类似ReactNative和Weex一样的解析技术，开发者可以编写一套程序在多种客户端运行，同时，相比于公众号、微商城具有更好的原生体验。全面开放申请以后，作为企业、政府、媒体、其他组织或者个人的开发者，都可以申请并注册小程序。小程序和微信的订阅号、服务号以及企业号是并行的体系，具有独立的注册以及发布流程。1.1小程序接入流程：小程序的接入主要有4个步骤。（1）小程序注册：在微信公众平台官网首页（mp.weixin.qq.com）注册并提交注册信息、完善主体信息和管理员信息。（2）完善小程序信息：完善小程序的基本信息如名称、头像及服务范围等。开发前需绑定开发者并获取APPID，以保证程序可以通过手机进行扫码测试。（3）开发小程序：下载安装微信开发者工具，微信官方提供了一套完整的开发框架，开发者可以根据微信开发文档进行小程序的开发与调试。（4）代码审核及发布：小程序开发完成后，不能够直接发布，需提交代码与开发配置信息提交审核，完成后尚可发布。1.2微信Web开发者工具官方公布的微信开发工具名为微信Web开发者工具，小程序前端开发框架是微信官方提供的框架。微信Web开发工具是一种基于NativeSystem系统层的框架，由于并不是运行在浏览器中，所以JavaScript在Web中的一些诸如Document，Window等方法均不可使用，以往HTML5在加载的时候在网络环境会有所限制，需要逐步加载HTML，CSS，JS，然后返回数据，最后渲染页面展现在浏览器中[2]。用户总是需要等待很久，这样使得用户体验感大大降低。相比之下，小程序的两个线程：AppserviceThread和ViewThread会同时进行、并行加载，甚至AppserviceThread会更早执行，当视图线程加载完，通知Appservice，Appservice会把准备好的数据用setData的方法返回给视图线程。小程序的这种优化策略，可以减少用户的等待时间，加快小程序的响应速度。微信Web开发者工具区别于H5的开发工具+浏览器DeviceMode预览的模式，而是基于自己的开发者工具，可以实现同步本地文件+开发调试+编译预览+上传+发布等一整套流程。同时小程序自己开发了一套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文件（页面配置，不是必须）。基金项目：咸阳师范学院创新创业科研训练项目；项目编号：2017104。作者简介：武思怡（1997—），女，陕西咸阳人，本科生；研究方向：软件工程，微信小程序开发。武思怡，解佺，张雨，侯秉昀（咸阳师范学院计算机学院，陕西咸阳712000）摘要：文章从开发者的角度对小程序开发过程进行了简单说明，从环境与框架、组件、API等方面进行了比较全面的分析，介绍了小程序开发中的几个关键点，并对小程序的生存现状和未来发展趋势进行了分析。关键词：微信小程序；框架；API无线互联科技WirelessInternetTechnology微信小程序开发研究-53-第11期2018年6月No.11June，2018（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.1.2了解小程序框架微信小程序的开发是基于框架的，从软件设计角度来说，框架是一个可复用的软件架构解决方案，规定了应用的体系结构，阐明软件体系结构中各层次间及其层次内部各组件间的毅力关系，责任分配和控制流程，表现为一组接口、抽象类以及实例间协作的方法，是指对某一指定应用领域中的应用系统的部分设计与实现子系统的整体结构[3]。小程序开发框架的核心是一个响应的数据绑定系统。分为视图层（View）和逻辑层（APPService），小程序开发工具提供了视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间设置了数据传输和事件系统，使得开发者能够很简单地将重心放在数据与逻辑上。处理事务逻辑的地方被称为逻辑层。在微信小程序中，所有.js脚本文件的集合构成逻辑层。逻辑层与视图层相互配合，完成数据处理及接收事件反馈。框架的视图层由WXML与WXSS编写，通过组件进行展现。对于小程序本身，.wxml文件与.wxss文件的集合构成了视图层，逻辑层处理数据之后，会发送给视图层用于与用户的交互，同时接收用户对视图层的反馈。视图层以给定的样式展现数据并反馈事件给逻辑层，数据展现是通过组件来进行的。视图的基本构成是组件。2.2相关组件微信提供了一系列基本组件，可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件。（1）view/和html5中的div/类似，是布局中最基本的一个组件，任何一种复杂的布局都可以通过嵌套view/组件来实现，view/是一个块级容器组件，默认display：block，它是盒模型，在布局过程中一般推荐display:flex的写法。（2）textarea/是多行输入框，与HTML中不同的是，它的值需要赋值给value属性，而不是被标签包裹，是一个自闭合标签，css动画对textarea/组件无效。（3）navigator/是页面链接，和HTML中超链接标签a/一样，主要进行页面跳转控制。链接的内容可以是一个字、词或者一幅图片，通过点击内容实现页面的跳转。（4）canvas/主要用于绘制图形，其本身是一块无色透明区域，并没有绘制的能力，仅仅是图形容器，需要调节相关的应用程序编程接口（ApplicationProgrammingInterface，API）来完成实际的绘图任务。2.3API及其配置2.3.1域名配置根据小程序提供的组件，开发者可以根据需要设计UI界面，然而小程序的一些功能就要依赖框架提供的API来实现。在使用API时，首先要对小程序进行服务器域名的配置，每个小程序都需要设定通信的域名，小程序可以跟指定的域名进行网络通信。目前支持的有HTTPS（request）、上传文件（uploadFile）、下载文件（downloadFile）和WebSocket通信。2.3.2常用API（1）wx.request(Object)：实现小程序与开发者的服务器实现数据交互。request方法的作用是发起HTTPS请求，在小程序中，只能使用HTTPS请求而不能使用HTTP请求，一个微信小程序同时只能有5个网络请求连接。（2）WebSocket：request方法是通过客户端主动向服务器发起请求，而服务器端响应返回数据来实现通信的目的。这种方法存在缺点，那就是服务器不能主动向客户端发送消息。因此要实现服务器和客户端之间的即时通信只能采用轮询的方法，而且request的Header是十分长的，为了传输一个很小的数据会占用很多的宽带。针对这种情况，开发者可以通过小程序提供的WebSocket相关API创建WebSocket，WebSocket只需要服务器和浏览器通过HTTP协议进行一个握手的动作后单独建立一条传输控制协议（TransmissionControlProtocol，TCP）的通信通道就可以进行数据的传送，实现长连接以达到通信的目的。3项目发布3.1发布流程项目开发完成后，管理员需手动打包上传代码，填写相关配置类目并将代码提交审核，若第一次审核未通过，再次提交审核将开放提供测试的入口，该入口由开发者提供，用于微信审核人员审核微信小程序时登录。审核后手动发布即可。3.2上传原理管理员手动将代码打包上传是怎样实现的呢？编辑器本身是基于Web技术体系实现的。简单是说就是node+webkit，node提供给我们本地api的能力，而webkit提供给我们Web的能力，两者结合之后便可以使用JS+HTML实现本地应用程序。既然有nodejs，那打包选项里的功能就好实现了。其中ES6转ES5就是引入babel-core的node包，CSS补全是引入postcss和autoprefixer的node包，代码压缩则是引入uglifyjs的node包。无线互联科技·软件透视-54-第11期2018年6月No.11June，2018[参考文献][1]刘红卫.微信小程序应用探析[J].无线互联科技，2016（23）：11-12，40.[2]陈琦.基于Webpy+ApacheHTTPServer的微信小程序架构搭建研究[J].无线互联科技，2017（18）：50-51.[3]百度百科.框架[EB/OL].（2018-03-15）[2018-04-24].=aladdin.[4]刘玉佳.微信“小程序”开发的系统实现及前景分析[J].信息通信，2017（1）：260-261.StudyonthedevelopmentofWeChatappletsWuSiyi,XieQuan,ZhangYu,HouBingyun（SchoolofComputing,XianyangNormalUniversity,Xianyang712000,China）Abstract：Asimpleexplanationofthedevelopmentprocessofaappletfromtheperspectiveofthedeveloper,comprehensiveanalysisoftheenvironment,theframew