基于微信平台金融webApp的设计与实现

宣哲鹏 骆销奇 董浩 王义 蒙诚新 张晶

摘要：随着投资热度的不断上涨，许多金融App涌现而出。相比于传统App烦琐的更新下载和占用空间大等问题，我更倾向于开发植入与微信端的webApp。webApp的跨平台性能，使它在技术的运用上限制性较少，既能用于PC端的开发，还能用于移动端的开发，而且与iOS和Android相比，还具有可及时更新的优势，不受平台审核的约束。将其植入微信平台，大大减少了推广难度。该文主要介绍了嵌入于微信公众号的金融App的开发、设计和应用。

关键词：金融;微信;webApp

中图分类号：TP393 文献标识码：A

文章编号：1009-3044（2020）08-0077-02

随着股民数量的不断攀升，据中登公司统计，至2019年9月沪深两市的投资者数量达到了1.57亿，约占中国人口的11%。如今，物质生活越来越丰富，许多人开始增加收入渠道，而股市成了许多人投资选择。由于移动设备的普及，股民大多数放弃了到证券大厅操作，而选择手机或电脑进行在线证券交易。近年来，智能手机成了人们必不可少的工具。而H5以其跨平台，成本低，周期短等特性，迅速占领了移动平台。H5从最初的营销产品，转变为如今的内容产品，使得人们不用安装各类软件，直接使用浏览器就可以使用。也就是所谓的移动端网页应用webApp。WebApp不需要下载，而且可以及时更新，但问题在于进入的入口只能通过浏览器输入网址，这样会加大用户的操作量，导致用户的减少。所以我将它嵌入微信公众号，让用户在使用微信的同时，也可以随时访问应用。

1 开发技术与平台

该App将采用Vue.js+springboot前后端分离框架开发。这两个框架都是现在最主流的开发框架之一。下面会对其优势进行分析。

1.1基于微信平台的构建

就目前而言，微信公众号是自媒体时代做得最好、最大、最成功的一个平台，不仅让广大用户能够接收到了有价值的信息，同时造就了一批又一批的淘金者和知名自媒体。在12年腾讯率先开启微信公众号，那个时候的大家只知道在里面发文章、发视频，向大家传达自己的思维、见识。如今，经过许多人的摸索，公众号的商业模式和价值体现了出来。

该App将依托微信公众号，搭建一个金融平台。用户可以通过公众号进入此应用。同时，公众号会主动向用户推送信息，以此来代替原生App的信息推送功能。相比于将应用开发为微信小程序，webApp更加自由与开放。微信小程序具有过审严格，域名和服务器都需备案等限制，而将webApp部署于公众号，既避开了这些限制，又具有了与小程序近似的功能。

1.2 Vue

Vue是时下最热门的前端框架之一，以轻量级和易上手著称。vue的工作原理也是他的核心功能主要是响应数据绑定与组件系统。

Vue的数据绑定是通过Object.defineProperty0來劫持各个属性的set和get。在数据变动时出发相应的监听回调。也就是说，当数据变化时，视图中显示的数据也会实时发生改变。而不需要开发者手动dom去修改数据。

组件（Component）是Vue最强大的功能之一。组件化是Vue的精髓，Vue项目中的页面其实就是有一个个组件构成的。组件可以扩展html元素，封装可重用的代码。如下图所示，当你将一个页面拆分开来后，代码的可复用性将大大地提高，而且每个部分可以独立维护。哪个地方出问题，直接去修改对应的组件即可。

1.3 SpringboOt

springboot，其设计目的是用来简化新Spring应用的初始搭建以及开发过程，该框架使用了特定的方式来进行配置，快速的启动Spring应用。人员不再需要定义样板化的配置。SpringBoot应用本质上就是一个基于Spring框架的应用，它是Spring对“约定优先于配置”理念的最佳实践产物，它能够帮助开发者更快速高效地构建基于Spring生态圈的应用。

Spring的优点有：使用Spring的10C容器，将对象之间的依赖关系交给Spdng，降低组件之间的耦合性，让我们更专注于应用逻辑;可以提供众多服务，事务管理，WS等;AOP的很好支持，方便面向切面编程;对主流的框架提供了很好的集成支持，如Hibernate.Stmts2，JPA等;Spring DI机制降低了业务对象替换的复杂性;Spring属于低侵入，代码污染极低;Spring的高度可开放性，并不强制依赖于Spring，开发者可以自由选择Spring部分或全部。

虽然spring属于轻量级的框架，但他的配置确实重量级的。Spring使用许多xml文件配置，这些配置都代表了开发时的损耗。除此之外，项目的依赖管理也是一件耗时耗力的事情。Springboot就是对上述spring的缺点进行改进，基于约定优于配置的思想，让开发人员不必再配置和逻辑业务之间来回切换。让人能全身心地投入到逻辑业务的代码编写中，从而大大提高了开发的效率，一定程度上缩短了项目周期。

2 App的设计与实现

2.1 需求分析

作为一个移动端金融App，安全性和实时性应该是开发中要注意的第一要素。在用户交易中，保护用户的账户安全尤为重要。与此同时，股市行情瞬息万变，实时的股市动态能客户更快做出判断。在保证行情的实时之后，应该确保的是数据的正确性。任意一个数据的错误都可能让用户损失惨重。

同时该软件是基于微信公众平台开发的webApp，去掉了App烦琐的下载环节，更易宣传和获取用户信息。移动端相比pc端的劣势主要在以下几点：不能进行金额较大和操作复杂的交易;移动端交易界面普遍脱离行情界面，便捷性受限;移动端安全性存在隐患;移动端信息的丰富性弱于pc端。由此可见，便捷性和易操作性应该作为移动端证券App的优先考虑项。而在此基础上，软件的流畅度就显得尤为重要。

因此安全性、实时性、正确性这三点是该App的基础，在做到这三点的情况下，应尽可能地提高用户体验，使软件操作更为流畅，便捷。

2.2 系统功能

该App是采用前后端分离框架开发的单页面应用。在用户第一使用时，就会加载所有html，css和JS。在后续使用中，内容的改变就不需要加载整个页面，流畅性就会大大的地增加，使用户体验更接近于App。在与后端交互的过程中，前端只负责接收和返回数据，所有数据的处理皆由后端操作，这样既提高了安全性，又使性能和扩展性获得了提升。

登录功能，用户通过微信公众号进入该App时，会自动获取改用户的微信Appid并向后台发出登录请求，然后在后台生成并返回token，前端获取到后存入localstorage。如果用户是第一次登录，则会将用户的用户名和Appid存人数据库中，生成一条用户信息的数据。在用户登录期间，每一次请求都会在请求头部附带token，后台则会设置拦截器，在收到请求时验证token的合法性，如果合法，则执行请求。鉴于用户每一次使用时长都不会超过一个小时，所以token有效时长为一小时。

自选功能，用户可以在股票详情页中，将股票添加至自选中。在自选页面，用户可以直接看到已添加的股票的实时股价和涨跌率，方便用户快速观察自己关注的股票。同时页面设置了tab页签，可以将自选股按照沪深、港股、美股三个股市区分开来，也可以按照股价或涨跌率进行排序。

行情界面，用户可以直接看到各个大盘的走向和信息。在该页面中，还设置了热门行业板块和概念行业板块，这两个板块中会将排名靠前的六个行业的指数和涨跌率展示出来。点击后还可以查看到该行业股票排行。除了展示的之外，用户可以通過顶部搜索栏直接查询自己想要查看的股票信息。

新闻界面，新闻板块主要分为要闻、爱看、7*24、自选四个板块。进入首先显示的是要闻，页签下面是一个轮播图，主要显示当日头条，图片会自动切换，也可以通过滑动屏幕切换。点击图片可以进入新闻详情页。轮播图下方是新闻列表，下拉可以加载更多。其他板块显示都是新闻列表，但内容不同。爱看展示一些趣味新闻，7*24小时展示当日新闻细节，自选展示与用户自选股相关的新闻。

交易界面，交易分为买入，卖出，撤单、持仓和查询。买入和卖出可以交易股票，撤单中可以将还未完成的订单取消。持仓可以查看到用户的总资产，持仓信息和盈亏信息。查询可以查看历史订单信息。

3 总结

该App主要运用了时下比较热门的几个框架，如spring-boot，vue。虽然开发的App具备的都是基础功能.但本文旨在为想开发webApp的人提供一个参考和方向。WebApp开发周期短，成本低，是许多个人创业和小型公司很好的选择。同时，我认为webApp如今最好的载体还是微信公众号。随着移动技术的不断发展，webApp也会有更多的可能。

【通联编辑：光文玲】

收稿日期：2019-11-27

基金项目：海南省创新训练项目《Ittitude投资助理》资助（项目编号：201813892014）

作者简介：宣哲鹏（1998-）.男，浙江义乌人，在校学生;骆销奇（1998-），男，浙江海宁人，在校学生;董浩（1997-），男，吉林四平人，在校学生;王义（1997-），男，湖北黄冈人，在校学生;蒙诚新（1998-），男，广西南宁人，在校学生;指导老师：张晶（1983-），女，海南三亚人，讲师。