基于uni-app的微信小程序關(guān)鍵技術(shù)運(yùn)用

謝志妮

（廣東行政職業(yè)學(xué)院（廣東青年職業(yè)學(xué)院） 廣東省廣州市 510631）

1 引言

目前，各類小程序應(yīng)用使用十分普及，而開發(fā)小程序的技術(shù)隨著不同公司的產(chǎn)品，技術(shù)并不一致。支付寶小程序是使用支付寶的技術(shù)，頭條小程序使用的字節(jié)跳動(dòng)公司的技術(shù)，而微信小程序使用的是騰訊的wxml、wxss和js技術(shù)實(shí)現(xiàn)。對于開發(fā)者而言，開發(fā)一個(gè)小程序要同時(shí)兼顧各類平臺(tái)的小程序開發(fā)與維護(hù)，開發(fā)成本、時(shí)間成本和維護(hù)成本大大增加。同時(shí)，小程序、H5網(wǎng)站、移動(dòng)APP等應(yīng)用目前呈多端化發(fā)展，開發(fā)一個(gè)產(chǎn)品要兼顧各種設(shè)備、同時(shí)還需要考慮各種平臺(tái)，為降低開發(fā)和維護(hù)成本，需要使用一個(gè)統(tǒng)一的平臺(tái)，開發(fā)一次、多端運(yùn)行。目前，uni-app做了這方面的嘗試，可以將一個(gè)產(chǎn)品打包分發(fā)到各端應(yīng)用。本文以開發(fā)微信小程序?yàn)槔?，使用uni-app平臺(tái)進(jìn)行開發(fā)，同時(shí)兼顧微信小程序和H5網(wǎng)站。

2 技術(shù)概要

2.1 微信小程序技術(shù)

微信小程序使用wxml、wxss和js技術(shù)構(gòu)建前端應(yīng)用，其中wxml用于頁面結(jié)構(gòu)，框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。wxss是一套樣式語言，用于描述wxml的組件樣式。用來決定wxml的組件應(yīng)該怎么顯示。js實(shí)現(xiàn)頁面邏輯。

微信小程序原生技術(shù)在傳統(tǒng)web技術(shù)基礎(chǔ)上發(fā)展而來，類似相關(guān)的技術(shù)包括支付寶小程序和頭條小程序等。

2.2 H5技術(shù)

HTML5是構(gòu)建Web內(nèi)容的一種語言描述方式。HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語言方式．被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML5允許程序通過Web瀏覽器運(yùn)行，并且將視頻等目前需要插件和其它平臺(tái)才能使用的多媒體內(nèi)容也納入其中，這將使瀏覽器成為一種通用的平臺(tái)，用戶通過瀏覽器就能完成任務(wù)。此外，消費(fèi)者還可以訪問以遠(yuǎn)程方式存儲(chǔ)在“云”中的各種內(nèi)容，不受位置和設(shè)備的限制。

2.3 vue.js

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。

2.4 uni-app平臺(tái)

uni-app是一個(gè)使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。

uni-app也是更好的小程序開發(fā)框架、更好的APP跨平臺(tái)框架、更方便的H5開發(fā)框架。不管領(lǐng)導(dǎo)安排什么樣的項(xiàng)目，你都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維、不需要更改開發(fā)習(xí)慣。

圖1：課程圖文功能

3 系統(tǒng)功能設(shè)計(jì)

本文基于uni-app，使用vue技術(shù)開發(fā)UHelp大學(xué)生互助學(xué)習(xí)微信小程序，包括課程模塊，競賽模塊、生活模塊及個(gè)人信息模塊。其部分功能如圖1和圖2所示。

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

UHelp應(yīng)用使用HBuilderx開發(fā)項(xiàng)目，借助微信開發(fā)工具進(jìn)行微信小程序調(diào)試、借助postman進(jìn)行接口調(diào)試。相關(guān)的關(guān)鍵技術(shù)包括配置文件使用、組件復(fù)用思想、自適應(yīng)屏幕設(shè)計(jì)、網(wǎng)絡(luò)訪問架構(gòu)設(shè)計(jì)等。

4.1 配置文件

圖2：競賽視頻功能

圖3：課程模塊頂部導(dǎo)航欄

圖4：競賽模塊頂部導(dǎo)航欄

圖5：微信小程序頂部搜索框

圖6：H5網(wǎng)站頂部搜索框

圖7：調(diào)用微信開發(fā)工具

圖8：運(yùn)行微信開發(fā)工具

每個(gè)項(xiàng)目用pages.json文件進(jìn)行配置，包括項(xiàng)目各個(gè)頁面路徑、頁面樣式、項(xiàng)目主題顏色、背景顏色、底部導(dǎo)航菜單、各種資源圖片、各種顏色值等。配置文件相當(dāng)于整個(gè)應(yīng)用的配置中心，各種配置都在此文件中完成。

4.2 組件復(fù)用設(shè)計(jì)

組件是Vue開發(fā)中重要技術(shù)，其主要的作用的復(fù)用代碼，以減少代碼編寫量、提高編程效率，有利于團(tuán)隊(duì)協(xié)助開發(fā)，更有利于系統(tǒng)的后期維護(hù)工作，降低系統(tǒng)維護(hù)成本。

在開發(fā)過程中，對于通用模塊設(shè)計(jì)成單獨(dú)的組件，不同的部分通過傳參的方式或者設(shè)計(jì)插槽（slot）進(jìn)行動(dòng)態(tài)處理。

4.2.1 頂部導(dǎo)航復(fù)用

頂部導(dǎo)航是一種通用模塊，數(shù)據(jù)展示，鏈接不一樣，這樣可以將其設(shè)計(jì)成為一個(gè)組件，在使用過程中傳輸不同的參數(shù)實(shí)現(xiàn)。如圖3和圖4所示。

圖3和圖4是在不同模塊中的頂部導(dǎo)航欄，樣式一樣，部分導(dǎo)航項(xiàng)目不一樣，鏈接也不一樣，這種情況，把導(dǎo)航欄抽取出來，組成一個(gè)頂部導(dǎo)航組件，實(shí)現(xiàn)代碼復(fù)用。

4.2.2 內(nèi)容列表復(fù)用

內(nèi)容展示列表也是一種通用模塊，數(shù)據(jù)展示，鏈接不一樣，這樣可以將其設(shè)計(jì)成為一個(gè)組件，在使用過程中傳輸不同的參數(shù)實(shí)現(xiàn)。在不同模塊中的內(nèi)容列表，樣式一樣，部分列表內(nèi)容不一樣，鏈接也不一樣，這種情況，可以把內(nèi)容列表項(xiàng)抽取出來，組成一個(gè)列表項(xiàng)組件，實(shí)現(xiàn)代碼復(fù)用。

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

UHelp應(yīng)用可以以微信小程序方式訪問，同時(shí)也可以以H5手機(jī)網(wǎng)站訪問，但是兩種訪問方式訪問相同內(nèi)容呈現(xiàn)界面是不一樣，如圖5和圖6所示。

圖5和圖6在不同的平臺(tái)上所展示出來的效果是不一樣的，要求開發(fā)者在開發(fā)過程中進(jìn)行適配，為了設(shè)配屏幕，常用的方式是對運(yùn)行平臺(tái)進(jìn)行識(shí)別，不同的平臺(tái)使用不同的方式進(jìn)行展示。

4.4 Axios二次封裝

UHelp應(yīng)用使用Axios與服務(wù)端接口進(jìn)行通信。axios是一個(gè)基于Promise用于瀏覽器和nodejs的HTTP客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范，有以下特點(diǎn)：

（1）從瀏覽器中創(chuàng)建XMLHttpRequests。

（2）從node.js創(chuàng)建http請求。

（3）支持Promise API。

（4）攔截請求和響應(yīng)。

（5）轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)。

（6）取消請求。

（7）自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)。

（8）客戶端支持防御XSRF。

由于UHelp應(yīng)用訪問后端服務(wù)器接口比較多，涉及數(shù)據(jù)攔截、請求與響應(yīng)等內(nèi)容，硬編碼方式比較麻煩。為實(shí)現(xiàn)編碼易操作性，UHelp將axios進(jìn)行二次封裝，對axios進(jìn)行二次封裝之后，在開發(fā)調(diào)用遠(yuǎn)端服務(wù)器接口更加方便。

4.5 微信小程序開發(fā)工具測試

uni-app可以直接調(diào)用微信開發(fā)工具對小程序進(jìn)行調(diào)試，之后，系統(tǒng)自動(dòng)運(yùn)行微信開發(fā)工具，掃碼登錄后可以對程序進(jìn)行調(diào)試。操作方法如圖7、圖8所示。

5 總結(jié)

本文通過使用uni-app開發(fā)UHelp微信小程序，對開發(fā)的關(guān)鍵技術(shù)進(jìn)行了陳述，這些關(guān)鍵技術(shù)在開發(fā)過程中是經(jīng)過實(shí)踐的驗(yàn)證的，對其他開發(fā)者而言具有一定的參考價(jià)值。當(dāng)然，本應(yīng)用或許還存在一些其他的問題，這在后續(xù)開發(fā)過程中繼續(xù)完善和提高。