基于微信平臺(tái)金融webApp的設(shè)計(jì)與實(shí)現(xiàn)

宣哲鵬 駱銷奇 董浩 王義 蒙誠(chéng)新 張晶

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

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

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2020）08-0077-02

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

1 開(kāi)發(fā)技術(shù)與平臺(tái)

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

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

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

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

1.2 Vue

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

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

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

1.3 SpringboOt

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

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

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

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

2.1 需求分析

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

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

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

2.2 系統(tǒng)功能

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

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

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

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

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

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

3 總結(jié)

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

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

收稿日期：2019-11-27

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

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