基于Appcube创建华为云登录界面布局

前提条件

1. 已注册华为云账号，并完成实名认证。
2. 已开通AppCube服务。

整个开发流程

在使用AppCube前，您需要先了解，在AppCube中，创建一个应用的大致开发流程：

1. 在开发环境中，创建应用。
2. 在开发环境中，开发应用。

   包括开发模型、开发逻辑层以及开发前端UI层。开发后，您还可设置应用。

3. 在开发环境中，编译发布应用。

4. 在沙箱或运行环境中，部署运行应用。

这是创建应用到发布的整个流程，这里只是演示简单的开发过程，完成下面页面效果。

准备步骤

1. 使用华为云账号，登录华为云网站，在顶部导航栏右侧单击“控制台”，进入华为云控制台。
2. 在左侧导航栏上方，展开服务列表，选择“应用服务 > 应用魔方 AppCube”，进入AppCube管理控制台。或者点击链接进入appcube主页 https://www.huaweicloud.com/product/appcube.html

   
   

   

     3.在AppCube管理控制台，单击“进入开发环境”。

    4.在AppCube开发环境首页的“项目”页签下，单击“轻应用”卡片。

5.在“轻应用”页面，单击“创建空白轻应用”。

【创建空白】-填写【标签】名字

6.然后进入你创建的轻应用，就是这样的页面

7.此时选中Page右边的+图标，创建一个标准页面

标签和名称都可以自定义

8.进去后就可以拖拽式布局和自定义代码画css样式

9.按照华为云的登陆页面我们得知，布局是由一个标题+两个输入框+一个登录按钮+一个标签构成，这里我们可以直接先拖入容器或者分栏，再在里面放置标题和输入框

10

10.拖入大概布局后，然后就可以修改里面的文字内容了，先把标题改成华为账号登录

11.然后选中输入框，在右边的基本属性中，点击占位符，输入手机号/邮件地址/帐号名/原华为云帐号，下面的也同理

12.整个布局的雏形已经出来了，大概如下面所示，接下来就是优化细节部分

13.将标题选中，对字号进行变大和加粗，这里可以直接选择属性，自动给你生成了代码，你也可以自定义代码

14.给密码的输入框加个眼睛图标，Appcube提供了内置的图标，这里很方便,把位置设置成居右就行

15.最后就是位置摆放问题了，调一下宽度，外边距，内边距就行，绝对写代码更方便的小伙伴，可以选中组件然后选中高级配置-样式代码，输入:root{}进行编辑即可

总结：Appcube总体体验还是很流畅的，偶尔会页面崩溃，建议小伙伴使用的时候，做几步一保存，这样比较好。