HarmonyOS NEXT端侧工程调用云侧能力实现业务功能

完成云侧云函数开发、调试、部署之后,接下来就是端侧调用云函数获取数据,实现真正意义上的端云协同开发。

1、设置云函数配置项

端侧调用云函数需要网络环境,因此,需要在"entry/src/main/module.json5"文件中添加网络权限。

JSON 复制代码
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]

2、查看函数名和版本

在函数的触发器页面点击"HTTP触发器",查看"触发URL"的后缀,获取触发器的标识,格式为"函数名-版本号"。如下图所示,"calculate-baby-age-latest"即为HTTP触发器标识,其中"calculate-baby-age"为函数名,"latest"为版本号。

3、端侧调用云函数

在端侧工程(Application)模块entry目录下打开src/main/ets/pages > Index.ets页面使用使用搜索框组件Search和日期弹窗CalendarPickerDialog实现宝宝出生日期选择,并根据选择的日期调用计算宝宝的年龄云函数返回包含年、月、日、天数的宝宝年龄信息,具体调用云函数步骤如下所示:

1)在项目中导入云函数组件cloudFunction。

python 复制代码
import type { BusinessError } from '@kit.BasicServicesKit';
import { cloudFunction } from '@kit.CloudFoundationKit';

2)调用call()方法设置函数,在方法中传入函数名称,返回调用结果。

javascript 复制代码
// Promise异步回调
function callFunctionPromise() {
  cloudFunction.call({
    name: 'calculate-baby-age', // functionName需替换成指定的函数名
    version: '$latest',   // 如果不传入版本号,默认为"$latest"。
    timeout: 10 * 1000,   // 单位为毫秒,默认为70*1000毫秒。
    data: {               // data为云函数接收的入参
      birthday: '2023-3-15'
    }
  }).then((value: cloudFunction.FunctionResult) => {
    hilog.info(0x0000, 'testTag', `Succeeded in calling the function, result: ${JSON.stringify(value.result)}`);
  }).catch((err: BusinessError) => {
    hilog.error(0x0000, 'testTag', `Failed to call the function, code: ${err.code}, message: ${err.message}`);
  });
}

// callback异步调用
function callFunctionCallback() {
  cloudFunction.call({
    name: 'calculate-baby-age',
    version: '$latest',
    timeout: 10 * 1000,
    data: {
      birthday: '2023-3-15'
    }
  }, (err: BusinessError, value: cloudFunction.FunctionResult) => {
    if (err) {
      hilog.error(0x0000, 'testTag', `Failed to call the function, code: ${err.code}, message: ${err.message}`);
      return;
    }
    hilog.info(0x0000, 'testTag', `Succeeded in calling the function, result: ${JSON.stringify(value.result)}`);
  });
}

3)如果需要关注函数的返回值,可调用result属性获取。

JSON 复制代码
let resultValue = value.result;

4、完整代码

typescript 复制代码
import type { BusinessError } from '@kit.BasicServicesKit';
import { cloudFunction } from '@kit.CloudFoundationKit';

interface BabyAge {
  years: number;
  months: number;
  days: number;
  totalDays: number;
}

interface ResponseBody {
  code: number;
  desc: string;
  data: BabyAge
}

@Entry
@Component
struct Index {
  controller: SearchController = new SearchController();
  @State birthday: string = "";
  @State callFunctionResult: BabyAge | undefined = undefined;

  build() {
    Column({ space: 10 }) {
      Search({ controller: this.controller, value: this.birthday })
        .width('90%')
        .height('54vp')
        .searchIcon(
          new SymbolGlyphModifier($r('sys.symbol.calendar_badge_play'))
            .fontColor([Color.Blue])
            .fontSize('30fp')
        )
        .cancelButton({
          style: CancelButtonStyle.INVISIBLE
        })
        .borderRadius('8vp')
        .onClick(() => {
          CalendarPickerDialog.show({
            selected: new Date(this.birthday),
            acceptButtonStyle: {
              style: ButtonStyleMode.EMPHASIZED
            },
            cancelButtonStyle: {
              fontColor: Color.Grey
            },
            onAccept: async (value) => {
              console.info("calendar onAccept:" + JSON.stringify(value))
              let result: cloudFunction.FunctionResult = await cloudFunction.call({
                name: 'calculate-baby-age',
                version: '$latest',
                timeout: 10 * 1000,
                data: {
                  birthday: value
                }
              });
              let body = result.result as ResponseBody;
              this.callFunctionResult = body.data;
            }
          })
        })
      if (this.callFunctionResult !== undefined) {
        Text(`我已经${this.callFunctionResult.years}岁了 ${this.callFunctionResult.months}月 ${this.callFunctionResult.days}天了~`)
        Text(`我已经出生${this.callFunctionResult.totalDays}天了~`)
      }
    }.width('100%').height('100%')
  }
}
相关推荐
zhanshuo12 分钟前
HarmonyOS 多屏适配最佳实践:基于 ArkUI 的响应式 UI 方案
harmonyos
zhanshuo14 分钟前
玩转 ArkUI 拖拽功能:5 分钟搞定拖放交互与场景实战
harmonyos
制造数字化方案研究院2 小时前
中国信通院/华为:智能体技术和应用研究报告(2025)(转载)
华为
shenshizhong4 小时前
鸿蒙南向开发 编写一个简单子系统
前端·harmonyos
奔跑吧邓邓子7 小时前
从0到1学PHP(十二):PHP 框架入门与项目实战
php·框架·laravel·项目实战·thinkphp·yii
HarmonyOS_SDK7 小时前
一碰即传,重构跨设备文件分享体验
harmonyos
zhanshuo1 天前
让鸿蒙应用飞起来!ArkUI 图形渲染性能优化全攻略
harmonyos
zhanshuo1 天前
在 ArkUI 中实现丝滑嵌套滚动:让你的页面像抖音一样顺滑
harmonyos
simple_lau1 天前
鸿蒙开发中如何快速定位丢帧
harmonyos·arkts·arkui
云_杰1 天前
利用AI开发我又又上架了一个鸿蒙产品——青蓝程序员工具箱
harmonyos·trae