鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇

已于 2024-03-16 01:35:55 修改
阅读量1.4k 收藏 28
点赞数 20
分类专栏： 鸿蒙 鸿蒙-ArkTS 文章标签： harmonyos 华为 鸿蒙 android 鸿蒙系统 前端 arkts
于 2024-03-13 17:29:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64420071/article/details/136685903
版权

提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。

说明：

  • 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  • 示例效果请以真机运行为准，当前IDE预览器不支持。

需要权限

访问在线网页时需添加网络权限：ohos.permission.INTERNET，具体申请方式请参考声明权限。

子组件

无

接口

Web(options: { src: ResourceStr, controller: WebviewController | WebController, incognitoMode? : boolean})

说明：

不支持转场动画。 同一页面的多个web组件，必须绑定不同的WebviewController。

参数：

参数名参数类型必填参数描述
srcResourceStr是网页资源地址。如果访问本地资源文件，请使用$rawfile或者resource协议。如果加载应用包外沙箱路径的本地资源文件，请使用file://沙箱文件路径。
controllerWebviewController9+ | WebController是控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。
incognitoMode11+boolean否表示当前创建的webview是否是隐私模式。true表示创建隐私模式的webview, false表示创建正常模式的webview。
默认值：false

示例：

加载在线网页。

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

隐私模式Webview加载在线网页。

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
 controller: web_webview.WebviewController = new web_webview.WebviewController()
 build() {
   Column() {
     Web({ src: 'www.example.com', controller: this.controller, incognitoMode: true })
   }
 }
}

加载本地网页。

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 通过$rawfile加载本地资源文件。
      Web({ src: $rawfile("index.html"), controller: this.controller })
    }
  }
}
// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 通过resource协议加载本地资源文件。
      Web({ src: "resource://rawfile/index.html", controller: this.controller })
    }
  }
}

加载沙箱路径下的本地资源文件。

  1. 通过构造的单例对象GlobalContext获取沙箱路径。

    // GlobalContext.ts
export class GlobalContext {
  private constructor() {}
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();

  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }

  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }

  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}
    // xxx.ets
import web_webview from '@ohos.web.webview'
import { GlobalContext } from '../GlobalContext'

let url = 'file://' + GlobalContext.getContext().getObject("filesDir") + '/index.html'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      // 加载沙箱路径文件。
      Web({ src: url, controller: this.controller })
    }
  }
}

  2. 修改EntryAbility.ts。

    以filesDir为例，获取沙箱路径。若想获取其他路径，请参考应用文件路径。

    // xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import Want from '@ohos.app.ability.Want';
import web_webview from '@ohos.web.webview';
import { GlobalContext } from '../GlobalContext'

export default class EntryAbility extends UIAbility {
    onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
        // 通过在GlobalContext对象上绑定filesDir，可以实现UIAbility组件与UI之间的数据同步。
        GlobalContext.getContext().setObject("filesDir", this.context.filesDir);
        console.log("Sandbox path is " + GlobalContext.getContext().getObject("filesDir"))
    }
}

    加载的html文件。

    <!-- index.html -->
<!DOCTYPE html>
<html>
    <body>
        <p>Hello World</p>
    </body>
</html>

属性

通用属性仅支持aspectRatio、backdropBlur、backgroundColor、bindContentCover、bindContextMenu、bindMenu 、bindSheet、borderColor、borderRadius、borderStyle、borderWidth、clip、constraintSize、defaultFocus、focusable、tabIndex、groupDefaultFocus、focusOnTouch、displayPriority、enabled、flexBasis、flexGrow、flexShrink、layoutWeight、id、gridOffset、gridSpan、useSizeType、height、touchable、margin、markAnchor、offset、width、zIndex、visibility、scale、transform、responseRegion、size、stateStyles、opacity、shadow、sharedTransition、transition。

domStorageAccess

domStorageAccess(domStorageAccess: boolean)

设置是否开启文档对象模型存储接口（DOM Storage API）权限，默认未开启。

系统能力： SystemCapability.Web.Webview.Core

参数：

参数名参数类型必填默认值参数描述
domStorageAccessboolean是false设置是否开启文档对象模型存储接口（DOM Storage API）权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}

fileAccess

fileAccess(fileAccess: boolean)

设置是否开启应用中文件系统的访问，默认启用。$rawfile(filepath/filename)中rawfile路径的文件不受该属性影响而限制访问。

参数：

参数名参数类型必填默认值参数描述
fileAccessboolean是true设置是否开启应用中文件系统的访问，默认启用。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .fileAccess(true)
    }
  }
}

imageAccess

imageAccess(imageAccess: boolean)

设置是否允许自动加载图片资源，默认允许。

参数：

参数名参数类型必填默认值参数描述
imageAccessboolean是true设置是否允许自动加载图片资源。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .imageAccess(true)
    }
  }
}

javaScriptProxy

javaScriptProxy(javaScriptProxy: { object: object, name: string, methodList: Array<string>, controller: WebviewController | WebController})

注入JavaScript对象到window对象中，并在window对象中调用该对象的方法。所有参数不支持更新。此接口只支持注册一个对象，若需要注册多个对象请使用registerJavaScriptProxy9+。

参数：

参数名参数类型必填默认值参数描述
objectobject是-参与注册的对象。只能声明方法，不能声明属性。
namestring是-注册对象的名称，与window中调用的对象名一致。
methodListArray<string>是-参与注册的应用侧JavaScript对象的方法。
controllerWebviewController9+ | WebController是-控制器。从API Version 9开始，WebController不再维护，建议使用WebviewController替代。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

class TestObj {
  constructor() {
  }

  test(data1: string, data2: string, data3: string): string {
    console.log("data1:" + data1)
    console.log("data2:" + data2)
    console.log("data3:" + data3)
    return "AceString"
  }

  toString(): void {
    console.log('toString' + "interface instead.")
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  testObj = new TestObj();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
        .javaScriptProxy({
          object: this.testObj,
          name: "objName",
          methodList: ["test", "toString"],
          controller: this.controller,
      })
    }
  }
}

javaScriptAccess

javaScriptAccess(javaScriptAccess: boolean)

设置是否允许执行JavaScript脚本，默认允许执行。

参数：

参数名参数类型必填默认值参数描述
javaScriptAccessboolean是true是否允许执行JavaScript脚本。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
    }
  }
}

overScrollMode11+

overScrollMode(mode: OverScrollMode)

设置Web过滚动模式，默认关闭。当过滚动模式开启时，当用户在Web界面上滑动到边缘时，Web会通过弹性动画弹回界面。

参数：

参数名参数类型必填默认值参数描述
modeOverScrollMode是OverScrollMode.NEVER设置Web的过滚动模式为关闭或开启。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: OverScrollMode = OverScrollMode.ALWAYS
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .overScrollMode(this.mode)
    }
  }
}

mixedMode

mixedMode(mixedMode: MixedMode)

设置是否允许加载超文本传输协议（HTTP）和超文本传输安全协议（HTTPS）混合内容，默认不允许加载HTTP和HTTPS混合内容。

参数：

参数名参数类型必填默认值参数描述
mixedModeMixedMode是MixedMode.None要设置的混合内容。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: MixedMode = MixedMode.All
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mixedMode(this.mode)
    }
  }
}

onlineImageAccess

onlineImageAccess(onlineImageAccess: boolean)

设置是否允许从网络加载图片资源（通过HTTP和HTTPS访问的资源），默认允许访问。

参数：

参数名参数类型必填默认值参数描述
onlineImageAccessboolean是true设置是否允许从网络加载图片资源。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .onlineImageAccess(true)
    }
  }
}

zoomAccess

zoomAccess(zoomAccess: boolean)

设置是否支持手势进行缩放，默认允许执行缩放。

参数：

参数名参数类型必填默认值参数描述
zoomAccessboolean是true设置是否支持手势进行缩放。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .zoomAccess(true)
    }
  }
}

overviewModeAccess

overviewModeAccess(overviewModeAccess: boolean)

设置是否使用概览模式加载网页，默认使用该方式。当前仅支持移动设备。

参数：

参数名参数类型必填默认值参数描述
overviewModeAccessboolean是true设置是否使用概览模式加载网页。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .overviewModeAccess(true)
    }
  }
}

databaseAccess

databaseAccess(databaseAccess: boolean)

设置是否开启数据库存储API权限，默认不开启。

参数：

参数名参数类型必填默认值参数描述
databaseAccessboolean是false设置是否开启数据库存储API权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .databaseAccess(true)
    }
  }
}

geolocationAccess

geolocationAccess(geolocationAccess: boolean)

设置是否开启获取地理位置权限，默认开启。

参数：

参数名参数类型必填默认值参数描述
geolocationAccessboolean是true设置是否开启获取地理位置权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .geolocationAccess(true)
    }
  }
}

mediaPlayGestureAccess

mediaPlayGestureAccess(access: boolean)

设置有声视频播放是否需要用户手动点击，静音视频播放不受该接口管控，默认需要。

参数：

参数名参数类型必填默认值参数描述
accessboolean是true设置有声视频播放是否需要用户手动点击。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State access: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mediaPlayGestureAccess(this.access)
    }
  }
}

multiWindowAccess9+

multiWindowAccess(multiWindow: boolean)

设置是否开启多窗口权限，默认不开启。 使能多窗口权限时，需要实现onWindowNew事件，示例代码参考onWindowNew事件。

参数：

参数名参数类型必填默认值参数描述
multiWindowboolean是false设置是否开启多窗口权限。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
      .multiWindowAccess(false)
    }
  }
}

horizontalScrollBarAccess9+

horizontalScrollBarAccess(horizontalScrollBar: boolean)

设置是否显示横向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名参数类型必填默认值参数描述
horizontalScrollBarboolean是true设置是否显示横向滚动条。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .horizontalScrollBarAccess(true)
    }
  }
}

加载的html文件。

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

verticalScrollBarAccess9+

verticalScrollBarAccess(verticalScrollBar: boolean)

设置是否显示纵向滚动条，包括系统默认滚动条和用户自定义滚动条。默认显示。

参数：

参数名参数类型必填默认值参数描述
verticalScrollBarboolean是true设置是否显示纵向滚动条。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
      .verticalScrollBarAccess(true)
    }
  }
}

加载的html文件。

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <style>
      body {
        width:3000px;
        height:3000px;
        padding-right:170px;
        padding-left:170px;
        border:5px solid blueviolet
      }
    </style>
</head>
<body>
Scroll Test
</body>
</html>

password(deprecated)

password(password: boolean)

设置是否应保存密码。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

cacheMode

cacheMode(cacheMode: CacheMode)

设置缓存模式。

参数：

参数名参数类型必填默认值参数描述
cacheModeCacheMode是CacheMode.Default要设置的缓存模式。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: CacheMode = CacheMode.None
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

copyOptions11+

copyOptions(value: CopyOptions)

设置剪贴板复制范围选项。

参数：

参数名参数类型必填默认值参数描述
valueCopyOptions是CopyOptions.Cross_Device要设置的剪贴板复制范围选项。

示例：

import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
  Column() {
    Web({ src: 'www.example.com', controller: this.controller })
      .copyOptions(CopyOptions.None)
  }
}
}

textZoomAtio(deprecated)

textZoomAtio(textZoomAtio: number)

设置页面的文本缩放百分比，默认为100%。

从API version 9开始不再维护，建议使用textZoomRatio9+代替。

参数：

参数名参数类型必填默认值参数描述
textZoomAtionumber是100要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。

示例：

// xxx.ets
@Entry
@Component
struct WebComponent {
  controller: WebController = new WebController()
  @State atio: number = 150
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .textZoomAtio(this.atio)
    }
  }
}

textZoomRatio9+

textZoomRatio(textZoomRatio: number)

设置页面的文本缩放百分比，默认为100%。

参数：

参数名参数类型必填默认值参数描述
textZoomRationumber是100要设置的页面的文本缩放百分比。取值为整数，范围为(0, +∞)。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State atio: number = 150
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .textZoomRatio(this.atio)
    }
  }
}

initialScale9+

initialScale(percent: number)

设置整体页面的缩放百分比，默认为100。

参数：

参数名参数类型必填默认值参数描述
percentnumber是100要设置的整体页面的缩放百分比。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State percent: number = 100
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .initialScale(this.percent)
    }
  }
}

userAgent(deprecated)

userAgent(userAgent: string)

设置用户代理。

说明：

从API version 8开始支持，从API version 10开始废弃。建议使用setCustomUserAgent10+替代。

参数：

参数名参数类型必填默认值参数描述
userAgentstring是-要设置的用户代理。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State userAgent:string = 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36'
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .userAgent(this.userAgent)
    }
  }
}

blockNetwork9+

blockNetwork(block: boolean)

设置Web组件是否阻止从网络加载资源。

参数：

参数名参数类型必填默认值参数描述
blockboolean是false设置Web组件是否阻止从网络加载资源。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State block: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .blockNetwork(this.block)
    }
  }
}

defaultFixedFontSize9+

defaultFixedFontSize(size: number)

设置网页的默认等宽字体大小。

参数：

参数名参数类型必填默认值参数描述
sizenumber是13设置网页的默认等宽字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 16
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFixedFontSize(this.fontSize)
    }
  }
}

defaultFontSize9+

defaultFontSize(size: number)

设置网页的默认字体大小。

参数：

参数名参数类型必填默认值参数描述
sizenumber是16设置网页的默认字体大小，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .defaultFontSize(this.fontSize)
    }
  }
}

minFontSize9+

minFontSize(size: number)

设置网页字体大小最小值。

参数：

参数名参数类型必填默认值参数描述
sizenumber是8设置网页字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minFontSize(this.fontSize)
    }
  }
}

minLogicalFontSize9+

minLogicalFontSize(size: number)

设置网页逻辑字体大小最小值。

参数：

参数名参数类型必填默认值参数描述
sizenumber是8设置网页逻辑字体大小最小值，单位px。输入值的范围为-2^31到2^31-1，实际渲染时超过72的值按照72进行渲染，低于1的值按照1进行渲染。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State fontSize: number = 13
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .minLogicalFontSize(this.fontSize)
    }
  }
}

webFixedFont9+

webFixedFont(family: string)

设置网页的fixed font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是monospace设置网页的fixed font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "monospace"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webFixedFont(this.family)
    }
  }
}

webSansSerifFont9+

webSansSerifFont(family: string)

设置网页的sans serif font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是sans-serif设置网页的sans serif font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "sans-serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webSansSerifFont(this.family)
    }
  }
}

webSerifFont9+

webSerifFont(family: string)

设置网页的serif font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是serif设置网页的serif font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webSerifFont(this.family)
    }
  }
}

webStandardFont9+

webStandardFont(family: string)

设置网页的standard font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是sans serif设置网页的standard font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "sans-serif"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webStandardFont(this.family)
    }
  }
}

webFantasyFont9+

webFantasyFont(family: string)

设置网页的fantasy font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是fantasy设置网页的fantasy font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "fantasy"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webFantasyFont(this.family)
    }
  }
}

webCursiveFont9+

webCursiveFont(family: string)

设置网页的cursive font字体库。

参数：

参数名参数类型必填默认值参数描述
familystring是cursive设置网页的cursive font字体库。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State family: string = "cursive"
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .webCursiveFont(this.family)
    }
  }
}

darkMode9+

darkMode(mode: WebDarkMode)

设置Web深色模式，默认关闭。当深色模式开启时，Web将启用媒体查询prefers-color-scheme中网页所定义的深色样式，若网页未定义深色样式，则保持原状。如需开启强制深色模式，建议配合forceDarkAccess使用。

参数：

参数名参数类型必填默认值参数描述
modeWebDarkMode是WebDarkMode.Off设置Web的深色模式为关闭、开启或跟随系统。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: WebDarkMode = WebDarkMode.On
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
    }
  }
}

forceDarkAccess9+

forceDarkAccess(access: boolean)

设置网页是否开启强制深色模式。默认关闭。该属性仅在darkMode开启深色模式时生效。

参数：

参数名参数类型必填默认值参数描述
accessboolean是false设置网页是否开启强制深色模式。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: WebDarkMode = WebDarkMode.On
  @State access: boolean = true
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .darkMode(this.mode)
        .forceDarkAccess(this.access)
    }
  }
}

tableData(deprecated)

tableData(tableData: boolean)

设置是否应保存表单数据。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

wideViewModeAccess(deprecated)

wideViewModeAccess(wideViewModeAccess: boolean)

设置web是否支持html中meta标签的viewport属性。该接口为空接口。

说明：

从API version 10开始废弃，并且不再提供新的接口作为替代。

pinchSmooth9+

pinchSmooth(isEnabled: boolean)

设置网页是否开启捏合流畅模式，默认不开启。

参数：

参数名参数类型必填默认值参数描述
isEnabledboolean是false网页是否开启捏合流畅模式。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .pinchSmooth(true)
    }
  }
}

allowWindowOpenMethod10+

allowWindowOpenMethod(flag: boolean)

设置网页是否可以通过JavaScript自动打开新窗口。

该属性为true时，可通过JavaScript自动打开新窗口。该属性为false时，用户行为仍可通过JavaScript自动打开新窗口，但非用户行为不能通过JavaScript自动打开新窗口。此处的用户行为是指用户在5秒内请求打开新窗口（window.open）。

该属性仅在javaScriptAccess开启时生效。

该属性在multiWindowAccess开启时打开新窗口，关闭时打开本地窗口。

该属性的默认值与系统属性persist.web.allowWindowOpenMethod.enabled 保持一致，如果未设置系统属性则默认值为false。

检查系统配置项persist.web.allowWindowOpenMethod.enabled 是否开启。

通过hdc shell param get persist.web.allowWindowOpenMethod.enabled 查看，若配置项为0或不存在， 可通过命令hdc shell param set persist.web.allowWindowOpenMethod.enabled 1 开启配置。

参数：

参数名参数类型必填默认值参数描述
flagboolean是默认值与系统参数关联，当系统参数persist.web.allowWindowOpenMethod.enabled为true时，默认值为true, 否则为false网页是否可以通过JavaScript自动打开窗口。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  dialogController: CustomDialogController | null = null
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .javaScriptAccess(true)
        //需要使能multiWindowAccess
        .multiWindowAccess(true)
        .allowWindowOpenMethod(true)
        .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          //将新窗口对应WebviewController返回给Web内核。
          //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
          //若不调用event.handler.setWebController接口，会造成render进程阻塞。
          event.handler.setWebController(popController)
        })
    }
  }
}

mediaOptions10+

mediaOptions(options: WebMediaOptions)

设置Web媒体播放的策略，其中包括：Web中的音频在重新获焦后能够自动续播的有效期、应用内多个Web实例的音频是否独占。

说明：

  • 同一Web实例中的多个音频均视为同一音频。
  • 该媒体播放策略将同时管控有声视频。
  • 属性参数更新后需重新播放音频方可生效。
  • 建议为所有Web组件设置相同的audioExclusive值。

参数：

参数名参数类型必填默认值参数描述
optionsWebMediaOptions是{resumeInterval: 0, audioExclusive: true}设置Web的媒体策略。其中，resumeInterval的默认值为0表示不自动续播。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State options: WebMediaOptions = {resumeInterval: 10, audioExclusive: true}
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .mediaOptions(this.options)
    }
  }
}

javaScriptOnDocumentStart11+

javaScriptOnDocumentStart(scripts: Array<ScriptItem>)

将JavaScript脚本注入到Web组件中，当指定页面或者文档开始加载时，该脚本将在其来源与scriptRules匹配的任何页面中执行。

说明：

  • 该脚本将在页面的任何JavaScript代码之前运行，并且DOM树此时可能尚未加载、渲染完毕。

参数：

参数名参数类型必填默认值参数描述
scriptsArray<ScriptItem>是-需要注入的的ScriptItem数组

ets示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  private localStorage: string =
      "if (typeof(Storage) !== 'undefined') {" +
      "   localStorage.setItem('color', 'Red');" +
      "}";
  @State scripts: Array<ScriptItem> = [
      { script: this.localStorage, scriptRules: ["*"] }
  ];
  build() {
      Column({ space: 20 }) {
          Web({ src: $rawfile('index.html'), controller: this.controller })
              .javaScriptAccess(true)
              .domStorageAccess(true)
              .backgroundColor(Color.Grey)
              .javaScriptOnDocumentStart(this.scripts)
              .width('100%')
              .height('100%')
      }
  }
}

HTML示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style="font-size: 30px;" onload='bodyOnLoadLocalStorage()'>
      Hello world!
      <div id="result"></div>
  </body>
  <script type="text/javascript">
    function bodyOnLoadLocalStorage() {
      if (typeof(Storage) !== 'undefined') {
        document.getElementById('result').innerHTML = localStorage.getItem('color');
      } else {
        document.getElementById('result').innerHTML = 'Your browser does not support localStorage.';
      }
    }
  </script>
</html>

layoutMode11+

layoutMode(mode: WebLayoutMode)

设置Web布局模式。

说明：

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局WebLayoutMode.FIT_CONTENT。默认为WebLayoutMode.NONE模式。

参数：

参数名参数类型必填默认值参数描述
modeWebLayoutMode是WebLayoutMode.NONE设置web布局模式，跟随系统或自适应布局。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  @State mode: WebLayoutMode = WebLayoutMode.FIT_CONTENT
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .layoutMode(this.mode)
    }
  }
}

nestedScroll11+

nestedScroll(value: NestedScrollOptions)

调用以设置嵌套滚动选项。

说明：

  • 设置向前向后两个方向上的嵌套滚动模式，实现与父组件的滚动联动。
  • 支持设置不同的向前向后两个方向上的嵌套滚动模式。
  • 默认scrollForward和scrollBackward模式为NestedScrollMode.SELF_FIRST。

参数：

参数名参数类型必填参数描述
valueNestedScrollOptions是可滚动组件滚动时的嵌套滚动选项。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .nestedScroll({
          scrollForward: NestedScrollMode.SELF_FIRST,
          scrollBackward: NestedScrollMode.SELF_FIRST,
        })
    }
  }
}

enableNativeEmbedMode11+

enableNativeEmbedMode(mode: boolean)

设置是否开启同层渲染功能，默认不开启。

参数：

参数名参数类型必填默认值参数描述
modeboolean是false是否开启同层渲染功能。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .enableNativeEmbedMode(true)
    }
  }
}

事件

通用事件仅支持onAppear、onDisAppear、onBlur、onFocus、onDragEnd、onDragEnter、onDragStart、onDragMove、onDragLeave、onDrop、onHover、onMouse、onKeyEvent、onTouch、onVisibleAreaChange。

onAlert

onAlert(callback: (event?: { url: string; message: string; result: JsResult }) => boolean)

网页触发alert()告警弹窗时触发回调。

参数：

参数名参数类型参数描述
urlstring当前显示弹窗所在网页的URL。
messagestring弹窗中显示的信息。
resultJsResult通知Web组件用户操作行为。

返回值：

类型说明
boolean当回调返回true时，应用可以调用系统弹窗能力（包括确认和取消），并且需要根据用户的确认或取消操作调用JsResult通知Web组件最终是否离开当前页面。当回调返回false时，函数中绘制的自定义弹窗无效。

示例：

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController()
  build() {
    Column() {
      Web({ src: $rawfile("index.html"), controller: this.controller })
        .onAlert((event) => {
          if (event) {
            console.log("event.url:" + event.url)
            console.log("event.message:" + event.message)
            AlertDialog.show({
              title: 'onAlert',
              message: 'text',
              primaryButton: {
                value: 'cancel',
                action: () => {
                  event.result.handleCancel()
                }
              },
              secondaryButton: {
                value: 'ok',
                action: () => {
                  event.result.handleConfirm()
                }
              },
              cancel: () => {
                event.result.handleCancel()
              }
            })
          }
          return true
        })
    }
  }
}

加载的html文件。

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
  <h1>WebView onAlert Demo</h1>
  <button onclick="myFunction()">Click here</button>
  <script>
    function myFunction() {
      alert("Hello World");
    }
  </script>
</body>
</html>

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料​​​​​​​

鸿蒙（Harmony NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

代码与思维
关注
  • 20
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
HarmonyOS移动应用开发（ArkTS版） 刘安战、余雨萍、陈争艳 清华大学出版社 课件PDF。共十三章，每章1个PPT
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）下篇
m0_64420071的博客
03-13 1696
ArkTS声明式开发（基础手势：Web）下篇
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）中篇
m0_64420071的博客
03-13 1425
ArkTS声明式开发（基础手势：Web）中篇
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Select）
m0_64420071的博客
03-12 1542
ArkTS声明式开发（基础手势：Select）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Search）
m0_64420071的博客
03-12 1301
ArkTS声明式开发（基础手势：Search）
HarmonyOS移动应用开发
04-07
通过该课程的学习，您将掌握HarmonyOS基本概念及原理、HarmonyOS技术架构、HarmonyOS应用开发流程、Ability与UI开发知识，具备HarmonyOS功能开发、调试与发布的能力，能够胜任HarmonyOS应用开发工程师岗位。
HarmonyOS鸿蒙快速入门应用开发基础+进阶视频.zip
05-24
02.2 HarmonyOS_应用开发平台介绍 02.3 HarmonyOS设备开发平台介绍 02.4 分布式应用开发实例演示 02.5 第2期答疑环节 03.1 致软件工程师的灵魂拷问 03.2 重新定位_人_设备_场景的关系 03.3 应用开发者面临的挑战 03....
HarmonyOS应用开发基础知识.pdf
12-28
HarmonyOS应用开发基础知识
华为鸿蒙HarmonyOS开发整理资料汇总.zip
11-25
华为鸿蒙HarmonyOS开发整理资料汇总，共38份。 1学前必读：HarmonyOS学习资源主题分享 2学前必读：OpenHarmony-联盟生态资料合集 3-1.HarmonyOS概述：技术特性 3-2.HarmonyOS概述：开发工具与平台 3-3.HarmonyOS...
鸿蒙OS开发：【一次开发，多端部署】（多设备自适应能力）实例
最新发布
m0_70748845的博客
05-19 313
此Demo展示在JS中的多设备自适应能力，包括资源限定词、原子布局和响应式布局。
鸿蒙应用开发系列 篇四：鸿蒙系统应用开发基础
生活在别处
05-18 15
开发范式声明式开发范式：语言为 ArkTS，数据驱动更新，适用复杂度大、团队合作度高的程序，适用人群为移动系统应用开发人员、系统应用开发人员类 Web 开发范式：语言为 JS，数据驱动更新，适用界面简单的程序应用和卡片，适用人群为 Web 前端开发人员应用模型FA 模型：HarmonyOS API 7 开始支持，已不再主推。通过 PageAbility、ServiceAbility 和 DataAbility 三种组件构建应用，每个组件运行在自己的进程中，相互隔离，在处理复杂应用时存在很大的局限性。
纯血鸿蒙APP实战开发——多文件下载监听案例
m0_71524094的博客
05-16 350
多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。每个应用最多支持创建10个未完成的任务。如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
鸿蒙ArkUI-X跨平台技术：【开发准备】
m0_62167422的博客
05-16 712
本文档适用于ArkUI跨平台应用开发的初学者。通过开发环境搭建、应用工程创建、编译和运行，熟悉ArkUI跨平台应用开发基本流程。在开始之前，您需要了解有关跨平台应用的一些基本概念：ArkUI框架的简单说明、ArkUI-X的基本概念。
鸿蒙ArkUI-X跨平台技术：【开发初体验】
m0_62167422的博客
05-17 806
ACE Tools是一套为ArkUI-X应用开发者提供的命令行工具，支持在Windows/Ubuntu/macOS平台运行，用于构建OpenHarmony、HarmonyOS、Android和iOS平台的应用程序， 其功能包括开发环境检查，新建项目，编译打包，安装调试等。鸿蒙—作为国家主力推送的国产操作系统。部分的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，未来将会。
鸿蒙OS开发：【Stage模型应用程序包结构】
m0_70748845的博客
05-14 1049
为了让开发者能对应用程序包在不同阶段的形态更有清晰的认知，分别对开发态、编译态、发布态的应用程序结构展开介绍。
鸿蒙：获取屏幕宽高之display
zhiChao的博客
05-16 179
官网地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-display-V5。吐槽一下官网的搜索，直接搜索屏幕宽高都是什么乱七八糟的。根本找不到，有没有懂的大佬给说下正确用法。我是在别人的博客看到display这个关键字才找到的官网文档。本人使用版本：Developer Beta1。
小程序直接生成鸿蒙App的方法
POHOU23的博客
05-10 893
再来说说用户生态，目前支持鸿蒙的原生应用可以说少之又少，就一些鸿蒙官方去推动进行签约的服务商，这种其实只能做一个代表效果，并不能推动大量长尾的企业和开发者主动响应，因为开发成本是让这些企业望而却步的关键。另外，相较于很多开发者提到的鸿蒙 App 开发过程中开发工具集（Harmony Developer Tools）不好用的情况，FinClip 提供了开发工具 FinClip Studio，界面和操作办法与微信小程序的开发工具类似，自带调试和真机预览，无需学习简单易上手。
harmonyos移动应用开发 arkts版 电子书
01-29
HarmonyOS移动应用开发arkts版电子书是一本关于如何使用HarmonyOS开发移动应用的实用指南。这本电子书的目的是帮助开发者了解HarmonyOS移动应用开发的基本概念和技术，以及如何使用arkts工具包来构建高性能、可靠的应用程序。 这本电子书首先介绍了HarmonyOS的基本概念和架构，包括分布式技术、资源管理和安全性等方面。然后，它详细介绍了arkts工具包的使用方法，包括如何设置开发环境、创建应用程序和调试代码等。此外，该电子书还提供了大量的示例代码和实战案例，供读者参考和学习。 在这本电子书中，读者将学习如何开发HarmonyOS移动应用的各个方面，包括界面设计、数据存储、网络通信和用户体验等。它不仅涵盖了基础知识，还介绍了一些高级主题，如应用程序优化和性能调优。读者可以通过阅读这本电子书，系统地学习和掌握HarmonyOS移动应用开发的技能。 总而言之，HarmonyOS移动应用开发arkts版电子书是一本详细且实用的指南，适用于那些对HarmonyOS移动应用开发感兴趣的开发者。它提供了全面的教程和实战案例，帮助读者快速入门和掌握HarmonyOS移动应用开发的技术。希望通过这本电子书，更多的开发者能够利用HarmonyOS的优势，开发出更好的移动应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值