Taro开发之——编译运行到鸿蒙(11)

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

  • 开发环境
  • Taro执行指令生成dist文件
  • 鸿蒙开发工具创建项目及配置
  • 默认程序效果及修改程序并运行

二 开发环境

  • 操作系统：Win 11 专业版 24H2
  • 开发工具：VSCode、DevEco Studio 鸿蒙应用开发工具
  • Node: 22.16.0
  • Yarn: 1.22.22

二 Taro执行指令生成dist文件

2.1 终端执行如下指令

1
yarn build:harmony-hybrid

2.2 编译完成后，dist目录下文件生成

三 鸿蒙开发工具创建项目及配置

3.1 创建空白项目

1、File—>New—>Create Project选择模板

2、创建完成后，项目结构图示如下

3.2 鸿蒙开发工具配置

1、在 entry/oh-package.json5 文件中添加 @hybrid/web-container模块的依赖并点击 Sync Now 进行同步

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "entry",
  "version": "1.0.0",
  "description": "Please describe the basic information.",
  "main": "",
  "author": "",
  "license": "",
  "dependencies": {
    "@hybrid/web-container": "2.0.0-rc.3"
  }
}

2、在entry/src/main/ets/entryability/EntryAbility.ets 文件中初始化web-container环境：

1
2
3
4
5
6
7
windowStage.loadContent('pages/Index', (err, data) => {
      const windowClass: window.Window = windowStage.getMainWindowSync();
      TaroHybridManager.init({
        uiAbilityContext: this.context,
        windowClass,
      })
});

3、将TaroDemo项目下的dist文件复制到鸿蒙开发工具下的rawfile文件夹下

4、在 entry/src/main/ets/pages/Index.ets 主页面文件中使用 TaroWebContainer 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import Url from '@ohos.url';
import { TaroWebContainer, InjectObject, HostPageState, TaroWebController } from '@hybrid/web-container';

@Entry
@Component
struct TaroMpharmonySample {
  @State pageState: HostPageState = HostPageState.PageInit;
  @State taroWebController: TaroWebController = new TaroWebController();

  // 用户可以自定义对象注入到Web环境中，使用native.sayHello格式进行调用
  nativeObj: InjectObject = {
    sayHello: () => console.log('Hello World'),
  }

  onBackPress() {
    if (this.taroWebController.accessBackward()) {
      this.taroWebController.backward();
      return true;
    }
    return false;
  }

  onPageShow() {
    this.pageState = HostPageState.PageOnShow;
  }

  onPageHide() {
    this.pageState = HostPageState.PageOnHide;
  }

  webUrl(): string {
    // 开发阶段可以把网站静态资源文件放置到src/main/resources/rawfile/目录下
    // 生产环境下把网站静态资源放置到web服务器, 这里填写实际的网站地址url
    return 'resource://rawfile/index.html';
  }

  webUrlPrefix() {
    try {
      const url = Url.URL.parseURL(this.webUrl());
      return `${url.protocol}//${url.host}/`;
    } catch (err) {
      return '';
    }
  }

  build() {
    Column() {
      TaroWebContainer({
        pageState: this.pageState, // 页面状态同步到组件
        webUrl: this.webUrl(), // 初始Url
        webUrlPrefix: this.webUrlPrefix(),
        useCache: false,
        taroWebController: this.taroWebController,
        isFullScreen: true, // 是否全屏显示
        injectObj: this.nativeObj, // 注入对象
        forceDarkAccess: true,
      })
        .width('100%')
        .height('100%')
    }
  }
}

四 默认程序效果及修改程序并运行

4.1 默认运行效果

4.2 pages/index/index.tsx文件修改内容

1
2
3
4
5
6
7
const items = ['Item 1', 'Item 2', 'Item 3','Item 4','Item 5']; //添加数据项
//添加显示列表
{ 
    items.map((item, index) => {
        return <View key={index}>{item}</View>
     })
  }

4.3 修改后效果(重新编译执行并复制到rawfile下)

五 参考

  • Taro官网文档——鸿蒙开发
  • DevEco工具—下载地址
  • OpenHarmony三方库中心仓—@hybrid/web-container