鸿蒙应用开发小测。

安装 IDE

  • 下载 DevEco Studio
    • 安装 NodeJS
    • 安装 ohpm，包管理工具
      • ~/Library/Huawei/ohpm
    • 安装鸿蒙 SDK
      • ~/Library/Huawei/Sdk

新建设备

  • Tools -> Device Manager
    • 新建模拟器
    • 选择系统并启动
  • 下载模拟器
    • 背后的实现为 qemu，更准确的应该为 qemu-system-aarch64
    • 路径为：~/Library/Huawei/Sdk/hmscore/emulator
  • 下载系统镜像
    • phone-arm-api9
    • 路径为 ~/Library/Huawei/Sdk/hmscore/3.1.0/system-image/phone_arm
      • build.prop: cpu.alilist=arm64-v8a
  • 运行时镜像
    • ~/.Huawei/HarmonyOSEmulator/deployed/xxx

新建应用

  • 新建空应用
    • HPAWebView
  • 运行启动

添加权限点

测试一个 webview 组件。

添加网络权限，参考：https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/accesstoken-guidelines.md#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E6%9D%83%E9%99%90%E5%A3%B0%E6%98%8E

    <!-- entry/src/main/module.json5 -->
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET",
        "usedScene": {
          "abilities": [
            "FormAbility"
          ],
          "when":"always"
        }
      }
    ],

新建 WebComponent.ets

entry/src/main/ets/view/WebComponent.ets

参考：

  • https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-web-0000001477981205-V3
import web_webview from '@ohos.web.webview'
/**
 * Detail page list component.
 */
@Component
export struct WebComponent {
  fileAccess: boolean = true;
  controller: web_webview.WebviewController = new web_webview.WebviewController()

  build() {
    Column() {
      Text('Hello webview!')
        .fontSize(20)
      Web({ src: 'https://systemjs-dev.1688.com/krump/schema/2434.html', controller: this.controller })
        // 设置高和内边距
        .height(500)
        .padding(20)
          // 设置文件访问权限和脚本执行权限
        .fileAccess(this.fileAccess)
        .javaScriptAccess(true)
      Text('webview end')
        .fontSize(20)
    }
  }
}

加到主页面

entry/src/main/ets/pages/Index.ets

import { WebComponent } from '../view/WebComponent'
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)


        WebComponent().layoutWeight(500)
      }
      .width('100%')
    }
    .height('100%')
  }
}

运行效果

image

构建结果

entry/build/default/outputs/default/entry-default-signed.hap

最终构建的产物即为 JS，整体包结构中的代码为文本代码。

// entry/src/main/ets/view/WebComponent.ets
import web_webview from '@ohos:web.webview';
export class WebComponent extends ViewPU {
    constructor(parent, params, __localStorage, elmtId = -1) {
        super(parent, __localStorage, elmtId);
        this.fileAccess = true;
        this.controller = new web_webview.WebviewController();
        this.setInitiallyProvidedValue(params);
    }
    setInitiallyProvidedValue(params) {
        if (params.fileAccess !== undefined) {
            this.fileAccess = params.fileAccess;
        }
        if (params.controller !== undefined) {
            this.controller = params.controller;
        }
    }
    updateStateVars(params) {
    }
    purgeVariableDependenciesOnElmtId(rmElmtId) {
    }
    aboutToBeDeleted() {
        SubscriberManager.Get().delete(this.id__());
        this.aboutToBeDeletedInternal();
    }
    initialRender() {
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Column.create();
            if (!isInitialRender) {
                Column.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create('Hello webview!');
            Text.fontSize(20);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Web.create({ src: 'https://systemjs-dev.1688.com/krump/schema/2434.html', controller: this.controller });
            Web.height(500);
            Web.padding(20);
            Web.fileAccess(this.fileAccess);
            Web.javaScriptAccess(true);
            if (!isInitialRender) {
                Web.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        this.observeComponentCreation((elmtId, isInitialRender) => {
            ViewStackProcessor.StartGetAccessRecordingFor(elmtId);
            Text.create('webview end');
            Text.fontSize(20);
            if (!isInitialRender) {
                Text.pop();
            }
            ViewStackProcessor.StopGetAccessRecording();
        });
        Text.pop();
        Column.pop();
    }
    rerender() {
        this.updateDirtyElements();
    }
}
//# sourceMappingURL=WebComponent.js.map

HDC

HDC 命令

  • ~/Library/Huawei/Sdk/openharmony/9/toolchains/hdc
    • 开放鸿蒙使用此
  • ~/Library/Huawei/Sdk/hmscore/3.1.0/toolchains/hdc
    • 华为手机的鸿蒙使用此命令

参考文档：

  • https://gitee.com/openharmony/developtools_hdc
$ ./hdc list targets
SED0221831023116	device
$ ./hdc -t SED0221831023116 shell ls /
config
data
dev
...

$ ./hdc -t SED0221831023116 shell ps -ef | grep "hpa"
20040005      3561     3 8 11:56:59 ?     00:00:07 com.example.hpawebview
20040005      3619  3575 17 11:56:59 ?    00:00:16 com.example.hpawebview

$ ./hdc -t SED0221831023116 shell ps -ef | grep "3"
root             1     0 0 06:51:39 ?     00:00:00 ohco_init --second-stage
paramwatcher     2     1 0 06:51:39 ?     00:00:00 param_watcher
root             3     1 0 06:51:39 ?     00:00:00 appspawn
...

应用启动线程为：appspawn，https://gitee.com/openharmony/startup_appspawn