微信小程序開發(fā)與運用

陜西服裝工程學(xué)院 劉天元 夏 明

伴隨著互聯(lián)網(wǎng)信息技術(shù)的高速發(fā)展以及手持設(shè)備逐步廣泛化運用，出現(xiàn)了很多移動運用，涵蓋了小程序、APP、H5網(wǎng)站等等，體現(xiàn)了多元化發(fā)展。在此過程中，小程序的類型增多，數(shù)量也獲得了高速增長，尤其是微信用戶基數(shù)非常大，微信小程序應(yīng)用數(shù)量持續(xù)增加。傳統(tǒng)方式下在微信小程序開發(fā)過程中，技術(shù)存在一定的局限性，而當前Uni-app推出的平臺工具能夠做到有效的應(yīng)用，與此同時能夠為微信小程序發(fā)布、H5移動網(wǎng)站等真正達成了一端開發(fā)多端應(yīng)用的目的，能夠有效提升綜合開發(fā)效率，最大化降低開發(fā)綜合成本和維護的難度。

當前來說，各種類型小程序應(yīng)用越來越廣泛，然而開發(fā)小程序的技術(shù)伴隨著技術(shù)產(chǎn)品的需求，出現(xiàn)了極大的差異性。具體而言，支付寶小程序所運用的是支付寶技術(shù)，頭條小程序所運用的則是字節(jié)跳動公司的技術(shù)，在微信小程序中所運用往往是騰訊的wxml、wxss和JS技術(shù)。本文主要是分析了微信小程序的開發(fā)運用，運用Uni-app平臺展開了開發(fā)，另外也兼顧了微信小程序與H5網(wǎng)站的運用。

1 方案設(shè)計

隨著社會的不斷進步，微信小程序被廣泛的運用到各行各業(yè)中。在此過程中，框架設(shè)計所創(chuàng)設(shè)的標簽語言能夠融合出基礎(chǔ)組件部門、事件系統(tǒng)內(nèi)容等，創(chuàng)設(shè)出符合頁面需求的結(jié)構(gòu)體。根據(jù)系統(tǒng)業(yè)務(wù)流程，滿足功能需求：（1）點標打卡；（2）個人信息管理；（3）定向越野規(guī)則分析。

2 系統(tǒng)實現(xiàn)

2.1 系統(tǒng)說明

在該系統(tǒng)中，主要是運用了JAVAWebServlet技術(shù)來達成所需功能；相對來說，JAVAWebServlet與微信小程序開展數(shù)據(jù)交互非常方便，小程序端能夠在JS中直接運用，獲得相應(yīng)的數(shù)據(jù)信息。另外，可以最大化降低后臺中對響應(yīng)性能方面的影響，大部分的邏輯處理往往是在小程序端JS中開展，而后臺往往只是輔助數(shù)據(jù)信息的獲取。本系統(tǒng)數(shù)據(jù)主要是位于阿里云服務(wù)器中，Java在本地開展關(guān)于云數(shù)據(jù)庫的連接與操作過程中往往都離不開JDBC，本地數(shù)據(jù)也是運用了tomcat進行接收。

2.2 定向越野活動模塊

在用戶完成個人信息之后，能夠在頁面活動管理中進行活動內(nèi)容的發(fā)布。在創(chuàng)建活動過程中，必然需要填寫相關(guān)的名稱信息、活動時間、活動報名截止信息、活動報名人數(shù)的限制等等內(nèi)容，此類信息屬于系統(tǒng)運行過程中的必填項目，假如并沒有填寫以上就上傳項目，則系統(tǒng)中會出現(xiàn)相應(yīng)的錯誤提示。另外，活動報名截止時間要早于活動開始時間，活動開始時間則不必一定早于系統(tǒng)當前時間。

2.3 點標生成模塊

一直以來，用戶能夠在系統(tǒng)中的頁面點標管理中看到用戶提前設(shè)置好的點標集；假如沒有設(shè)置點標，則可以在頁面下方的添加按鈕中進入點標集添加頁面，在添加過程中根據(jù)用戶來選擇點標的個人情況，在完成選擇之后能夠自動生成序號信息，代號則是從31號開始的點標集內(nèi)容，在點標集生成之后可以刪除個別點標，在完成刪除之后，序號逐步往前發(fā)展，代號則沒有改變。

2.4 二維碼掃描模塊

在活動開始之后，用戶能夠進入到活動的頁面中，在頁面中添加管理按鈕。一旦用戶需要開展點標打卡過程時，則需要點擊掃一掃按鈕，掃描完成打卡的同時記錄具體打卡的時間，在二維碼掃描完成之后則顯示為點標代號。尤其是在活動開始的過程中，二維碼掃描完成以后，可以與提前設(shè)定好的點標進行對比分析，假如打卡順序并沒有根據(jù)原有的點標順序，則會判定成績無效。另外，在總體打卡過程中，超過活動時間，成績也會自動判為無效。

3 關(guān)鍵技術(shù)運用

3.1 配置文件

從某種意義上來說，每一個項目都是運用了pages.json文件進行配置，其中涉及到了項目中的各個頁面路徑、樣式、不同的主題顏色、背景顏色、各種資源的圖片等等。換句話而言，配置文件幾乎相當于是應(yīng)用過程中的核心內(nèi)容，不同的配置內(nèi)容都是在此文件中進行。

3.2 組件復(fù)用設(shè)計

在開發(fā)中，針對通用模塊所創(chuàng)設(shè)的單獨組件，不同方式下的內(nèi)容則是運用傳入?yún)?shù)的模式或者是設(shè)計插槽（slot）展開處置。（1）頂部導(dǎo)航復(fù)用

一直以來，頂部導(dǎo)航屬于一種通用的模塊，數(shù)據(jù)展示信息、鏈接等等各不相同，在此過程中能夠?qū)⑵湓O(shè)計成為一個組件，在運用過程中能夠達成不同參數(shù)的運輸。在各個模塊中的頂部導(dǎo)航欄，具體來說樣式存在一定的差異性、部分導(dǎo)航項目也存在一定的差異性，鏈接也各不相同。在此背景下，將導(dǎo)航欄進行抽取，最終形成頂部導(dǎo)航組件部分，真正的達成代碼復(fù)用之目的。

（2）內(nèi)容列表復(fù)用

相對來說，內(nèi)容展示列表屬于通用模塊，在數(shù)據(jù)展示過程中的鏈接也并不相同，能夠形成完整的組件，在各個不同的模塊的內(nèi)容中，由于樣式、列表內(nèi)容不同，鏈接也并不相同，在此背景下，需要將內(nèi)容列表項進行優(yōu)化調(diào)整，最終構(gòu)成列表項組件。

3.3 自適應(yīng)設(shè)備屏幕

Uhelp應(yīng)用可以以微信小程序方式訪問，同時也可以以H5手機網(wǎng)站訪問，但是這兩種訪問方式訪問相同內(nèi)容呈現(xiàn)出的界面是不一樣，在不同平臺中所體現(xiàn)出的效果也各不相同，因此需要開發(fā)者在開發(fā)過程中進行優(yōu)化調(diào)整。為了完成屏幕調(diào)整，最為常用的方式往往是平臺識別，相對來說不同平臺所運用的方式也各不相同。

3.4 Axios二次封裝

UHelp應(yīng)用主要是采用了Axios與服務(wù)器端口完成通信功能。Axios本身屬于根據(jù)Promise瀏覽器以及Promise。本質(zhì)上來說，此方面屬于原生XHR的一種封裝方式，其本身也屬于Promise的一種完成模塊，幾乎符合ES最新方式，存在如下的幾個特征：（1）從瀏覽器中創(chuàng)建XMLHttpRequests；（2）從node.js創(chuàng)建http請求；（3）支持PromiseAPI；（4）攔截請求和響應(yīng)；（5）轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)；（6）取消請求；（7）自動轉(zhuǎn)換JSON數(shù)據(jù)；（8）客戶端支持防御XSRF。

4 系統(tǒng)測試

在軟件正式進入生產(chǎn)運營階段之前，系統(tǒng)測試的主要目標則是最大程度發(fā)現(xiàn)軟件運行中可能存在的問題。通常而言，軟件測試存在黑盒測試與白盒測試兩種測試方法。在黑盒測試過程中，通常是將程序視為一個黑盒，不考慮程序內(nèi)部的結(jié)構(gòu)與具體處理方式，換句話而言，黑盒測試是在程序界面開展測試，只是檢測程序功能是否滿足規(guī)范需求。而白盒測試則與黑盒測試截然相反，其將程序視為透明的盒子，測試者完全清楚程序結(jié)構(gòu)與處理方式，該方法是基于程序內(nèi)部邏輯的背景下測試，在程序測試過程中，往往是根據(jù)預(yù)訂路徑來進行執(zhí)行。在該系統(tǒng)中，測試主要是根據(jù)黑盒測試法來進行。

結(jié)語：基于相關(guān)測試結(jié)構(gòu)，本系統(tǒng)幾乎完成了系統(tǒng)原有的功能需求。在此系統(tǒng)中，各個功能的模塊可以有效的執(zhí)行，同時在執(zhí)行過程中并沒有呈現(xiàn)出明顯錯誤。在系統(tǒng)運行過程中，各類情況良好、頁面的響應(yīng)速度相對十分快速，保障了系統(tǒng)運用的安全性?？偠灾鞠到y(tǒng)真正展現(xiàn)出了基本的功能需求，系統(tǒng)也可以保障流暢運行，順利通過了系統(tǒng)測試。