鸿蒙端云一体化开发-云函数

whwdyx

1197人浏览 · 2025-10-12 19:41:25

whwdyx · 2025-10-12 19:41:25 发布

一、在AppGallery Connect上创建项目

1.找到AppGallery Connect

AppGallery Connect的地址为：https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/
登录之前需要需要登录华为账号，请自行登录。

2.在AppGallery Connect上创建项目

登录后页面如下：
在这里插入图片描述
进入页面中的“开发与服务”
接下来，“添加项目”
然后输入项目名称，此处我就输入了“CSDNProjectDemo”：

然后做如下图所示的2项操作。

①首先点击数据处理位置中的“启用”

然后在中国后面勾选“启用”，并将中国设为默认。
②然后“添加应用”
进入页面后显示界面如下：
在这里插入图片描述
选择“App（HarmonyOS）”后界面编程如下状态：

然后点击“APP ID”去创建APP ID：

此处：应用类型选“HamonyOS应用”；应用名称填“CSDNCloudDeviceDemo”；应用包名填“com.example.csdnclouddevicedemo”（此处要注意，后面在DevEco Stuidio中创建工程时，应用名称最好保持一致，应用报名必须保持一致）；应用分类选择“应用”。然后点击下一步。
然后确定一下，新建的应用，是隶属于我们上面创建的项目中：
在这里插入图片描述
点击上图中的确定后，会弹出开放能力选择界面。

我们可以根据自己的项目选择使用，目前我们暂不选择更多的能力，直接选择下方的“确认”。这样如下图，APP ID就创建好了。

这样我们的项目就建好了。可以通过点击上面的“开发与服务”查看刚创建的项目（及该项目下的应用）。
在这里插入图片描述
点击上图中的下方红框，就可以查看创建好的项目的详细信息：

二、在DevEco Studio中创建端云一体化项目

创建工程时，需要选择“Application”（左侧），[CloudDev]Empty Ability模板(右侧)
在这里插入图片描述
接下来填入工程信息，其中Project name必须与上面的APP ID中的应用名称保持一致，此处填“CSDNCloudDeviceDemo”，保证Bundle name与上面的APP ID中的应用包名保持一致：“com.example.csdnclouddevicedemo”

点击上面“Next”后，就能管理AppGallery Connect上创建的项目（Project）以及应用(App)自动关联上了。
在这里插入图片描述
如果关联的正确的话，直接点击“Finish”就好了。

三、云侧-云函数

1.在DevEco Stuido中创建云函数并上传

在左侧工程树中找到“CloudProgram”中的“cloudfunctions”上点击鼠标右键，弹出的菜单中选择New->Cloud Function
在这里插入图片描述
然后填入云函数名称“test”(这个可以根据自己需要自己定义），并选择云函数类型为“Cloud Function”
然后，工程目录树中就会出现test云函数，找到test.ts，修改里面的内容就好了。

这里将右侧的test.ts中给的代码更改为：

let myHandler = async function (event, context, callback, logger) {
  logger.info(event);
  // do something here
  callback({
    code: 0,
    desc: "Success.",
    data:[
     {
       "title": "西工大召开庆祝2025年教师节表彰大会",
       "imageURL": "https://www.nwpu.edu.cn/__local/C/5E/C9/FEED26CAEA763E365D4ABDBDC61_B7206EB8_1716EC.png",
        "content": "9月10日，**大学2025年教师节表彰大会在友谊校区国际会议中心举行。校党委书记**出席并讲话，全体在校校领导，校学术委员会主任**院士，各单位主要负责人，获奖教师代表、荣休教师代表、新入职教师代表和学生代表等参加大会。大会由党委常务副书记吕卫东主持。",
        "updateDate": "2025年09月10日"
     },
     {
       "title": "学校举行2025级新生开学典礼",
       "imageURL": "https://www.nwpu.edu.cn/__local/8/F4/74/021FCAAB11B664738002696AF2B_DD38C2E8_1674EC.png",
       "content": "悠悠秦岭铸风骨，巍巍长安育栋梁。8月31日上午2025级新生开学典礼在西北工业大学长安校区举行。来自国内外的12000余名新生怀揣梦想、奔赴热爱，在西工大启航人生新征程。",
       "updateDate": "2025年08月31日"
      }  
    ]
  });
};
export { myHandler };

这个云函数，就是在本地端发生请求后，通过callback函数，返回信息。此处我在里面增加了一个data参数。
然后再cloudfunctions目录上右键单击选择“Run Cloud Functions”
在这里插入图片描述
没有错误的话，就选择右键菜单中的“Deploy Cloud Functions”，将刚创建的test云函数部署到云端。

2.在AppGallery Connect上查看上传上来的云函数

同样在AppGallery Connect上找到之前创建的工程：
在这里插入图片描述
进去后点击左侧的云函数，就能看到刚上传的test云函数

在右侧，还可以测试该函数

点击上图中的测试，就会得到“执行结果”。

四、端侧调用云函数

在页面Index.ets中将代码替换成以下内容：

import { cloudFunction } from '@kit.CloudFoundationKit';//云函数
import { BusinessError } from '@kit.BasicServicesKit';
interface IData{
  title:string
  imageURL:string
  content:string
  updateDate:string
}
interface  IResultData {
  code:number
  desc:string
  data:IData[]
}

interface Ires {
  result: IResultData
}
@Entry
@Component
struct Index {
  @State receiveMsg:string=''
  @State data:IData[]=[]
  build() {
    Column(){
      Button("获取云函数数据").fontSize(40).height(80).width('98%')
        .onClick(async ()=>{
          cloudFunction.call({ name: 'test' }).then((res: cloudFunction.FunctionResult) => {
            let callback  = res as Ires;
            this.data=callback.result.data

          }).catch((err: BusinessError) => {
            console.error(`Failed to call the function, Code: ${err.code}, message: ${err.message}`);
          });
        })
      List({space:10}){
        ForEach(this.data,(item:IData)=>{
          SubItem({title:item.title,url:item.imageURL,
        content:item.content,updateDate:item.updateDate})
        })
      }
      Text(this.receiveMsg)
    }.width("100%")

  }
}
@Preview@Component
export struct SubItem{
  url:string='--';     title:string='--'
  content:string='--'; updateDate:string='--'
  build() {
    Row(){
      Image(this.url).width('40%').height(90)
      Column({space:5}){
        Text(this.title).fontSize(20).maxLines(1).textOverflow({overflow:TextOverflow.Ellipsis})
        Text(this.content).fontSize(14).maxLines(3).textOverflow({overflow:TextOverflow.Ellipsis})
        Text(this.updateDate).fontSize(12).width('100%').textAlign(TextAlign.End)
      }.width("60%")
    }
  }
}

五、手动签名

由于端云一体的端调试必须在真机上进行。而且必须手动签名，不能使用自动签名。自动签名的话，不允许调用云端函数。
下面介绍一下如何进行手动签名。

1.在DevEco Studio 中生成Key(.p12文件)和CSR(.csr文件)

在DevEco Studio的菜单Build下，选择“Generate Key and CSR”，在弹出对话框中选择“New”。
在这里插入图片描述
在弹出的Create Key Store中点击Key store file右侧的输入选择框。

选择一个文件夹，比如本项目中我就将DevEco Studio产生的Key文件放在“CSDNKey”文件夹中。
Key文件命名为“devGenerateKey”

然后输入密码，这个密码一定要记住（比如输入的是123abc987），后面要用。
在这里插入图片描述
下图中①②初的密码就是上面输入的那个让一定要记住的密码（123abc987）。

上图中的Alias别名也要记住：此处用的是KeyAlias。点击“Next”，此时文件夹“CSDNKey”文件夹中已经生成了key文件“devGenerateKey.p12”
在这里插入图片描述
点击“Next”后，继续生成CSR文件，点击下图中的红框，选择CSR的生成文件存放的路径以及文件名。

同样放在CSDNKey，文件名命名为：devGenerateCSR。

在这里插入图片描述
上图点击“OK”后，返回上一个页面后点击“Finish”，会出现如下提示。

在这里插入图片描述
这样，文件夹“CSDNKey”中就会产生.csr文件：

2.在AppGallery Connect中利用上述的csr文件和.p12文件申请证书文件(.cer)和Profile文件(.p7b)

在这里插入图片描述
然后点击下图中的下载，就能将csdnGalleryGenerate.cer文件下载回来，把该文件拷贝到CSDNKey文件夹待用。

然后继续申请profile

证书，选择刚刚创建的“证书”：

设备选择，我图中给的真机：

最后，将申请权限后面的单选框选中，点击添加就可以了。
在这里插入图片描述
这时，会提示成功。然后将刚生成的Profile文件下载回来，文件名为“csdnGalleryGenerateDebug.p7b”

将文件同样拷贝到CSDNKey文件夹中。
这样CSDNKey文件夹中就有了4个文件。除了.csr文件之外，其他三个待用。
在这里插入图片描述

3.再次回到DevEco Studio，进行手动签名

在DevEco Studio中选择File>Project Structure
在这里插入图片描述
然后按照下图所示将CSDNKey文件夹下的三个待用的文件放入对应的位置

然后，还要注意， Key Alias（别名）和Store password /Key password都要和前面的相同。此处，Key Alias输入前面的“KeyAlias”，Store password /Key password都输入前面的密码“123abc987”。
然后点击Apply和OK按钮。

六、最终在真机上运行端程序

现将华为手机已经与电脑通过USB连接好。将前面第四节中的端侧调用云函数的App运行到华为手机上。在下图中，左侧红框中选择华为手机真机对应的“HUAWEI Mate Pro xxx”,然后点击运行即可。
在这里插入图片描述
手机上App运行界面如下：

点击上图中的“获取云函数数据”中的按钮后，就出现如下视图：

运行成功。