基于uni-app的微信小程序關鍵技術運用

謝志妮

（廣東行政職業學院（廣東青年職業學院） 廣東省廣州市 510631）

1 引言

目前，各類小程序應用使用十分普及，而開發小程序的技術隨著不同公司的產品，技術并不一致。支付寶小程序是使用支付寶的技術，頭條小程序使用的字節跳動公司的技術，而微信小程序使用的是騰訊的wxml、wxss和js技術實現。對于開發者而言，開發一個小程序要同時兼顧各類平臺的小程序開發與維護，開發成本、時間成本和維護成本大大增加。同時，小程序、H5網站、移動APP等應用目前呈多端化發展，開發一個產品要兼顧各種設備、同時還需要考慮各種平臺，為降低開發和維護成本，需要使用一個統一的平臺，開發一次、多端運行。目前，uni-app做了這方面的嘗試，可以將一個產品打包分發到各端應用。本文以開發微信小程序為例，使用uni-app平臺進行開發，同時兼顧微信小程序和H5網站。

2 技術概要

2.1 微信小程序技術

微信小程序使用wxml、wxss和js技術構建前端應用，其中wxml用于頁面結構，框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。wxss是一套樣式語言，用于描述wxml的組件樣式。用來決定wxml的組件應該怎么顯示。js實現頁面邏輯。

微信小程序原生技術在傳統web技術基礎上發展而來，類似相關的技術包括支付寶小程序和頭條小程序等。

2.2 H5技術

HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認為是互聯網的核心技術之一。HTML5允許程序通過Web瀏覽器運行，并且將視頻等目前需要插件和其它平臺才能使用的多媒體內容也納入其中，這將使瀏覽器成為一種通用的平臺，用戶通過瀏覽器就能完成任務。此外，消費者還可以訪問以遠程方式存儲在“云”中的各種內容，不受位置和設備的限制。

2.3 vue.js

Vue是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。

2.4 uni-app平臺

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

uni-app也是更好的小程序開發框架、更好的APP跨平臺框架、更方便的H5開發框架。不管領導安排什么樣的項目，你都可以快速交付，不需要轉換開發思維、不需要更改開發習慣。

圖1：課程圖文功能

3 系統功能設計

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

4 關鍵技術運用

UHelp應用使用HBuilderx開發項目，借助微信開發工具進行微信小程序調試、借助postman進行接口調試。相關的關鍵技術包括配置文件使用、組件復用思想、自適應屏幕設計、網絡訪問架構設計等。

4.1 配置文件

圖2：競賽視頻功能

圖3：課程模塊頂部導航欄

圖4：競賽模塊頂部導航欄

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

圖6：H5網站頂部搜索框

圖7：調用微信開發工具

圖8：運行微信開發工具

每個項目用pages.json文件進行配置，包括項目各個頁面路徑、頁面樣式、項目主題顏色、背景顏色、底部導航菜單、各種資源圖片、各種顏色值等。配置文件相當于整個應用的配置中心，各種配置都在此文件中完成。

4.2 組件復用設計

組件是Vue開發中重要技術，其主要的作用的復用代碼，以減少代碼編寫量、提高編程效率，有利于團隊協助開發，更有利于系統的后期維護工作，降低系統維護成本。

在開發過程中，對于通用模塊設計成單獨的組件，不同的部分通過傳參的方式或者設計插槽（slot）進行動態處理。

4.2.1 頂部導航復用

頂部導航是一種通用模塊，數據展示，鏈接不一樣，這樣可以將其設計成為一個組件，在使用過程中傳輸不同的參數實現。如圖3和圖4所示。

圖3和圖4是在不同模塊中的頂部導航欄，樣式一樣，部分導航項目不一樣，鏈接也不一樣，這種情況，把導航欄抽取出來，組成一個頂部導航組件，實現代碼復用。

4.2.2 內容列表復用

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

4.3 自適應設備屏幕

UHelp應用可以以微信小程序方式訪問，同時也可以以H5手機網站訪問，但是兩種訪問方式訪問相同內容呈現界面是不一樣，如圖5和圖6所示。

圖5和圖6在不同的平臺上所展示出來的效果是不一樣的，要求開發者在開發過程中進行適配，為了設配屏幕，常用的方式是對運行平臺進行識別，不同的平臺使用不同的方式進行展示。

4.4 Axios二次封裝

UHelp應用使用Axios與服務端接口進行通信。axios是一個基于Promise用于瀏覽器和nodejs的HTTP客戶端，本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規范，有以下特點：

（1）從瀏覽器中創建XMLHttpRequests。

（2）從node.js創建http請求。

（3）支持Promise API。

（4）攔截請求和響應。

（5）轉換請求數據和響應數據。

（6）取消請求。

（7）自動轉換JSON數據。

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

由于UHelp應用訪問后端服務器接口比較多，涉及數據攔截、請求與響應等內容，硬編碼方式比較麻煩。為實現編碼易操作性，UHelp將axios進行二次封裝，對axios進行二次封裝之后，在開發調用遠端服務器接口更加方便。

4.5 微信小程序開發工具測試

uni-app可以直接調用微信開發工具對小程序進行調試，之后，系統自動運行微信開發工具，掃碼登錄后可以對程序進行調試。操作方法如圖7、圖8所示。

5 總結

本文通過使用uni-app開發UHelp微信小程序，對開發的關鍵技術進行了陳述，這些關鍵技術在開發過程中是經過實踐的驗證的，對其他開發者而言具有一定的參考價值。當然，本應用或許還存在一些其他的問題，這在后續開發過程中繼續完善和提高。