LAYA和TypeScript制作H5入门——基本代码

最新推荐文章于 2024-06-07 09:35:47 发布

小凡4438

最新推荐文章于 2024-06-07 09:35:47 发布

阅读量668

点赞数 2

分类专栏： LAYA H5制作文章标签： laya 入门 H5 Typescript 单例

本文链接：https://blog.csdn.net/qq_40947729/article/details/102526606

版权

本文介绍了使用LAYA、TypeScript进行H5开发的基础步骤，包括初始化Laya、加载资源、创建页面实例及适配屏幕大小。通过创建ResourceLoader.ts和UIManager.ts文件进行资源管理和页面管理，并利用单例模式提高模块间通信效率。最后，通过编译运行在浏览器中查看并调试页面效果。

摘要由CSDN通过智能技术生成

上一篇：
LAYA和TypeScript制作H5入门——页面制作

上一篇里，我们制作了H5的第一个页面。
这一篇开始我们学习如何编写代码，并且让我们的页面显示在浏览器里。

第一步，了解需要做什么。
点开src文件夹下的LayaSample.ts。这个脚本是我们整个项目代码的入口。我们需要首先修改这个文件。
具体要做什么？修改顺序是怎样的？

初始化Laya。调用laya.init方法。
我们需要将页面所需要的资源加载完毕。
创建页面的实例。
将页面显示出来。并且根据屏幕大小做适配。
保存代码，点击编译选项。
运行调试，在浏览器里查看你的页面。

第二步，在src目录下，创建两个文件，分别命名为ResourceLoader.ts（资源加载），UIManager.ts（页面管理）。然后开始依次修改LayaSample.ts，ResourceManager.ts以及UIManager.ts。
项目文件夹
注：在这个项目中，使用了单例模式来管理各个模块，方便各个模块间的相互调用。具体单例模式可以参考：单例模式。

1，LayaSample.ts负责启动整个项目，初始化项目的单例，以及发起加载资源。

// 程序入口
class GameMain{
   
    constructor()
    {
   
        Laya.init(640,1038);                        //初始化项目，并设置舞台大小为640*1038,保持和页面一致

        Laya.stage.scaleMode=Laya.Stage.SCALE_FULL; 
        Laya.stage.screenMode=Laya.Stage.SCREEN_NONE;

        new ResourceLoader();                       //初始化元素加载类单例  
        new UIManager(