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