基于微信小程序平臺開發(fā)樣品管理程序

楊 杰

（福建省產(chǎn)品質(zhì)量檢驗研究院，福建 福州 350002）

1 低壓電器樣品管理現(xiàn)狀與難點

1.1 低壓電器樣品介紹

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

圖1 小型斷路器

圖2 低壓成套柜

1.2 難點分析

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

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

2 樣品管理程序設(shè)計

2.1 需求調(diào)研，解決問題

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

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

2.2 程序操作界面設(shè)計

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

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

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

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

圖4 樣品查詢界面

圖5 樣品車查詢界面

3 微信小程序開發(fā)

3.1 微信小程序開發(fā)介紹

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

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

圖6 微信開發(fā)者工具操作界面

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

3.2 頁面代碼編寫

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

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

圖7 wxss示例代碼

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

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

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

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

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

4 服務(wù)器與數(shù)據(jù)庫搭建

4.1 騰訊云服務(wù)器

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

4.2 服務(wù)器搭建

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

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

圖8 小程序request示例代碼

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

4.3 數(shù)據(jù)庫搭建

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

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

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

5 結(jié)語

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

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

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