黄山网站设计长春网站制作

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

1、设置云函数配置项

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

"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。

import type { BusinessError } from '@kit.BasicServicesKit';
import { cloudFunction } from '@kit.CloudFoundationKit';

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

// 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属性获取。

let resultValue = value.result;

4、完整代码

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%')}
}