2020征文-鴻蒙智能手表【純干貨】手把手教你JS開發(fā)智能表應(yīng)用
前言
本人于9月中旬，開始接觸鴻蒙。那時候還只是抱著嘗新的心態(tài)，跟著官方文檔，寫出了TV版的hello world和Lite Wearable的hello world，現(xiàn)在回想起來，還是有點激動。
到了9月下旬，公司收到了華為寄過來的搭載鴻蒙系統(tǒng)的智能手表，因為某種原因，智能表開發(fā)的任務(wù)落到了我頭上。我是前端開發(fā)，說實話，當時接到這個任務(wù)時候，其實沒多少底，畢竟不懂APP開發(fā)的流程，雖說鴻蒙支持JS開發(fā)，但其實心里也清楚，里面應(yīng)該還是有很多坑要踩的，事實證明，坑是真的多。哈哈哈。
今天為什么有時間寫這篇文章呢?因為我的智能手表應(yīng)用已經(jīng)開發(fā)、聯(lián)調(diào)、測試完畢了，馬上要上架啦。
話不多說，讓我們進入正題。
配置
1、準備工作(下載、安裝、環(huán)境配置、創(chuàng)建項目等)
這個過于簡單，就毋庸贅言了，請參考官方文檔
生成的目錄結(jié)構(gòu)，就是這個樣子。對于安卓開發(fā)來講，應(yīng)該是很熟悉的，但對于前端來講，就很懵逼啊。
什么gradle文件，這是啥啊，咦，為什么還有java，我不是選擇的js模板呢?很是疑惑。先不管了，硬著頭皮干。
2、config.json權(quán)限列表配置(fetch、network等)
鴻蒙應(yīng)用里，image標簽想要使用https的外鏈資源，必須要配置權(quán)限，同理，fetch接口請求也是如此。
我自己在開發(fā)過程中，是配置了網(wǎng)絡(luò)請求的權(quán)限，以及網(wǎng)絡(luò)狀態(tài)的權(quán)限。
- "reqPermissions": [
- {
- "name": "ohos.permission.GET_NETWORK_INFO"
- },
- {
- "name": "ohos.permission.GET_WIFI_INFO"
- },
- {
- "name": "ohos.permission.INTERNET",
- },
- ],
3、離線簽名與簽名配置 (用于真機調(diào)試)
如果用不到真機調(diào)試，可忽略這一步。
請參考文檔
編輯器的版本不一樣，使用的密鑰文件不一樣。有的是.p12，有的是.jks。
如果你生成的是jks，那么你可能需要轉(zhuǎn)換p12，筆者就轉(zhuǎn)過，可自行百度。
申請開發(fā)者證書和調(diào)試 Profile
request.json 如下：
- {
- "developerRequest": {
- "Applicant": "XXXX",
- "ApplicationName": "XXXX",
- "CN": "XXXX",
- "validYear": "1"
- },
- "provisionRequest": {
- "debug-info": {
- "device-ids": [
- "" // 調(diào)試真機的UDID
- ]
- },
- "permissions": {
- "restricted-permissions": [
- "harmonyos.permission.ANSWER_PHONE_CALLS"
- ]
- },
- "bundle-name": "你的包名",
- "developer-id": "你的開發(fā)者ID"
- }
- }
然后將你生成csr、p12還有這個request.json一并發(fā)給華為的人，然后他們會給你cer和p7b的文件，你直接導(dǎo)入就行了。
至此，真機調(diào)試的準備工作我們就已經(jīng)完成了。
真機調(diào)試打出來的包是hap包，如果要上架的話，必須是.app的文件，所以我們還要在項目配置里，導(dǎo)入這些證書等，同上一步操作。
4、集成 Wear Engine SDK(手表和APP通訊)
APP和手表都要集成對應(yīng)的SDK，才能通訊
添加編譯依賴
1、聯(lián)系華為接口人獲取 SDK。
2、將 SDK 解壓后，把 SDK 中的 har 包放在項目\entry\ libs 目錄下。
3、打開應(yīng)用級的 build.gradle 文件。
4、在“dependencies ”中添加如下編譯依賴,，然后同步。
5、生成穿戴設(shè)備側(cè)簽名證書指紋、設(shè)備檢測
手表側(cè)要配置APP的指紋和包名，APP側(cè)要配置手表側(cè)的指紋和包名
請參考文檔
手表側(cè)配置APP的包名和指紋代碼如下
6、編譯構(gòu)建生成HAP或者生成APP
請參考文檔
開發(fā)
開發(fā)倒沒有什么好說的，就是正常的前端那一套，布局、樣式、邏輯。需要注意的是，設(shè)備的分辨率是454*454，圓形屏幕，需要留出安全距離。
如果手表需要和手機APP進行交互的話，JS的能力比較弱，需要依賴JAVA來做中轉(zhuǎn)。
JAVA代碼不是我寫的，直接照抄的官方文檔，然后讓安卓客戶端改造了一下。
我做的這個項目就是這么做的，目錄如下：
還有一點要注意的，JAVA不能主動向JS發(fā)送消息，需要JS主動才行。手機和手表信息同步時候，需要用戶信息，我們的做法是：手機端登陸后，會向我的手表發(fā)一個用戶身份信息，手表側(cè)的JAVA代碼能接收到，但是JS收不到，這個時候我的做法是在手表側(cè)的JS做一個輪詢，向JAVA去索取登錄信息。一般的做法就是setInterval，但是我發(fā)覺這個setInterval在鴻蒙里并不生效，我很絕望，最后我采用了遞歸。就是手表在onShow生命周期里，不停的調(diào)用PA能力(可參考文檔)，如果拿到了用戶信息，就緩存到本地，停止調(diào)用，然后發(fā)送fetch請求，拿到服務(wù)端的數(shù)據(jù)。這樣一個數(shù)據(jù)同步就完成了。
說到緩存，也有一個小坑，這個value值，一定要是字符串，本來我的res就是字符串，但是直接寫，會報錯，必須用JSON.stringify()轉(zhuǎn)一下。
調(diào)用PA能力的代碼如下：
JAVA先注冊一個CalcInternalAbility，供JS調(diào)用。
JS調(diào)用該方法，如下，value就是JAVA的返回值。
調(diào)試
這里主要講JS的調(diào)試
JS打印調(diào)試信息，一般都是console.log()，但是這個編輯器里推薦使用console.info()。
一旦程序開始運行時候，控制臺里會不停的打印一些信息，完全看不懂，我們想要看看我們的JS代碼執(zhí)行到那個環(huán)節(jié)了，也不能很清晰的找到，推薦我自己用的方法。
這樣我們就可以在控制臺清楚的看到自己的打印信息，也就知道代碼執(zhí)行到哪一步了。
結(jié)尾
整個項目開發(fā)過程中，坑還是挺多的，但是沒辦法，畢竟剛出來。
但只要是在慢慢變好，那就未來可期，
雖然華為諸多磨難，但鴻蒙仍需背負"小小"的使命感，
經(jīng)歷過更多磕碰，鴻蒙才會更加厚重，
希望喜歡鴻蒙的人能繼續(xù)喜歡鴻蒙，不喜歡鴻蒙的人能慢慢嘗試接受鴻蒙。
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
