电子发烧友

云端服务的实现是HarmonyOS/OpenHarmony原生应用开发的一个重要的环节，如果用户端是鸿蒙原生应用，但是服务端即云端还是基于传统的各种WEB网络框架、数据库与云服务器，那么所谓的

2023-10-08 10:22

文档中的TS作者认为就是ArkTS之意。 一、云函数，从开发文档上已经说明，是已经支持HarmonyOS/OpenHarmony(Stage模型-API9)，但是在开发语言上，没有ArkTS，是否

2023-10-12 14:43

/OpenHarmony(Stage模型-API9)应用开发的。 文档地址： https://developer.huawei.com/consumer/cn/doc/development

2023-10-16 14:20

显示一段文本的组件。该组件从API Version 7开始支持。用上角标单独标记该内容的起始版本。可以包含Span子组件。 一、接口 Text(content?: string | Resource) 从API version 9开始，该接口支持在ArkTS卡片中使用。 参数： 参数： 参数名 参数类型 必填 参数描述 content string Resource 否 二、属性 除支持通用属性外，还支持以下属性： 名称 参数类型 描述 textAlign TextAlign 设置文本段落在水平方向的对齐方式默认值：TextAlign.Start说明：文本段落宽度占满Text组件宽度。可通过align属性控制文本段落在垂直方向上的位置，此组件中不可通过align属性控制文本段落在水平方向上的位置，即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同，控制内容在顶部。Alignment.Start、Alignment.Center、Alignment.End效果相同，控制内容垂直居中。Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同，控制内容在底部。结合TextAlign属性可控制内容在水平方向的位置。从API version 9开始，该接口支持在ArkTS卡片中使用。 textOverflow {overflow:TextOverflow} 设置文本超长时的显示方式。默认值：{overflow: TextOverflow.Clip}说明：文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\\\\u200B。需配合maxLines使用，单独设置不生效。从API version 9开始，该接口支持在ArkTS卡片中使用。 maxLines number 设置文本的最大行数。默认值：Infinity说明：默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 textOverflow来指定截断方式。从API version 9开始，该接口支持在ArkTS卡片中使用。 lineHeight string number decoration {type:TextDecorationType,color?:ResourceColor} 设置文本装饰线样式及其颜色。默认值：{type: TextDecorationType.None,color：Color.Black}从API version 9开始，该接口支持在ArkTS卡片中使用。 baselineOffset number string letterSpacing number string minFontSize number string maxFontSize number string textCase TextCase 设置文本大小写。默认值：TextCase.Normal从API version 9开始，该接口支持在ArkTS卡片中使用。 copyOption9+ CopyOptions 组件支持设置文本是否可复制粘贴。默认值：CopyOptions.None该接口支持在ArkTS卡片中使用。说明：设置copyOptions为CopyOptions.InApp或者CopyOptions.LocalDevice，长按文本，会弹出文本选择菜单，可选中文本并进行复制、全选操作。 说明：不支持Text内同时存在文本内容和Span子组件。如果同时存在，只显示Span内的内容。 三、事件 支持通用事件。 四、示例 示例1 textAlign，textOverflow，maxLines，lineHeight使用示例。 // xxx.ets @Entry @Component struct TextExample1 { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { // 文本水平方向对齐方式设置 // 单行文本 Text(\'textAlign\').fontSize(9).fontColor(0xCCCCCC) Text(\'TextAlign set to Center.\') .textAlign(TextAlign.Center) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'TextAlign set to Start.\') .textAlign(TextAlign.Start) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'TextAlign set to End.\') .textAlign(TextAlign.End) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 多行文本 Text(\'This is the text content with textAlign set to Center.\') .textAlign(TextAlign.Center) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with textAlign set to Start.\') .textAlign(TextAlign.Start) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with textAlign set to End.\') .textAlign(TextAlign.End) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 文本超长时显示方式 Text(\'TextOverflow+maxLines\').fontSize(9).fontColor(0xCCCCCC) // 超出maxLines截断内容展示 Text(\'This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.\') .textOverflow({ overflow: TextOverflow.Clip }) .maxLines(1) .fontSize(12) .border({ width: 1 }) .padding(10) // 超出maxLines展示省略号 Text(\'This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.\'.split(\'\') .join(\'\\\\\\\\u200B\')) .textOverflow({ overflow: TextOverflow.Ellipsis }) .maxLines(1) .fontSize(12) .border({ width: 1 }) .padding(10) Text(\'lineHeight\').fontSize(9).fontColor(0xCCCCCC) Text(\'This is the text with the line height set. This is the text with the line height set.\') .fontSize(12).border({ width: 1 }).padding(10) Text(\'This is the text with the line height set. This is the text with the line height set.\') .fontSize(12).border({ width: 1 }).padding(10) .lineHeight(20) }.height(600).width(350).padding({ left: 35, right: 35, top: 35 }) } } 示例2 decoration，baselineOffset，letterSpacing，textCase使用示例： @Entry @Component struct TextExample2 { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { Text(\'decoration\').fontSize(9).fontColor(0xCCCCCC) Text(\'This is the text content with the decoration set to LineThrough and the color set to Red.\') .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with the decoration set to Overline and the color set to Red.\') .decoration({ type: TextDecorationType.Overline, color: Color.Red }) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with the decoration set to Underline and the color set to Red.\') .decoration({ type: TextDecorationType.Underline, color: Color.Red }) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 文本基线偏移 Text(\'baselineOffset\').fontSize(9).fontColor(0xCCCCCC) Text(\'This is the text content with baselineOffset 0.\') .baselineOffset(0) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with baselineOffset 30.\') .baselineOffset(30) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with baselineOffset -20.\') .baselineOffset(-20) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 文本字符间距 Text(\'letterSpacing\').fontSize(9).fontColor(0xCCCCCC) Text(\'This is the text content with letterSpacing 0.\') .letterSpacing(0) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with letterSpacing 3.\') .letterSpacing(3) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'This is the text content with letterSpacing -1.\') .letterSpacing(-1) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') Text(\'textCase\').fontSize(9).fontColor(0xCCCCCC) Text(\'This is the text content with textCase set to Normal.\') .textCase(TextCase.Normal) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 文本全小写展示 Text(\'This is the text content with textCase set to LowerCase.\') .textCase(TextCase.LowerCase) .fontSize(12) .border({ width: 1 }) .padding(10) .width(\'100%\') // 文本全大写展示 Text(\'This is the text content with textCase set to UpperCase.\') .textCase(TextCase.UpperCase) .fontSize(12).border({ width: 1 }).padding(10) }.height(700).width(350).padding({ left: 35, right: 35, top: 35 }) } } 五、场景 适合做文本特效的各种卡片。 本文根据HarmonyOS官方文档整理。

2023-10-19 15:13

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。 一、接口 Stack(value?: { alignContent?: Alignment }) 从API version 9开始，该接口支持在ArkTS卡片中使用。 二、属性 除支持通用属性外，还支持以下属性： 三、示例 // xxx.ets @Entry @Component struct StackExample { build() { Stack({ alignContent: Alignment.Bottom }) { Text(\'First child, show in bottom\').width(\'90%\').height(\'100%\').backgroundColor(0xd2cab3).align(Alignment.Top) Text(\'Second child, show in top\').width(\'70%\').height(\'60%\').backgroundColor(0xc1cbac).align(Alignment.Top) }.width(\'100%\').height(150).margin({ top: 5 }) } } 四、效果展示 五、场景 卡片上实现堆叠的场景使用。 本文根据HarmonyOS官方文档整理。

2023-10-09 14:29

一、支持HarmonyOS(Stage模型-API9)应用的账户注册登录方式 文档中的TS作者认为就是ArkTS之意。暂时支持四种模式，手机、邮箱、匿名、自有账户。 二、暂时不支持HarmonyOS(Stage模型-API9)应用的账户注册登录方式 包括华为账户注册登录，HarmonyOS(Stage模型-API9)暂时也是不支持的。API6是支持华为账户注册登录的。 三、关于Serverless认证服务说明 帮助应用快速构建安全可靠的用户认证系统，给用户更简捷的登录体验。支持手机号、邮箱、国内外主流三方平台帐号、游客匿名帐号等多种登录方式。 1.功能介绍 支持多种登录方式，使您的应用能够向用户提供多种登录方式，并允许用户关联多种帐号，无论用户采用何种方式登录，都能获得统一的身份和业务体验。 无需自行对接短信和邮箱代理，您无需自行对接短信和邮箱代理，认证服务会帮您完成验证短信和邮件的发送，并根据用户设备语言，自动匹配相应语种展示。 跨平台，SDK支持多种平台和语言，无论您的用户使用何种类型的终端，都能获得统一的登录体验和用户身份。 免运维 ，您只需在应用中访问认证服务的相关能力，而不需要关心云侧的设施和实现，以节省资源和运维成本。 2.服务优势 高效率，只需要在端侧简单组装，1天即可完成支持多种登录方式的用户认证系统的搭建，开发效率提升5倍。 低成本，无需另外购买和搭建服务器，节省80%运维成本与资源成本。 更安全，与其他Serverless服务自动适配，通过简单的规则定义即可保护用户数据安全。 4.应用场景 手机号/邮箱登录，支持用户使用“手机号/邮箱+密码”、“手机号/邮箱+验证码”或“本机号码一键登录”的方式来登录您的应用。 三方平台帐号登录，支持用户使用华为账号以及微信、QQ、微博、Facebook、Twitter、苹果等第三方平台帐号登录应用。 游客匿名帐号登录，用户无需注册，使用游客身份即可访问应用的部分内容并获得差异化体验，助您提升用户转化率。 自有帐号体系登录，如果您已经自行构建了认证系统，您可以通过自有帐号对接来让您已构建的认证系统与认证服务协同工作，以实现如下目的： 让认证服务来提供您的自有认证系统所不具备的认证方式； 让您自有认证系统中的用户以安全的方式访问其他Serverless服务（比如云数据库、云存储等）。

2023-10-10 14:59

组件提供勾选框样式、状态按钮样式及开关样式。该组件从API Version 8开始支持。 仅当ToggleType为Button时可包含子组件。 一、接口 Toggle(options: { type: ToggleType, isOn?: boolean }) 从API version 9开始，该接口支持在ArkTS卡片中使用。 参数: ToggleType枚举说明 从API version 9开始，该接口支持在ArkTS卡片中使用。 二、属性 除支持通用属性外，还支持以下属性： 三、事件 除支持通用事件外，还支持以下事件： 四、示例 // xxx.ets @Entry @Component struct ToggleExample { build() { Column({ space: 10 }) { Text(\'type: Switch\').fontSize(12).fontColor(0xcccccc).width(\'90%\') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Switch, isOn: false }) .selectedColor(\'#007DFF\') .switchPointColor(\'#FFFFFF\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) Toggle({ type: ToggleType.Switch, isOn: true }) .selectedColor(\'#007DFF\') .switchPointColor(\'#FFFFFF\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) } Text(\'type: Checkbox\').fontSize(12).fontColor(0xcccccc).width(\'90%\') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Checkbox, isOn: false }) .size({ width: 20, height: 20 }) .selectedColor(\'#007DFF\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) Toggle({ type: ToggleType.Checkbox, isOn: true }) .size({ width: 20, height: 20 }) .selectedColor(\'#007DFF\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) } Text(\'type: Button\').fontSize(12).fontColor(0xcccccc).width(\'90%\') Flex({ justifyContent: FlexAlign.SpaceEvenly, alignItems: ItemAlign.Center }) { Toggle({ type: ToggleType.Button, isOn: false }) { Text(\'status button\').fontColor(\'#182431\').fontSize(12) }.width(106) .selectedColor(\'rgba(0,125,255,0.20)\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) Toggle({ type: ToggleType.Button, isOn: true }) { Text(\'status button\').fontColor(\'#182431\').fontSize(12) }.width(106) .selectedColor(\'rgba(0,125,255,0.20)\') .onChange((isOn: boolean) => { console.info(\'Component status:\' + isOn) }) } }.width(\'100%\').padding(24) } } 五、场景 在卡片中和单选多选配合使用，可以做出各种选择框的效果。 本文根据HarmonyOS官方文档整理。

2023-10-11 14:52

可以附加在单个组件上用于信息标记的容器组件。该组件从API Version 7开始支持。 支持单个子组件。子组件类型：系统组件和自定义组件，支持渲染控制类型（if/else、ForEach和LazyForEach）。 一、接口 方法1： Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) 创建数字标记组件。 从API version 9开始，该接口支持在ArkTS卡片中使用。 参数： 方法2： Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) 根据字符串创建标记组件。 从API version 9开始，该接口支持在ArkTS卡片中使用。 参数： BadgePosition枚举说明 从API version 9开始，该接口支持在ArkTS卡片中使用。 BadgeStyle对象说明 从API version 9开始，该接口支持在ArkTS卡片中使用。 二、属性 支持通用属性。 三、事件 支持通用事件。 四、示例 // xxx.ets @Entry @Component struct BadgeExample { @builder TabBuilder(index: number) { Column() { if (index === 2) { Badge({ value: \'\', style: { badgeSize: 6, badgeColor: \'#FA2A2D\' } }) { Image(\'/common/public_icon_off.svg\') .width(24) .height(24) } .width(24) .height(24) .margin({ bottom: 4 }) } else { Image(\'/common/public_icon_off.svg\') .width(24) .height(24) .margin({ bottom: 4 }) } Text(\'Tab\') .fontColor(\'#182431\') .fontSize(10) .fontWeight(500) .lineHeight(14) }.width(\'100%\').height(\'100%\').justifyContent(FlexAlign.Center) } @Builder itemBuilder(value: string) { Row() { Image(\'common/public_icon.svg\').width(32).height(32).opacity(0.6) Text(value) .width(177) .height(21) .margin({ left: 15, right: 76 }) .textAlign(TextAlign.Start) .fontColor(\'#182431\') .fontWeight(500) .fontSize(16) .opacity(0.9) Image(\'common/public_icon_arrow_right.svg\').width(12).height(24).opacity(0.6) }.width(\'100%\').padding({ left: 12, right: 12 }).height(56) } build() { Column() { Text(\'dotsBadge\').fontSize(18).fontColor(\'#182431\').fontWeight(500).margin(24) Tabs() { TabContent() .tabBar(this.TabBuilder(0)) TabContent() .tabBar(this.TabBuilder(1)) TabContent() .tabBar(this.TabBuilder(2)) TabContent() .tabBar(this.TabBuilder(3)) } .width(360) .height(56) .backgroundColor(\'#F1F3F5\') Column() { Text(\'stringBadge\').fontSize(18).fontColor(\'#182431\').fontWeight(500).margin(24) List({ space: 12 }) { ListItem() { Text(\'list1\').fontSize(14).fontColor(\'#182431\').margin({ left: 12 }) } .width(\'100%\') .height(56) .backgroundColor(\'#FFFFFF\') .borderRadius(24) .align(Alignment.Start) ListItem() { Badge({ value: \'New\', position: BadgePosition.Right, style: { badgeSize: 16, badgeColor: \'#FA2A2D\' } }) { Text(\'list2\').width(27).height(19).fontSize(14).fontColor(\'#182431\') }.width(49.5).height(19) .margin({ left: 12 }) } .width(\'100%\') .height(56) .backgroundColor(\'#FFFFFF\') .borderRadius(24) .align(Alignment.Start) }.width(336) Text(\'numberBadge\').fontSize(18).fontColor(\'#182431\').fontWeight(500).margin(24) List() { ListItem() { this.itemBuilder(\'list1\') } ListItem() { Row() { Image(\'common/public_icon.svg\').width(32).height(32).opacity(0.6) Badge({ count: 1, position: BadgePosition.Right, style: { badgeSize: 16, badgeColor: \'#FA2A2D\' } }) { Text(\'list2\') .width(177) .height(21) .textAlign(TextAlign.Start) .fontColor(\'#182431\') .fontWeight(500) .fontSize(16) .opacity(0.9) }.width(240).height(21).margin({ left: 15, right: 11 }) Image(\'common/public_icon_arrow_right.svg\').width(12).height(24).opacity(0.6) }.width(\'100%\').padding({ left: 12, right: 12 }).height(56) } ListItem() { this.itemBuilder(\'list3\') } ListItem() { this.itemBuilder(\'list4\') } } .width(336) .height(232) .backgroundColor(\'#FFFFFF\') .borderRadius(24) .padding({ top: 4, bottom: 4 }) .divider({ strokeWidth: 0.5, color: \'rgba(0,0,0,0.1)\', startMargin: 60, endMargin: 12 }) }.width(\'100%\').backgroundColor(\'#F1F3F5\').padding({ bottom: 12 }) }.width(\'100%\') } } 五、场景 卡片上和服务页面上没有执行的内容的提示。 本文根据HarmonyOS官方文档整理。

2023-09-28 11:53