用ArkUI實(shí)現(xiàn)碰一碰配網(wǎng)、設(shè)備控制
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
前言
eTS發(fā)布有段時(shí)間了，用它寫UI不光是代碼易讀性，還是代碼量都是相當(dāng)優(yōu)秀。用過(guò)以后發(fā)現(xiàn)再也不想用java寫UI了。前段時(shí)間嘗試調(diào)試了碰一碰配網(wǎng)，使用的是碰一碰(個(gè)人體驗(yàn)版)的。正式版的需要企業(yè)賬號(hào)才可以，使用的是java+js。今天來(lái)嘗試下eTS開(kāi)發(fā)，但是ArkUI只有在API7上才能支持，目前絕大多數(shù)手機(jī)還都是API6，所以配網(wǎng)部分只能先代碼模擬測(cè)試，界面效果如下圖：
項(xiàng)目分為兩個(gè)模塊，碰一碰配網(wǎng)entry模塊，設(shè)備控制control模塊。不多說(shuō)了上代碼。
entry模塊
這個(gè)模塊主要是實(shí)現(xiàn)設(shè)備聯(lián)網(wǎng)。界面很簡(jiǎn)單。
UI界面
配網(wǎng)界面就是3個(gè)組件，一個(gè)圖片2個(gè)text。
- build() {
- Row(){
- Column() {
- Image($r('app.media.test'))
- .width(152)
- .height(152)
- .margin({ top: 16 })
- Text(this.desc)
- .fontSize(14)
- .fontColor('#FF0000000')
- .margin({ top: 16 })
- Text(this.progress)
- .fontSize(14)
- .fontColor('#999999')
- .margin({ top: 2,right: 24,bottom: 20,left: 24 })
- }
- .height('35%')
- .width('80%')
- .margin('10%')
- .borderRadius(10)
- .backgroundColor(0xFFFFFF)
- }
- .width('100%')
- .height('100%')
- .alignItems(VerticalAlign.Bottom) //這是Row的參數(shù)
- .backgroundColor(0x000000)
- }
配網(wǎng)流程
整個(gè)配網(wǎng)的流程就是手機(jī)碰觸NFC貼紙，獲取Product ID，然后通過(guò)Product ID去云端獲取用戶意圖。說(shuō)白了就是告訴手機(jī)要打開(kāi)哪個(gè)包名，哪個(gè)模塊。關(guān)于如何在華為開(kāi)發(fā)者門戶設(shè)置用戶意圖可以看我之前的帖子。這里就是啟動(dòng)了entry模塊。
接下來(lái)分析用eTS如何實(shí)現(xiàn)這個(gè)過(guò)程：
1.導(dǎo)入hilink包
在build.gradle中進(jìn)行配置，底層的實(shí)現(xiàn)都是通過(guò)調(diào)用API，并不需要自己寫。
- dependencies {
- ... ...
- implementation(group: 'com.huawei.hilink', name: 'ailifeability', version: '1.0.0.1', ext: 'har')
- }
2.調(diào)用PA能力。
使用JSCallJava調(diào)用API接口，這個(gè)可以參考OneHop模板，來(lái)實(shí)現(xiàn)一個(gè)default/common/fa-netconfig.ets它的作用就是將JAVA API轉(zhuǎn)換為eTS函數(shù)接口，主要用到的就是FeatureAbility.callAbility(action)。
- function callAbilityFunc(callCode, argsObj, callbackFunc) {
- let action = { // 要調(diào)用java的信息存放在action
- bundleName : CONSTANT.BUNDLE_NAME,
- abilityName : CONSTANT.ABILITY_NAME,
- messageCode : callCode, // callCode用來(lái)區(qū)分要調(diào)用哪一個(gè)API
- abilityType : 1,
- data : argsObj,
- };
- return FeatureAbility.callAbility(action);//調(diào)用PA能力
- }
3.eTS生命周期回調(diào)函數(shù)
要在entry被拉起時(shí)自動(dòng)執(zhí)行配網(wǎng)，就要使用.eTS生命周期回調(diào)函數(shù)。
由于本篇主題是ArkUI，至于配網(wǎng)流程等專門寫一篇帖子再來(lái)分析。
- aboutToAppear(){
- this.discoverDevice() // 執(zhí)行配網(wǎng)流程
- }
control模塊
接下來(lái)和大家分享下在制作control模塊時(shí)，學(xué)習(xí)到的ArkUI知識(shí)點(diǎn)和踩到的一些坑。其中部分內(nèi)容官方文檔也沒(méi)有寫，都是參考示例代碼連蒙帶猜。
1.設(shè)置窗口模式
在OneHop官方模板src/main/java/com/liangzili/myonehop/MainAbility.java下給window_modal設(shè)置了一個(gè)參數(shù)。在官方文檔中好像沒(méi)有關(guān)于這個(gè)參數(shù)的說(shuō)明，也或許是我沒(méi)有找到。
- public void onStart(Intent intent) {
- intent.setParam("window_modal", 3);
- ... ...
- }
測(cè)試發(fā)現(xiàn)這個(gè)參數(shù)可以很方便的實(shí)現(xiàn)類似彈窗下拉這樣的效果，省去了很多界面代碼。其中("window_modal", 3)就是配網(wǎng)entry頁(yè)面的效果，("window_modal", 1)的效果可以看下圖。而且比較有意思的是有1有3，但是傳遞2好像沒(méi)啥效果。不過(guò)可惜的是，JS范式下傳遞這個(gè)參數(shù)效果如下圖，但eTS下會(huì)有bug，要不就是彈窗無(wú)法拖拽，要不就是全屏無(wú)法設(shè)置大小。
2.app在線設(shè)計(jì)
在官方指導(dǎo)中有提到HiLink可以使用在線可視化的方式設(shè)置界面，效果如下圖。
看著就很方便，在線設(shè)計(jì)完成之后會(huì)得到一個(gè)界面文件。類似下圖這樣的效果。界面的數(shù)據(jù)要統(tǒng)一放到了src/main/resources/rawfile下，根據(jù)productName參數(shù)進(jìn)行區(qū)選擇，格式為JSON。(PS：本想體驗(yàn)下這個(gè)app在線設(shè)計(jì)，但是打開(kāi)沒(méi)有內(nèi)容，我只好使用的模板里帶的FAN_zh.json)
control模塊需要解析json文件的數(shù)據(jù)來(lái)繪制界面。
3.配置文件的解析
配置文件的解析也是java來(lái)完成的，所以我直接原文復(fù)制的OneHop模板的java代碼，eTS部分，在src/main/ets/default/pages/index.ets下。
- async onPageShow(){
- utils.setActionParam('com.liangzili.myonehop', // 為action初始化參數(shù)
- 'com.liangzili.myonehop.DataHandlerAbility', ABILITY_TYPE_INTERNAL)
- await this.requestTemplate()
- }
- .. ...
- async requestTemplate() {
- let action = utils.makeAction(ACTION_MESSAGE_CODE_GET_TEMPLATE, {});
- let result = await FeatureAbility.callAbility(action); // 同樣的方法去調(diào)用PA的能力
- let resultJson = JSON.parse(result); // 返回的結(jié)果保存在 result 中
- if (resultJson.code == 0) { // 不等于0就調(diào)用失敗了，可以通過(guò)失敗碼查找問(wèn)題
- let template = JSON.parse(resultJson.data);
- this.parseJson(template.template);
- }
- }
- async parseJson(deviceInfo) { ... ... } // 最后就是解析JSON來(lái)生成界面了
4.生成界面
其實(shí)如果用eTS范式單純生成一個(gè)右側(cè)這樣的界面，可能只需要幾十行代碼。但是要解析在線生成的JSON界面文件，再兼容各種樣式的控制界面來(lái)繪制UI，這個(gè)問(wèn)題就會(huì)變得復(fù)雜的多?？赡芄俜降囊馑际窍胪ㄟ^(guò)在線設(shè)計(jì)降低程序的工作量，或者是為了統(tǒng)一UI風(fēng)格，降低用戶學(xué)習(xí)成本。
index.ets
主界面分為兩個(gè)區(qū)域，DeviceInfo() 和 Control()，DeviceInfo就一個(gè)主圖和名字。
- build() {
- Stack({ alignContent: Alignment.Bottom }){ // 用來(lái)模擬一個(gè)上邊圓角的效果
- Column(){}.height(35).width('100%').backgroundColor(0xF6F6F6) // 用來(lái)覆蓋下端邊框圓角
- Column() {
- DeviceInfo() // 設(shè)備信息組件
- Control() // 控制面板組件
- }
- .height('95%')
- .width('100%')
- .borderRadius(25)
- .backgroundColor(0xF6F6F6)
- }
- .width('100%')
- .height('100%')
- .backgroundColor(0x000000)
- }
Control.ets
界面中通過(guò)傳遞參數(shù)，來(lái)實(shí)現(xiàn)用一個(gè)組件，顯示不同內(nèi)容。
- build(){
- Column(){
- Reversal(this.reversalData1) //開(kāi)關(guān)組件
- Enum({ enumDatas: this.enumDatas1 }) //枚舉組件
- Enum({ enumDatas: this.enumDatas2 }) //枚舉組件
- Reversal(this.reversalData2) //開(kāi)關(guān)組件
- }
- }
5.參數(shù)傳遞
組件間傳值是我遇到問(wèn)題比較大的地方，我總結(jié)了以下幾種情況。這些基本能解決大部分的傳值問(wèn)題了。
1.單個(gè)變量
- // 調(diào)用端
- Component1({a01:"a01"}) // 調(diào)用的時(shí)候參數(shù)用{}包裹
- // 被調(diào)用端
- @Component
- export struct Component1{
- private a01:string // 這里定義變量，用來(lái)接收
- build(){
- Text(this.a01).fontSize(50)
- }
- }
2.對(duì)象鍵值對(duì)
- // 調(diào)用端
- struct Index {
- parameter:{} = {b01: "b01",b02: "b02",}
- build() {
- Column(){
- Component2(this.parameter) // 調(diào)用的時(shí)候參數(shù)不用{}包裹
- }
- }
- }
- // 被調(diào)用端
- @Component
- export struct Component2{
- private b01:string // 這里定義變量，用來(lái)接收
- private b02:string
- build(){
- Column(){
- Text(this.b01).fontSize(50)
- Text(this.b02).fontSize(50)
- }
- }
- }
3.對(duì)象數(shù)組
- // 調(diào)用端
- struct Index {
- parameters:any[] = [
- {
- c01:"c01",
- c02:"c02"
- },
- {
- c01:"c11",
- c02:"c22"
- }
- ]
- build() {
- Column(){
- Component3({ parameters: this.parameters }) // 傳遞參數(shù)是parameters，對(duì)象數(shù)組類型
- }
- }
- }
- // 被調(diào)用端
- @Component
- export struct Component3{
- private parameters:any[] // 定義同樣的參數(shù)，同樣的類型
- build(){
- Column(){
- ForEach(this.parameters,(item:any) => { //【重要:獲取數(shù)組之后可以直接使用ForEach遍歷數(shù)據(jù)】
- Text(item.c01).fontSize(50)
- Text(item.c02).fontSize(50)
- },(item:any) => item.toString() // 文檔說(shuō)選填，但不填會(huì)失敗
- )
- }
- }
- }
4.自定義類數(shù)組
- // 類
- class enumData {
- image: Resource
- text: string
- constructor(image: Resource, text: string) {
- this.image = image;
- this.text = text;
- }
- }
- // 調(diào)用端
- @Entry
- @Component
- struct Index {
- enumDatas:enumData[] = this.getenumDatas()
- getenumDatas(){
- let enumDatas: Array<enumData> = []
- enumDatas.push(new enumData($r("app.media.icon"), "001"))
- enumDatas.push(new enumData($r("app.media.icon"), "002"))
- return enumDatas;
- }
- build() {
- Column(){
- Component4({ enumDatas: this.enumDatas })
- }
- }
- }
- // 被調(diào)用端
- @Component
- export struct Component4{
- private enumDatas:enumData[] // 這里定義變量，用來(lái)接收
- build(){
- Column(){
- ForEach(this.enumDatas,(item:any) => {
- Image(item.image).width(50).height(50)
- Text(item.text).fontSize(50)
- },(item:any) => item.text.toString() // 文檔說(shuō)選填，但不填會(huì)失敗
- )
- }
- }
- }
6.發(fā)送設(shè)備控制信息
由于目前沒(méi)有API7的真機(jī)進(jìn)行調(diào)試，所以發(fā)送控制設(shè)備信息這部分還沒(méi)有實(shí)現(xiàn)。但是以防萬(wàn)一控制流程先記錄下來(lái)，方便以后再來(lái)添加。
與entry模塊類似，需要在build.gradle中進(jìn)行配置，同樣的API。
- dependencies {
- ... ...
- implementation(group: 'com.huawei.hilink', name: 'ailifeability', version: '1.0.0.1', ext: 'har')
- }
eTS側(cè)要實(shí)現(xiàn)這樣的函數(shù)，來(lái)調(diào)用PA的能力。
- async setKeyValue(key, value) {
- let data = {};
- data[key] = value;
- let action = utils.makeAction(ACTION_MESSAGE_CODE_DATACHANGED, data);
- let that = this;
- that.data.timer = setTimeout(function () {
- that.notifyObservers('showMessage', {
- 'show': true
- });
- }, WAIT_TIME);
- await FeatureAbility.callAbility(action);
- }
src/main/java/com/liangzili/myonehop/DataHandlerAbility.java
java側(cè)根據(jù)ACTION_MESSAGE_CODE_DATA_CHANGED來(lái)確定要調(diào)用的方法。
- case ACTION_MESSAGE_CODE_DATA_CHANGED: {
- String zsonStr = data.readString();
- ZSONObject zsonObj = ZSONObject.stringToZSON(zsonStr);
- for (Map.Entry<String, Object> entry : zsonObj.entrySet()) {
- deviceDataHandler.modifyDeviceProperty(entry.getKey(), entry.getValue());
- }
- break;
- }
以上就是我在使用ArkUI開(kāi)發(fā)時(shí)，一些重要知識(shí)點(diǎn)的總結(jié)，希望對(duì)朋友們有所幫助。
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
