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

运气男孩 发表于 2021/07/18 17:12:17 2021/07/18
【摘要】 前提条件已注册华为云账号,并完成实名认证。已开通AppCube服务。整个开发流程在使用AppCube前,您需要先了解,在AppCube中,创建一个应用的大致开发流程:在开发环境中,创建应用。在开发环境中,开发应用。包括开发模型、开发逻辑层以及开发前端UI层。开发后,您还可设置应用。在开发环境中,编译发布应用。在沙箱或运行环境中,部署运行应用。这是创建应用到发布的整个流程,这里只是演示简单的开...

前提条件

  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总体体验还是很流畅的,偶尔会页面崩溃,建议小伙伴使用的时候,做几步一保存,这样比较好。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。