微信小程序开发与运用

陕西服装工程学院 刘天元 夏 明

伴随着互联网信息技术的高速发展以及手持设备逐步广泛化运用，出现了很多移动运用，涵盖了小程序、APP、H5网站等等，体现了多元化发展。在此过程中，小程序的类型增多，数量也获得了高速增长，尤其是微信用户基数非常大，微信小程序应用数量持续增加。传统方式下在微信小程序开发过程中，技术存在一定的局限性，而当前Uni-app推出的平台工具能够做到有效的应用，与此同时能够为微信小程序发布、H5移动网站等真正达成了一端开发多端应用的目的，能够有效提升综合开发效率，最大化降低开发综合成本和维护的难度。

当前来说，各种类型小程序应用越来越广泛，然而开发小程序的技术伴随着技术产品的需求，出现了极大的差异性。具体而言，支付宝小程序所运用的是支付宝技术，头条小程序所运用的则是字节跳动公司的技术，在微信小程序中所运用往往是腾讯的wxml、wxss和JS技术。本文主要是分析了微信小程序的开发运用，运用Uni-app平台展开了开发，另外也兼顾了微信小程序与H5网站的运用。

1 方案设计

随着社会的不断进步，微信小程序被广泛的运用到各行各业中。在此过程中，框架设计所创设的标签语言能够融合出基础组件部门、事件系统内容等，创设出符合页面需求的结构体。根据系统业务流程，满足功能需求：（1）点标打卡；（2）个人信息管理；（3）定向越野规则分析。

2 系统实现

2.1 系统说明

在该系统中，主要是运用了JAVAWebServlet技术来达成所需功能；相对来说，JAVAWebServlet与微信小程序开展数据交互非常方便，小程序端能够在JS中直接运用，获得相应的数据信息。另外，可以最大化降低后台中对响应性能方面的影响，大部分的逻辑处理往往是在小程序端JS中开展，而后台往往只是辅助数据信息的获取。本系统数据主要是位于阿里云服务器中，Java在本地开展关于云数据库的连接与操作过程中往往都离不开JDBC，本地数据也是运用了tomcat进行接收。

2.2 定向越野活动模块

在用户完成个人信息之后，能够在页面活动管理中进行活动内容的发布。在创建活动过程中，必然需要填写相关的名称信息、活动时间、活动报名截止信息、活动报名人数的限制等等内容，此类信息属于系统运行过程中的必填项目，假如并没有填写以上就上传项目，则系统中会出现相应的错误提示。另外，活动报名截止时间要早于活动开始时间，活动开始时间则不必一定早于系统当前时间。

2.3 点标生成模块

一直以来，用户能够在系统中的页面点标管理中看到用户提前设置好的点标集；假如没有设置点标，则可以在页面下方的添加按钮中进入点标集添加页面，在添加过程中根据用户来选择点标的个人情况，在完成选择之后能够自动生成序号信息，代号则是从31号开始的点标集内容，在点标集生成之后可以删除个别点标，在完成删除之后，序号逐步往前发展，代号则没有改变。

2.4 二维码扫描模块

在活动开始之后，用户能够进入到活动的页面中，在页面中添加管理按钮。一旦用户需要开展点标打卡过程时，则需要点击扫一扫按钮，扫描完成打卡的同时记录具体打卡的时间，在二维码扫描完成之后则显示为点标代号。尤其是在活动开始的过程中，二维码扫描完成以后，可以与提前设定好的点标进行对比分析，假如打卡顺序并没有根据原有的点标顺序，则会判定成绩无效。另外，在总体打卡过程中，超过活动时间，成绩也会自动判为无效。

3 关键技术运用

3.1 配置文件

从某种意义上来说，每一个项目都是运用了pages.json文件进行配置，其中涉及到了项目中的各个页面路径、样式、不同的主题颜色、背景颜色、各种资源的图片等等。换句话而言，配置文件几乎相当于是应用过程中的核心内容，不同的配置内容都是在此文件中进行。

3.2 组件复用设计

在开发中，针对通用模块所创设的单独组件，不同方式下的内容则是运用传入参数的模式或者是设计插槽（slot）展开处置。（1）顶部导航复用

一直以来，顶部导航属于一种通用的模块，数据展示信息、链接等等各不相同，在此过程中能够将其设计成为一个组件，在运用过程中能够达成不同参数的运输。在各个模块中的顶部导航栏，具体来说样式存在一定的差异性、部分导航项目也存在一定的差异性，链接也各不相同。在此背景下，将导航栏进行抽取，最终形成顶部导航组件部分，真正的达成代码复用之目的。

（2）内容列表复用

相对来说，内容展示列表属于通用模块，在数据展示过程中的链接也并不相同，能够形成完整的组件，在各个不同的模块的内容中，由于样式、列表内容不同，链接也并不相同，在此背景下，需要将内容列表项进行优化调整，最终构成列表项组件。

3.3 自适应设备屏幕

Uhelp应用可以以微信小程序方式访问，同时也可以以H5手机网站访问，但是这两种访问方式访问相同内容呈现出的界面是不一样，在不同平台中所体现出的效果也各不相同，因此需要开发者在开发过程中进行优化调整。为了完成屏幕调整，最为常用的方式往往是平台识别，相对来说不同平台所运用的方式也各不相同。

3.4 Axios二次封装

UHelp应用主要是采用了Axios与服务器端口完成通信功能。Axios本身属于根据Promise浏览器以及Promise。本质上来说，此方面属于原生XHR的一种封装方式，其本身也属于Promise的一种完成模块，几乎符合ES最新方式，存在如下的几个特征：（1）从浏览器中创建XMLHttpRequests；（2）从node.js创建http请求；（3）支持PromiseAPI；（4）拦截请求和响应；（5）转换请求数据和响应数据；（6）取消请求；（7）自动转换JSON数据；（8）客户端支持防御XSRF。

4 系统测试

在软件正式进入生产运营阶段之前，系统测试的主要目标则是最大程度发现软件运行中可能存在的问题。通常而言，软件测试存在黑盒测试与白盒测试两种测试方法。在黑盒测试过程中，通常是将程序视为一个黑盒，不考虑程序内部的结构与具体处理方式，换句话而言，黑盒测试是在程序界面开展测试，只是检测程序功能是否满足规范需求。而白盒测试则与黑盒测试截然相反，其将程序视为透明的盒子，测试者完全清楚程序结构与处理方式，该方法是基于程序内部逻辑的背景下测试，在程序测试过程中，往往是根据预订路径来进行执行。在该系统中，测试主要是根据黑盒测试法来进行。

结语：基于相关测试结构，本系统几乎完成了系统原有的功能需求。在此系统中，各个功能的模块可以有效的执行，同时在执行过程中并没有呈现出明显错误。在系统运行过程中，各类情况良好、页面的响应速度相对十分快速，保障了系统运用的安全性。总而言之，本系统真正展现出了基本的功能需求，系统也可以保障流畅运行，顺利通过了系统测试。