LAYA和TypeScript制作H5入门—

上一篇：
LAYA和TypeScript制作H5入门——准备工作

一般情况下，一个H5是由多个相互关联的ui页面串联组成。遵循的大致逻辑一般是加载页面，开始页面，内容页面和结束页面。这些界面承担了用户交互的重要责任，也决定了H5的视觉效果，是H5非常重要的部分。

接下来我们开始制作H5的页面。
页面制作所需的素材可以在文档下方下载。

第一步：
点击ui编辑模块，进入页面编辑模式。开始编辑。

第二步：
在项目框里右键-新建-页面。
名字我们设置成FirstPage，页面大小设置为640*1038。

第三步：
新建页面成功后，我们可以在项目模块里看到FirstPage.ui。
在资源模块里，我们可以将系统自带的comp文件夹删除，并把我们需要的页面图片资源放到laya的assets文件夹里。

第四步：
制作页面。点击FirstPage.ui，在页面中央我们可以看到黑色的区域。这个区域是我们的页面编辑区域。在laya里，我们可以通过简单的拖拽方式，来制作页面，非常方便，也很直观。多种ui组件也可以帮助我们更好的提升效率。

1，将mainbg.png拖拽到黑色区域。并在属性面板里设置x为0，y为0。作为页面的背景。

2，将whitebuttonbg拖拽到黑色区域的特定位置。

3，在层级面板中新建ui-text组件，作为页面的标题。

4，点击第二个按钮的图片，右键，新建ui—text。这样就给按钮下面添加了一个新的text组件。这个text组件成为了image的子物体。
5，设置按钮文字的属性。使其看起来更美观。
6，继续制作游戏规则按钮。页面效果如下。
7，页面基本元素添加完毕，接下来我们需要给几个页面元素命名。方便我们之后在编写代码时，可以更加轻松地找到这些元素。点击页面任何一个元素，在属性面板里给他们增加名称。

书写名称时应当尽可能符合一个统一的规范，方便后期代码编写，并养成良好的习惯。
8，最终我们的第一个页面的命名如下：
到了这一步，工作已基本完成，但是工作尚未结束。

重要的一步，保存页面并发布。
在完成了页面之后，我们需要点击发布按钮将编辑好的页面发布出去。

在这个步骤中我们经历了如下过程：
第一，页面assets文件夹下的小图片将会被打包，成为atlas文件，存储到bin文件夹下面的res/atlas目录下。（这里的小图指的是长度和宽度均小于512的图片）；
*之所以打包为atlas是为了更小的体积和更高的效率。

第二，页面assets文件夹下的大图片会单独存储在bin文件夹下，生成一个与源文件夹同名的FIRST文件夹。

第三，我们制作的页面会被转化为一个名为layaUI.max.all.ts文件。存储在src文件夹下的ui文件夹里。这个ts文件里包含了我们页面所有元素的大小，位置和布局，命名动画等等信息。

自此我们的第一个页面制作完成。

请注意：
1，各个元素的位置，层级在下方的元素会显示在前面。背景图必须要在第一个位置。否则会遮挡住其他页面元素。
2，除了自己将元素拖拽到页面上，也可以将图片拖拽到层级面板下面。这时元素的坐标为x:0,y:0。
3，相似元素利用复制粘贴可以明显提高效率。

接下来我们需要开始编写代码。使得我们的页面能够显示出来。
LAYA和TypeScript制作H5入门——开始写代码。

LAYA和TypeScript制作H5入门——页面制作相关推荐

8个最好用的H5页面制作工具
8个最好用的H5页面制作工具 1.Page页面制作工具-----------来自M1云端市场部这款工具是梅花网新推出的,针对集客营销的H5页面制作工具.这款工具拥有丰富的模板和插件,能够在较短的时间 ...
Laya和TypeScript制作H5——开始
选择LAYA的原因 1,可以使用typescript来创作,符合之前使用C#的习惯. 2,能够很方便地将一个项目导出到多平台. 3,很方便和直观的ui界面操作流程. 简单介绍一下自己编程时间:3年, ...
h5评论直接显示代码_全套H5教程免费学，让你0基础自学制作H5页面
当前,H5页面已成为各大品牌及新闻媒体普遍采取的表现形式,它可以通过优质的内容.新颖的创意向用户推广产品.传播信息,并利用互联网的快速性,短时间内达到很高的浏览量和识别度.相较于H5而言,海报或视频设 ...
Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...
h5 兑换商品页面模版_H5页面制作工具编辑功能对比：木疙瘩、微吾、云
在微信朋友圈中,我们常常看到各种制作精美的电子邀请函.电子海报.抽奖或是红包等营销活动.这些移动端营销内容画质精良.体验流畅,还支持播放音乐.视频等多媒体素材.那么,这些高大上的内容是怎样制作出来的呢 ...
h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
H5类似易企秀/编辑器/页面制作/开发/生成工具/软件/源码/授权
代码地址如下: http://www.demodashi.com/demo/14960.html 项目简介 H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具 ...
怎么_如何制作h5页面？
近年来,h5突然开始风靡全国,与此同时也涌现出了一批以此为生的h5页面开发商或软件供应商. 尽管如此,还是有许多人喜欢亲自动手开发h5页面.下面,笔者将会从几个方面简单地介绍如何制作h5页面. 完整的 ...
10个H5页面制作工具
目前市面上各种H5页面制作工具,其中既有滥竽充数的,也有真材实料的.但是怎么区分呢?其实最简单的办法就是看案例,也就是用这些H5页面制作工具能做出哪些类型的H5. 笔者在创作H5的路上走过很多坑,基本 ...

LAYA和TypeScript制作H5入门——页面制作

LAYA和TypeScript制作H5入门——页面制作相关推荐

最新文章

热门文章