宣哲鵬 駱銷奇 董浩 王義 蒙誠新 張晶

摘要：隨著投資熱度的不斷上漲，許多金融App涌現(xiàn)而出。相比于傳統(tǒng)App煩瑣的更新下載和占用空間大等問題，我更傾向于開發(fā)植入與微信端的webApp。webApp的跨平臺性能，使它在技術(shù)的運用上限制性較少，既能用于PC端的開發(fā)，還能用于移動端的開發(fā)，而且與iOS和Android相比，還具有可及時更新的優(yōu)勢，不受平臺審核的約束。將其植入微信平臺，大大減少了推廣難度。該文主要介紹了嵌入于微信公眾號的金融App的開發(fā)、設(shè)計和應(yīng)用。

關(guān)鍵詞：金融;微信;webApp

中圖分類號：TP393 文獻標識碼：A

文章編號：1009-3044（2020）08-0077-02

隨著股民數(shù)量的不斷攀升，據(jù)中登公司統(tǒng)計，至2019年9月滬深兩市的投資者數(shù)量達到了1.57億，約占中國人口的11%。如今，物質(zhì)生活越來越豐富，許多人開始增加收入渠道，而股市成了許多人投資選擇。由于移動設(shè)備的普及，股民大多數(shù)放棄了到證券大廳操作，而選擇手機或電腦進行在線證券交易。近年來，智能手機成了人們必不可少的工具。而H5以其跨平臺，成本低，周期短等特性，迅速占領(lǐng)了移動平臺。H5從最初的營銷產(chǎn)品，轉(zhuǎn)變?yōu)槿缃竦膬?nèi)容產(chǎn)品，使得人們不用安裝各類軟件，直接使用瀏覽器就可以使用。也就是所謂的移動端網(wǎng)頁應(yīng)用webApp。WebApp不需要下載，而且可以及時更新，但問題在于進入的入口只能通過瀏覽器輸入網(wǎng)址，這樣會加大用戶的操作量，導致用戶的減少。所以我將它嵌入微信公眾號，讓用戶在使用微信的同時，也可以隨時訪問應(yīng)用。

1 開發(fā)技術(shù)與平臺

該App將采用Vue.js+springboot前后端分離框架開發(fā)。這兩個框架都是現(xiàn)在最主流的開發(fā)框架之一。下面會對其優(yōu)勢進行分析。

1.1基于微信平臺的構(gòu)建

就目前而言，微信公眾號是自媒體時代做得最好、最大、最成功的一個平臺，不僅讓廣大用戶能夠接收到了有價值的信息，同時造就了一批又一批的淘金者和知名自媒體。在12年騰訊率先開啟微信公眾號，那個時候的大家只知道在里面發(fā)文章、發(fā)視頻，向大家傳達自己的思維、見識。如今，經(jīng)過許多人的摸索，公眾號的商業(yè)模式和價值體現(xiàn)了出來。

該App將依托微信公眾號，搭建一個金融平臺。用戶可以通過公眾號進入此應(yīng)用。同時，公眾號會主動向用戶推送信息，以此來代替原生App的信息推送功能。相比于將應(yīng)用開發(fā)為微信小程序，webApp更加自由與開放。微信小程序具有過審嚴格，域名和服務(wù)器都需備案等限制，而將webApp部署于公眾號，既避開了這些限制，又具有了與小程序近似的功能。

1.2 Vue

Vue是時下最熱門的前端框架之一，以輕量級和易上手著稱。vue的工作原理也是他的核心功能主要是響應(yīng)數(shù)據(jù)綁定與組件系統(tǒng)。

Vue的數(shù)據(jù)綁定是通過Object.defineProperty0來劫持各個屬性的set和get。在數(shù)據(jù)變動時出發(fā)相應(yīng)的監(jiān)聽回調(diào)。也就是說，當數(shù)據(jù)變化時，視圖中顯示的數(shù)據(jù)也會實時發(fā)生改變。而不需要開發(fā)者手動dom去修改數(shù)據(jù)。

組件（Component）是Vue最強大的功能之一。組件化是Vue的精髓，Vue項目中的頁面其實就是有一個個組件構(gòu)成的。組件可以擴展html元素，封裝可重用的代碼。如下圖所示，當你將一個頁面拆分開來后，代碼的可復(fù)用性將大大地提高，而且每個部分可以獨立維護。哪個地方出問題，直接去修改對應(yīng)的組件即可。

1.3 SpringboOt

springboot，其設(shè)計目的是用來簡化新Spring應(yīng)用的初始搭建以及開發(fā)過程，該框架使用了特定的方式來進行配置，快速的啟動Spring應(yīng)用。人員不再需要定義樣板化的配置。SpringBoot應(yīng)用本質(zhì)上就是一個基于Spring框架的應(yīng)用，它是Spring對“約定優(yōu)先于配置”理念的最佳實踐產(chǎn)物，它能夠幫助開發(fā)者更快速高效地構(gòu)建基于Spring生態(tài)圈的應(yīng)用。

Spring的優(yōu)點有：使用Spring的10C容器，將對象之間的依賴關(guān)系交給Spdng，降低組件之間的耦合性，讓我們更專注于應(yīng)用邏輯;可以提供眾多服務(wù)，事務(wù)管理，WS等;AOP的很好支持，方便面向切面編程;對主流的框架提供了很好的集成支持，如Hibernate.Stmts2，JPA等;Spring DI機制降低了業(yè)務(wù)對象替換的復(fù)雜性;Spring屬于低侵入，代碼污染極低;Spring的高度可開放性，并不強制依賴于Spring，開發(fā)者可以自由選擇Spring部分或全部。

雖然spring屬于輕量級的框架，但他的配置確實重量級的。Spring使用許多xml文件配置，這些配置都代表了開發(fā)時的損耗。除此之外，項目的依賴管理也是一件耗時耗力的事情。Springboot就是對上述spring的缺點進行改進，基于約定優(yōu)于配置的思想，讓開發(fā)人員不必再配置和邏輯業(yè)務(wù)之間來回切換。讓人能全身心地投入到邏輯業(yè)務(wù)的代碼編寫中，從而大大提高了開發(fā)的效率，一定程度上縮短了項目周期。

2 App的設(shè)計與實現(xiàn)

2.1 需求分析

作為一個移動端金融App，安全性和實時性應(yīng)該是開發(fā)中要注意的第一要素。在用戶交易中，保護用戶的賬戶安全尤為重要。與此同時，股市行情瞬息萬變，實時的股市動態(tài)能客戶更快做出判斷。在保證行情的實時之后，應(yīng)該確保的是數(shù)據(jù)的正確性。任意一個數(shù)據(jù)的錯誤都可能讓用戶損失慘重。

同時該軟件是基于微信公眾平臺開發(fā)的webApp，去掉了App煩瑣的下載環(huán)節(jié)，更易宣傳和獲取用戶信息。移動端相比pc端的劣勢主要在以下幾點：不能進行金額較大和操作復(fù)雜的交易;移動端交易界面普遍脫離行情界面，便捷性受限;移動端安全性存在隱患;移動端信息的豐富性弱于pc端。由此可見，便捷性和易操作性應(yīng)該作為移動端證券App的優(yōu)先考慮項。而在此基礎(chǔ)上，軟件的流暢度就顯得尤為重要。

因此安全性、實時性、正確性這三點是該App的基礎(chǔ)，在做到這三點的情況下，應(yīng)盡可能地提高用戶體驗，使軟件操作更為流暢，便捷。

2.2 系統(tǒng)功能

該App是采用前后端分離框架開發(fā)的單頁面應(yīng)用。在用戶第一使用時，就會加載所有html，css和JS。在后續(xù)使用中，內(nèi)容的改變就不需要加載整個頁面，流暢性就會大大的地增加，使用戶體驗更接近于App。在與后端交互的過程中，前端只負責接收和返回數(shù)據(jù)，所有數(shù)據(jù)的處理皆由后端操作，這樣既提高了安全性，又使性能和擴展性獲得了提升。

登錄功能，用戶通過微信公眾號進入該App時，會自動獲取改用戶的微信Appid并向后臺發(fā)出登錄請求，然后在后臺生成并返回token，前端獲取到后存入localstorage。如果用戶是第一次登錄，則會將用戶的用戶名和Appid存人數(shù)據(jù)庫中，生成一條用戶信息的數(shù)據(jù)。在用戶登錄期間，每一次請求都會在請求頭部附帶token，后臺則會設(shè)置攔截器，在收到請求時驗證token的合法性，如果合法，則執(zhí)行請求。鑒于用戶每一次使用時長都不會超過一個小時，所以token有效時長為一小時。

自選功能，用戶可以在股票詳情頁中，將股票添加至自選中。在自選頁面，用戶可以直接看到已添加的股票的實時股價和漲跌率，方便用戶快速觀察自己關(guān)注的股票。同時頁面設(shè)置了tab頁簽，可以將自選股按照滬深、港股、美股三個股市區(qū)分開來，也可以按照股價或漲跌率進行排序。

行情界面，用戶可以直接看到各個大盤的走向和信息。在該頁面中，還設(shè)置了熱門行業(yè)板塊和概念行業(yè)板塊，這兩個板塊中會將排名靠前的六個行業(yè)的指數(shù)和漲跌率展示出來。點擊后還可以查看到該行業(yè)股票排行。除了展示的之外，用戶可以通過頂部搜索欄直接查詢自己想要查看的股票信息。

新聞界面，新聞板塊主要分為要聞、愛看、7*24、自選四個板塊。進入首先顯示的是要聞，頁簽下面是一個輪播圖，主要顯示當日頭條，圖片會自動切換，也可以通過滑動屏幕切換。點擊圖片可以進入新聞詳情頁。輪播圖下方是新聞列表，下拉可以加載更多。其他板塊顯示都是新聞列表，但內(nèi)容不同。愛看展示一些趣味新聞，7*24小時展示當日新聞細節(jié)，自選展示與用戶自選股相關(guān)的新聞。

交易界面，交易分為買入，賣出，撤單、持倉和查詢。買入和賣出可以交易股票，撤單中可以將還未完成的訂單取消。持倉可以查看到用戶的總資產(chǎn)，持倉信息和盈虧信息。查詢可以查看歷史訂單信息。

3 總結(jié)

該App主要運用了時下比較熱門的幾個框架，如spring-boot，vue。雖然開發(fā)的App具備的都是基礎(chǔ)功能.但本文旨在為想開發(fā)webApp的人提供一個參考和方向。WebApp開發(fā)周期短，成本低，是許多個人創(chuàng)業(yè)和小型公司很好的選擇。同時，我認為webApp如今最好的載體還是微信公眾號。隨著移動技術(shù)的不斷發(fā)展，webApp也會有更多的可能。

【通聯(lián)編輯：光文玲】

收稿日期：2019-11-27

基金項目：海南省創(chuàng)新訓練項目《Ittitude投資助理》資助（項目編號：201813892014）

作者簡介：宣哲鵬（1998-）.男，浙江義烏人，在校學生;駱銷奇（1998-），男，浙江海寧人，在校學生;董浩（1997-），男，吉林四平人，在校學生;王義（1997-），男，湖北黃岡人，在校學生;蒙誠新（1998-），男，廣西南寧人，在校學生;指導老師：張晶（1983-），女，海南三亞人，講師。