基于微信小程序平臺開發樣品管理程序

楊 杰

（福建省產品質量檢驗研究院，福建 福州 350002）

1 低壓電器樣品管理現狀與難點

1.1 低壓電器樣品介紹

低壓與高壓電器是以交流1200V、直流1500V進行劃分，低壓電器行業產品由開關、控制元件組成，而實際在工業或民用領域使用是將元器件組成低壓成套柜安裝在使用現場。因此檢測需要同時針對元器件與安裝好的成套柜。如圖1、圖2對比可見，兩者體積存在巨大差異，也就決定了不同的樣品需要不同的管理方式。

圖1 小型斷路器

圖2 低壓成套柜

1.2 難點分析

低壓成套柜的管理難點主要在于體積大，樣品擺放占空間，由于同類型產品用料與尺寸基本相同，數量多時，一間樣品庫中可能存放數十臺樣品，尋找起來費時費力。而低壓元件雖然體積較小，但數量龐大。一份小型斷路器試驗往往需要上百臺樣品，在試驗過程中分散在各個樓層的不同試驗室，很容易出現試后樣品難回收的情況。而試驗室樣品管理規范要求試后樣品進行統一銷毀或退還企業，因此若能對樣品存放位置進行妥善管理，在工作中不僅能節省時間，更能讓管理更加規范。

文中對于樣品位置監控所提出的解決方案是開發一款手機軟件，從降低登記門檻、提升查詢體驗的角度出發，為樣品管理參與者提供隨時隨地的登記、查詢媒介，希望每個參與者能夠通過簡單的登記操作，讓樣品在中轉的過程中位置信息均清晰可見。

2 樣品管理程序設計

2.1 需求調研，解決問題

低壓電氣行業樣品主要分為元件與成套，筆者所在的電器所同樣是將檢驗組分為元件組、成套組，如上文所說，元件組樣品管理難點在于樣品數量多，試驗過程中分散于實驗室難以管理回收。因此作為管理軟件，需要檢驗員每次使用樣品均進行登記，登記流程需要足夠精簡，從最基本的查詢需求出發，只對樣品位置進行登記，任何一項多余的操作都可能因為過于繁瑣導致檢驗員登記時的懈怠，導致樣品位置失去監控。

成套樣品管理難點在于樣品大，數量多時層層疊疊放置在樣品庫中，檢驗員領樣時需要從數十臺樣品中鎖定某一臺難度大，稍不留神錯過則要從頭開始，耗時長。因此如何幫助檢驗員更快地鎖定樣品，更加明確地尋找樣品至關重要。該程序的解決辦法是將每個成套樣品庫用精簡圖分為25個區塊，來樣登記時將登記具體的存放區塊而不僅是樣品庫編號，這樣檢驗員進入樣品庫尋找的面積將縮小到1/25，大大降低尋找難度，縮短尋找時間。

2.2 程序操作界面設計

根據以上分析，登記要做到操作簡便，設計時需要在一個頁面中完成編號、位置選擇操作。同時由于元件樣品存放需要樣品車，樣品車的使用登記與查詢也需考慮其中。

圖3為程序元件組樣品登記界面，其分為四個區域，分別是任務編號選擇、樣品車選擇、存放位置選擇以及登記按鈕。進行登記操作時僅需依次進行選擇，最后點擊登記操作類型即可完成。操作過程無論是相比手寫登記還是在電腦登記都簡便許多，使用門檻低。

圖3 程序元件組樣品登記界面

圖4樣品查詢界面與登記界面的設計類似，左側為任務類型選擇，右側為任務編號選擇，點擊任務編號頁面下方會出現關于該任務樣品出現的所有位置，便于試驗過程中與試后查找樣品。圖5樣品車查詢界面用不同顏色對樣品車狀態進行區分，檢驗員在需要樣品車時可一目了然地知道每一臺車的狀態。

圖4 樣品查詢界面

圖5 樣品車查詢界面

3 微信小程序開發

3.1 微信小程序開發介紹

微信小程序開發類似HTML5的網頁制作，一個頁面由若干文件構成，其中xxx.js文件用于頁面邏輯代碼編寫，為頁面元素增加功能，同網頁開發一樣，需要使用JavaScript；xxx.json文件用于定義頁面屬性，如頂端的頁面名稱；xxx.wxml與xxx.wxss文件類似網頁開發中的html與css文件，用于定義頁面內容及其屬性。因此程序內可視化界面的開發均由代碼組成，需要開發者對頁面排版規則有深入的理解才能夠熟練掌握。[1]

微信為小程序的開發提供了專用的開發者工具，界面如圖6所示。界面左側為手機模擬器，左上角可以對手機型號進行選擇，可模擬小程序在不同分辨率的手機上顯示的效果。右側為開發界面，其中的樹形區域為該項目內所有文件的展示，每個文件夾下對應一個頁面，黑色背景區域用于代碼編寫，右下方可以查看程序中的各種信息，其中筆者作為新手，最為常用的是Console頁面，用于查看日志，Storage頁面，用于查看此時軟件緩存內容，wxml頁面，用于查看頁面中各個元素的屬性。開發中最常用的是頂部的“編譯”按鈕，可以用鍵盤組合按鍵實現：Windows系統為Control+S，Mac系統為Command+S，代碼編寫完成需要編譯之后才可在左側的模擬器中查看實際效果。若需要在手機中實際模擬，點擊頂部“遠程調試”按鈕，用微信掃描彈出的二維碼，即可在手機中查看小程序，并同時顯示控制臺信息。

圖6 微信開發者工具操作界面

由于一個頁面有多個文件編寫組成，文中將開發過程分為頁面元素開發與邏輯功能開發兩部分進行介紹，篇幅限制無法全面展開，主要分享開發中總結的技巧。

3.2 頁面代碼編寫

由圖3可見，本程序頁面中最常用的是類型選擇、編號選擇的按鈕，兩種按鈕實際效果并不相同。每個按鈕均有“未點擊”與“被點擊”兩種狀態，其對應的背景色、字體顏色不同。其中類型選擇按鈕被點擊之后，按鈕改變為被點擊狀態并鎖定，右側編號選擇窗顯示與該類型對應的編號，用于提示操作者右側區域顯示的內容。而編號選擇按鈕被點擊時，改變狀態，但點擊動作完成后，恢復狀態，用于提示操作者點擊操作被觸發。

編號選擇按鈕的效果易實現，在wxss文件中，需要對該按鈕“未點擊”與“被點擊”的屬性分別進行設置，其中“被點擊”的變量名后加入“：active”即可，具體代碼如圖7。

圖7 wxss示例代碼

類型選擇按鈕的效果實現則復雜許多，需要同時對js、wxml與wxss文件進行編輯。首先同樣需要在wxss文件中對該按鈕的兩種屬性進行設置，但需要用不同的變量名，如class1與class2。wxml文件中對于該按鈕的屬性代碼改為class="class1 {{active == item ? 'class2'： ''}}"，即當active變量等于item變量時，class取值class2，反之取值class1，最后在js文件中，為該按鈕綁定為active賦值的點擊操作，讓其被點擊時，將active賦值與item相同，這樣在按鈕被點擊時，會觸發class2，按鈕的顯示效果便會隨之改變。

與網頁開發類似，微信小程序的開發對于頁面元素的排版也需要開發者對各排版代碼特性十分熟悉，方可隨心所欲地展現出設計好的效果。

微信小程序中，每個可視元素為一個view，在wxml文件中進行編寫，示例代碼如：

此處著重介紹排版技巧，如圖3右上角任務編號選擇區域，其中每個任務編號均為一個獨立的元素，被其父級元素限定在右上角的區域，顯示的編號文字為子級內容，因此一個可視區域需要疊加三層view，對三個層級分別進行定義。第一級將該區域安排距離左邊框20%的位置，可以使用絕對定位（代碼為position： absolute;）進行排版，只需要將其從左往右移動20%（代碼為left：20%;）即可。第二級將顯示編號的多個小方框均勻分布在可視區內，此處需要用相對定位（代碼為position： relative;），采用flex的排版方式（代碼為display： flex;），將元素從左到右橫向均分（代碼為justify-content： flexstart），并且允許換行（代碼為flex-wrap：wrap;），即可以保證每個小方塊都橫向均勻分布，并且在顯示不下時自動換行。第三級則為顯示的文字內容，如果不進行定義，文字會堆積在元素左上角，居中設置同樣利用flex布局，此時需要同時設置橫向與縱向居中，（代碼為justify-content：center; align-items： center）。通過以上排版設置，加上每個元素的長寬、背景色、字體大小等屬性，即可完成類似區域的排版。

任務編號有數百個，無法單獨編寫數百個view，可使用for循環在view中進行定義。示例代碼如下：

4 服務器與數據庫搭建

4.1 騰訊云服務器

該程序需要多人進行登記與查詢，因此需要搭建服務器進行數據調度，以及數據庫進行數據存儲。對于微信小程序而言，騰訊云服務器的響應最為迅速，租用價格為45元/月的服務器即可滿足該程序需求。搭建服務器前需要申請域名與證書，根據騰訊云的指示操作即可。

4.2 服務器搭建

微信小程序基于HTML5改造而成，因此編程基礎語言為JavaScript。對于新手而言，如果服務器同樣可以使用JS，學習成本將大大降低，因此NodeJS是最佳選擇。利用NodeJS的Express模塊，可以迅速搭建起一個web服務器。搭建成功后即可通過申請的域名進行訪問，需要注意的是微信小程序默認訪問80端口，因此利用Express搭建的服務器，需要監聽80而非默認的3000端口。搭建方法與使用方法可通過express官網http：//www.expressjs.com.cn進行查看，文中重點介紹如何利用express搭建的web服務器與小程序進行通信。[2]

與網頁通信原理相同，微信小程序也是通過get與post方法與服務器通信，該程序由于通信內容簡單，僅使用get方法。小程序斷調用get方法可參考官方文檔的API里的request請求，示例代碼如圖8所示，其中url為該程序服務器申請的域名地址，“https：//54403812.jie731.xyz”為網址主體部分，“/queryCarts”為專門為查詢樣品車設計的代碼文件，因此完整的網址指向了需要數據通信的文件，data： { a： ‘request_data’, } 表示傳輸的數據內容，ID為a。success： function(res) {console.log(res)},為訪問成功時調用的函數，由于JavaScript是異步編程語言，程序執行不會等待訪問結果，因此在訪問結束時需要調用success函數來告訴程序需要執行的命令，如console.log(res)為打印出服務器返回的數據。

圖8 小程序request示例代碼

用Express搭建的服務器，可通過在routes文件夾內加入js文件，來指定小程序發出request請求時，與之通信的接口。如文中的“/queryCarts”，指向routes文件夾下的queryCarts.js文件，通過對應關系，可對不同的request請求利用不同的js文件進行處理，例如queryCarts是該程序用于查詢樣品車信息的文件。服務器接收并處理請求的js示例代碼如圖9，其中router.get表示該段代碼用于處理get請求，req.query.a則表示微信小程序發出的ID為a的請求數據，connection.query(cartQuery,cartQueryValue, function (err, result) {}部分則是用該請求數據進行數據庫的查詢操作，其中的result表示了查詢的結果。因此res.send(result)是將結果返回給微信，微信小程序中console.log(res)將該返回數據打印出來。至此，一次數據交換就完成了。

4.3 數據庫搭建

目前，用于網站搭建所用的主流數據庫是非關系型數據庫MongoDB，該數據庫沒有表的概念，適用于需要將不同類型的數據進行統一管理的情況。但該項數據之間有十分清晰的類型關系，所有的數據都可以用編號進行分類，因此關系型數據庫顯然是更好的選擇，本項目選擇MySql。文中主要介紹本項目中所使用到NodeJS調用MySql數據庫的代碼，具體的教程可查詢http：//www.runoob.com/nodejs/nodejs-mysql.html，此處主要介紹本程序中最常用的更新、查詢的操作。[3]

MySql的數據庫由表格組成，雖然有可視化軟件，但在服務器中進行數據表的新建，數據的登記、查詢均需要用代碼完成。如圖9所示，connection.connect(function(err){}即為NodeJS調用MySql數據庫時與數據庫通信的主體。更新與查詢操作的區別在于通信代碼部分，如'SELECT * FROM SAMPLES WHERE sampleNum=？’可用于查詢表名為SAMPLES里，sampleNum等于“？”的所有數據，“？”為占位符，其賦值由微信小程序發送請求時攜帶的數據決定，即可實現通過小程序發送查詢請求。’UPDATE CARTS SET status = ?, positions = ? WHERE cartName=？’可用于在名為CARTS的表內，更新指定cartName中status與positions的信息，占位符部分同樣由小程序發送的數據而定。

圖9 Express處理get請求示例代碼

5 結語

以往的手機軟件開發，想要覆蓋所有的智能手機，不僅需要針對安卓、蘋果兩個平臺分別進行，同時需要考慮同平臺不同分辨率與性能的問題，iOS的軟件只能在Mac電腦上進行，因此初學者希望開發手機軟件門檻較高。微信小程序的出現大幅度降低了這道門檻，初學者僅需一次開發，借由微信平臺便可以實現智能手機的全面覆蓋。對于希望配合硬件開發較輕量軟件或是如本程序希望開發有益于改善工作流程軟件的初學者而言，提供了十分有利的工具，為更好地進行移動互聯網時代的軟硬件研究提供了新的思路。

微信小程序從誕生至今不足兩年，筆者在學習、開發的過程中，深刻感受到微信不斷地在對其各個方面進行更新換代，如微信開發者工具，幾乎每周都有版本更新，文檔中對于API的開放也在不斷增加，能夠使用的接口日益豐富，為開發者提供的創造空間也就隨之增大。

檢測行業的項目開發往往著力于硬件，鮮有項目接入移動互聯網，微信小程序不斷增強的功能為硬件的無線通信提供了渠道，在硬件開發中可以更多地思考如何借由小程序接入移動互聯網，如利用小程序接入訊飛、百度等公司的語音識別甚至語義識別；利用線上監控實現設備遠程監控與操作；利用圖像識別對試驗結果進行智能分析等，更有力地促進檢測設備的智能化。