---

theme: channing-cyan

距離2022年終總結過去了還沒一個月，我又回來寫文章啦！

依稀記得當時給2023年立下的flag（文章連結：再見2022，我的點點滴滴！！！），其中之一就是：完成公司的“電子秤冷庫APP專案”,在大餅的誘惑下，我拼命的碼功能，終於從2023.01.04 寫下第一行程式碼，到2023.01.18，完成所有功能，併產出第一個測試版本。（當然我前期的 demo案例功能測試也為其做出了巨大貢獻，極大地縮短了開發所需的時間）。

這波APP功能開發過程中，敲得我每天手都是酸的，也再次讓我重新認識了自己（我真是太牛掰了！！！）。這是除了剛入行時，半個月完成150張App頁面之後，又一件讓我印象很深的事。

在此特意進行記錄下本次開發之旅，做一下總結收穫，並且希望當大家有類似需求的時候，回想起我的這篇文章能有所啟迪。

技術選型

1. HBuilderX 進行uniapp專案的搭建
2. Android Studio進行原生外掛開發，以及離線打包測試
3. UView 進行專案頁面UI搭建

所需裝置

1. 安卓屏，（安卓4.0 版本不支援；目前開發使用的安卓6.0.1）
2. 電子秤
3. 印表機
4. 掃碼槍

實現功能

1. 進行商品稱重、商品資訊標籤列印
2. 進行商品資訊錄入、入庫，資訊查詢
3. 進行商品掃碼，出庫

開發過程（相關功能實現，採取的技術方案）

1. 稱重、列印

在本次專案開發中，電子秤、印表機採用的是串列埠通訊的方式。電子秤採用RS485串列埠接入安卓屏，印表機採用的RS232串列埠接入安卓屏。
因此，這個功能的實現離不開串列埠通訊。主要方法：與電子秤、印表機外掛要相關串列埠通訊資料、demo，一般這些是採用安卓開發的，有相關原生的arr，支援在原生開發中直接呼叫已經封裝好的方法。只需要在原生Android開發中直接引入就可以了。
但是問題來了，我們採用的技術是uniapp進行安卓開發，這下應當怎麼辦呢！想必大家還記得我之前的文章：uniapp開發安卓原生外掛，這也是我在該專案開始之前，做的技術沉澱。
我們可以採用開發安卓原生外掛的方式，將電子秤、印表機相關的原生arr，封裝為可以在uniapp中使用的原生外掛。這樣我們就可以在該專案中對電子秤、印表機隨心所欲的操控了！（我真是太機智了）。

注意事項：

在這裡我再次強調一下原生外掛過程中應當注意的事： 1. 注意配置相關的簽名 2. 注意配置安卓包名，不能落了。

原生外掛開發完畢後，我們可以在當前的專案中使用了。我們只需要在專案中新增nativeplugins目錄並進行相關配置即可。（具體的操作步驟詳情，請看上一篇文章：uniapp開發安卓原生外掛）

正常情況下，我們在執行到安卓屏中後可以完成電子秤、印表機相關的控制。那麼如果我們要打包，在本機進行除錯應該怎麼辦呢

1.1 雲打包

採用雲打包的形式，我們依靠HBuilder X 將我們的專案打包。在這個過程中，我們只需要輸入當前應用的證書資訊即可。我們可以靜靜的等待打包完成，由於採用了原生外掛所需的時間有點長，我們可以去喝個咖啡或者吞雲吐霧放鬆一下，回來你就會發現一切都已順利完成！（當然如果是第一次，大概率會發現出 bug 了。不要怕，根據提示資訊進行修改即可） 當時DCloud對開發者，每天可以進行雲打包、製作自定義基座是有次數限制的，超額了需要花錢。作為一個勤儉持家的當代好青年，我們肯定不樂意，那麼下面的：本地打包方案，就有效解決了我們的問題。

1.2 本地打包

我們採用HBuilder X 中本地打包功能，可以生成本地打包資源。然後我們可以將資源引入 官方為我們提供的 app離線sdk中的 HBuilder-Integrate-AS 中，然後在進行了配置後，可以在Android Studio中進行除錯。
採用這種方案，我們可操作的空間更大，也更便於我們對一些問題的排查。

注意事項

1. 我們要採用跟當前HBuilder X版本一致的 app離線sdk進行除錯，否則會報：版本不一致，有潛在的問題
2. 我們要提前將 sdk 總的專案配置好，簽名、資源包
3. 我們要將自主開發的原生外掛匯入到 lib中，並在 assets - dcloud_uniplugins.json 中進行配置
4. 別忘了將 原生的印表機、電子秤arr也放到 lib中，否則有可能會出現異常

2. 掃碼

掃碼槍採用的USB連線，因此在專案中只需要在當前頁面中監聽 keydown 事件即可。然後將監聽獲取到的 keyCode 轉換為對應的字元即可。

注意事項

在完成該功能進行自測階段發現一個問題：
因為當前頁面中有 input 元件，使用者有可能進行了點選操作，此時 input 框聚焦，在這個時候就會出現一個現象：掃碼槍獲取到的值會作為輸入值，輸入到 input 中，這個時候頁面的 keydown 監聽是監聽不到該行為的。
當用戶取消input聚焦後，再次進行掃碼操作，此時會出現：掃碼槍最後一個Enter操作消失，無法獲取 keyCode === 66 這個值。

解決方法

思路：掃碼槍造成的輸入操作，所花費的時間遠遠小於使用者輸入的時間，因此可以設定個定時器，用來防止該行為的發生。

```js // 掃碼槍輸入內容 let inputValue = ''; // 掃碼槍input定時器。防止input聚焦導致的問題 let scanTimer = null;

onLoad() { uni.showLoading({ title: '載入中', mask: true });

// 新增鍵盤輸入的監聽；防止當前input 聚焦後，再次掃碼，無法觸發 enter
// #ifdef APP-PLUS
plus.key.addEventListener("keydown", (e) => {
    if(!inputValue) {
        uni.showLoading({
            title: '掃碼並獲取資訊中...',
            mask: true,
        })
    }
    if (e.keyCode === 66 || e.key =='Enter') {
        // 根據獲取的條形碼資料，獲取商品資訊
        clearTimeout(scanTimer);
        scanTimer = null;
        inputValue = '';
    } else {
        // keyMap 為 keyCode 對應的 字元表
        inputValue += keymap[e.keyCode];
        if(!scanTimer) {
            scanTimer = setTimeout(() => {
                scanTimer = null;
            }, 2000)
        }
    }
});
// #endif

}, ```

3. 商品資訊錄入，資訊查詢

要實現該功能的話，我們需要採用 官方提供的 SQLite（資料庫）模組，相關資料可檢視：SQLite官方文件 該模組在 下載的Android 離線SDK中可以找到（注意：要使用與開發版本一致的，防止出現未知的問題。）
我們建立資料庫，然後針對不同的資訊、查詢需要，建立對應的資料表，即可。然後根據功能，進行增刪改查。在開發中，可以將於資料庫的相關操作、配置都提取出來，這樣便於整體專案的使用，也便於問題的排查。

至此，該專案大致功能的思路都已經介紹完畢，希望對各位有所啟發！
現在天選打工人的我還在上班，明天還有一天，公司堅持不到最後一天，絕不放假。各位看我這麼命苦，趕快給我點個贊，鼓勵鼓勵我吧！！感謝！！