鸿蒙next开发实战: SDK实现手游界面

46 篇文章 0 订阅
46 篇文章 0 订阅

 需求背景

随着纯血鸿蒙(不再兼容android包)的发布,对于游戏发行来说,相当于要重新开发一款鸿蒙游戏SDK。这时候就面临以下几个问题。

开发语言:

这边主要是使用arkts 开发 最早的java UI 在现在的next版本已经完全舍弃掉了.

效果图:

界面实现;

目前鸿蒙SDK实现界面开发有两种思路,一种是使用自定义Dialog来完成界面开发。一种则是封装好一个对外View,让研发嵌套进游戏主页面中(本文详细讲解使用自定义的dialog)。

具体实现:

  • 创建一个空的工程

  • 创建一个静态库 选择new moduel

  • 然后选择 static library

具体代码

  • 弹窗布局
@CustomDialog
export struct CustomDialogExample {
  @State username: string = "";
  @State password: string = "";
  // 登录回调
  loginInfo: object = JSON.parse('{}');
  // 弹窗控制器
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })
  @State title: string = '我是登录弹窗';

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
      TextInput({ placeholder: $r('app.string.pelease_put_account') }).onChange((value: string) => {
        this.username = value;
      }).margin({left:20})
      TextInput({ placeholder: $r('app.string.pelease_put_password') }).onChange((value: string) => {
        this.password = value;
      }).margin({left:20})
      Row() {
        Button('登录')
          .onClick(() => {
            this.dialogLogin();
          })
        Button('关闭').onClick(() => {
          this.dialogClose();
        })
      }
    }
  }

登录方法处理


async  dialogLogin() {
   let httpRequest = http.createHttp();
   let url = `http://110.41.41.173:8080/boss/user/validlogin?username=${this.username}&password=${this.password}`;

  await   httpRequestGet(url).then((data)=>{
    console.log("data --- > "+data);
    Logger.error("登录请求回调结果 ---> " +data.toString());
    let  loginmodel:LoginModel=JSON.parse(data.toString());
    this.loginInfo = JSON.parse(data.toString())
    Logger.error("请求结果code -- > "+loginmodel.code);
    let msg:string=loginmodel.msg;
    if(loginmodel.code===200){
          this.controller.close();
          this.LoginCallBack(this.loginInfo);
    }else {
      prompt.showToast({
        message: msg
      })
    }
  });

 }

登录成功和取消登录回调处理

dialogClose() {
  this.controller.close();
  this.CloseCallBack("取消登录");
}

LoginCallBack: (obj: object) => void = (obj: object) => {
}

CloseCallBack: (str: string) => void = (str: string) => {
}

完整dialog 代码

import http from '@ohos.net.http';
import { LoginModel } from '../bean/LoginModel';
import prompt from '@ohos.promptAction';
import Logger from '../utils/Logger';
import { httpRequestGet } from '../utils/OKhttpUtil';


@CustomDialog
export struct CustomDialogExample {
 @State username: string = "";
 @State password: string = "";
 // 登录回调
 loginInfo: object = JSON.parse('{}');
 // 弹窗控制器
 controller: CustomDialogController = new CustomDialogController({
   builder: CustomDialogExample({}),
 })
 @State title: string = '我是登录弹窗';

 build() {
   Column() {
     Text(this.title)
       .fontSize(20)
       .margin({ top: 10, bottom: 10 })
     TextInput({ placeholder: $r('app.string.pelease_put_account') }).onChange((value: string) => {
       this.username = value;
     }).margin({left:20})
     TextInput({ placeholder: $r('app.string.pelease_put_password') }).onChange((value: string) => {
       this.password = value;
     }).margin({left:20})
     Row() {
       Button('登录')
         .onClick(() => {
           this.dialogLogin();
         })
       Button('关闭').onClick(() => {
         this.dialogClose();
       })
     }
   }
 }

async  dialogLogin() {
   let httpRequest = http.createHttp();
   let url = `http://110.41.41.173:8080/boss/user/validlogin?username=${this.username}&password=${this.password}`;

  await   httpRequestGet(url).then((data)=>{
    console.log("data --- > "+data);
    Logger.error("登录请求回调结果 ---> " +data.toString());
    let  loginmodel:LoginModel=JSON.parse(data.toString());
    this.loginInfo = JSON.parse(data.toString())
    Logger.error("请求结果code -- > "+loginmodel.code);
    let msg:string=loginmodel.msg;
    if(loginmodel.code===200){
          this.controller.close();
          this.LoginCallBack(this.loginInfo);
    }else {
      prompt.showToast({
        message: msg
      })
    }
  });

 }
 dialogClose() {
   this.controller.close();
   this.CloseCallBack("取消登录");
 }

 LoginCallBack: (obj: object) => void = (obj: object) => {
 }

 CloseCallBack: (str: string) => void = (str: string) => {
 }

}

调用代码

import { CustomDialogExample } from "@zhihong/testlibrary"
import Logger from '../pages/Logger'

@Entry
@Component
struct Index {
  @State message: string = '登录';

  // 初始化弹窗
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      CloseCallBack: (str) => {
        // 这里是关闭回调函数
      },
      LoginCallBack: (obj) => {
        // 这里是关闭回调函数
       // this.message = JSON.stringify(obj);
        Logger.error("登录回调数据 --- > "+JSON.stringify(obj));
      }
    }),
  })

  build() {
    Row() {
      Column() {
        Button(this.message)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.dialogController.open();
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

调用效果

我们在调用层点击登录按钮调起我们的自定义的弹窗 然后我们输入账号密码登录请求服务器登录成功后我们把服务器返回给我们数据回调给调用层即可。

打包har

选中我们的library 然后选择上面的 build makr module library 即可。

最后总结:

1 鸿蒙截止目前,不支持对App包进行二次重签名,从而无法实现二次重打包。如果SDK有变更,只能重新出Har给研发重新接入,并由研发出游戏包。 2 鸿蒙可以将代码和资源封装成Har,类似于Android的aar文件。研发可将Har文件放入工程,并进行依赖。 3 目前各大头部厂商都加速鸿蒙的原生app 开发我相信游戏行业也会跟进的所以我觉得各位是时候学习一波鸿蒙了。为了方便大家学习 

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?但是又不知道从哪里下手,而且学习时频繁踩坑,最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙(HarmonyOS NEXT)学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取~~

一、鸿蒙(HarmonyOS NEXT)最新学习路线

​​

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)…等技术知识点。

获取以上完整版高清,请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程

​​

三、《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​​

四、大厂面试必问面试题

​​

五、鸿蒙南向开发技术

​​

六、鸿蒙APP开发必备

​​
完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说,对于大家来说ye是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

                        

  • 10
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值