鸿蒙HarmonyOS-港品优选

鸿蒙HarmonyOS

一、介绍

技术特点：

分布式架构、安全可信、一次开发，多端部署、万物互联

二、开发云函数

1.创建云函数

网址📍：
https://developer.huawei.com/consumer/cn/agconnect/

添加项目：

进入到项目当中来了：

开启云函数：

点击：
存储位置：

返回这里创建应用：

需要先创建APP ID：

创建好之后会显示这些信息：

2.下载工具

网址📍：https://developer.huawei.com/consumer/cn/deveco-studio/

3.创建应用

打开：

选择端云一体化模版：

注意包名一定要和APPGallery Connect里的完全一致：

这里会跳转让你登录：

这样就OK啦：

点击完成，等待应用自动完成初始化：

代码分为两部分：

Application是端侧代码：

与界面相关的

CloudProgram是云侧代码：

编写云数据库/云函数

4.创建自己的云函数

同时它也生成了云函数的TS代码文件📃，还有配置文件📃

云函数的开发语言:ts,type script语言

云函数的触发时机：

http请求/云数据库（插入记录📝)/云存储（上传文件）

云函数的4个参数：

event：输入信息

context：上下文信息，例如：拿到环境变量

callback：输出（返回结果）（回调函数）

logger：记录📝日志（debug/info/warn/error）

5.编写云函数代码

编写一个Hello World

例如：

运行方式：

1.本地运行：

成功✅️：

2.云端运行：

成功✅️：

回到APPGallery Connect去看一眼：

6.测试云函数

点击云函数：

配置测试参数

测试：

运行日志：

三、调用云函数

1.添加依赖

创建模版的时候自动生成了：

2.初始化APPGallery Connect

在这里：

如果项目有更改，在这里下载更新：

然后放到默认路径：

引入 JSON 对象：

//把JSON作为第二个参数 //try catch一下 try { initialize(this.context, json); } catch (e){ hilog.error(0x0000,'APPGalleryConnectError',JSON.stringify(e)) }

EntryAbility.ets部分代码：

import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; import { window } from '@kit.ArkUI'; import buffer from '@ohos.buffer'; import { initialize } from '@hw-agconnect/hmcore'; import json from "../../resources/rawfile/agconnect-services.json"; const HILOG_DOMAIN = 0x0000; const TAG = '[EntryAbility]'; export default class EntryAbility extends UIAbility { onCreate() { //把JSON作为第二个参数 //try catch一下 try { initialize(this.context, json); } catch (e){ hilog.error(0x0000,'APPGalleryConnectError',JSON.stringify(e)) } try { this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET); } catch (err) { hilog.error(HILOG_DOMAIN, TAG, 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err)); } hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onCreate'); } onDestroy(): void { hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onDestroy'); } async onWindowStageCreate(windowStage: window.WindowStage){ // Main window is created, set main page for this ability hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onWindowStageCreate'); windowStage.loadContent('pages/Index', (err) => { if (err.code) { hilog.error(HILOG_DOMAIN, TAG, 'Failed to load the content. Cause: %{public}s', JSON.stringify(err)); return; } hilog.info(HILOG_DOMAIN, TAG, 'Succeeded in loading the content.'); }); } onWindowStageDestroy(): void { // Main window is destroyed, release UI related resources hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onWindowStageDestroy'); } onForeground(): void { // Ability has brought to foreground hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onForeground'); } onBackground(): void { // Ability has back to background hilog.info(HILOG_DOMAIN, TAG, '%{public}s', 'Ability onBackground'); } }

oh-package.json5部分代码:

{ "license": "", "devDependencies": {}, "author": "", "name": "entry", "description": "Please describe the basic information.", "main": "", "version": "1.0.0", "dependencies": { "@hw-agconnect/cloud": "^1.0.0", "@hw-agconnect/hmcore": "^1.0.0", "@hw-agconnect/auth-component": "^1.0.0", "cloud_objects": "file:../cloud_objects" } }

3.界面

新建页面📄：

然后：

就自动生成代码框架了

在EntryAbility.ets文件里把原来默认的首页改成我们自己新建的首页：

新建虚拟设备：

下载好之后下一步：

构建项目并运行：
添加一个button试试：

4.调用云函数

这里版本我们一般要去APPGallery Connect找一下：

函数返回结果：

在当前目录下进入cmd，输入指令：

hdc shell param get const.product.cpu.abilist查询设备支持的ABI列表：

遇到这个报错可以去看这个文档📄：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/bm-tool#section9568347-%E8%A7%A3%E6%9E%90%E6%9C%AC%E5%9C%B0so%E6%96%87%E4%BB%B6%E5%A4%B1%E8%B4%A5

可以拿真机调试，USB连接或者无线连接（在同一个网络环境下）

应用开发文档：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/application-dev-guide

5.传参

修改端侧代码：

//传参 TextInput({placeholder:'请输入姓名'}) .onChange(value=>{ this.name=value })

params:{name:this.name}

如图预览器：

部署云函数操作：

修改云端代码并部署：

之后查看云函数版本：

可以在这里查看日志：

8.2 使用认证组件进行认证

新建登录页面：

导入依赖：

mode：认证模式

MyLogin界面完整代码：

import {AuthMode,Login} from '@hw-agconnect/auth-component' import {AuthUser} from '@hw-agconnect/cloud' @Entry @Component struct MyLogin { build() { Row() { Column() { Login( { modes: [AuthMode.PHONE_VERIFY_CODE], //模式认证（可以支持多种模式）数组形式 onSuccess: (user: AuthUser) => { //回调函数 } }) { Button('登录') } } } .height('100%') .width('100%') } }

注意把这个首页改成我们的：

企业官网建设流程全解析