基于AppCube开发其官网的移动端页面【玩转应用魔方】

举报
运气男孩 发表于 2021/10/27 00:06:14 2021/10/27
【摘要】 AppCube丰富的组件库,组件、卡片、页面分层组装模式,多终端适配,页面构建简单高效,很不错的平台!

开发要求

1、AppCube应用魔方是华为云推出的低代码开发平台,适用它可以有助于我们更加方便快捷的完成页面的开发,AppCube的访问地址为:https://www.huaweicloud.com/product/appcube.html

2、在进入AppCube之后点击免费试用,就可体验低代码甚至是无代码开发的乐趣。

3、需要完成的AppCube官网的H5页面有2个,这是手机端的真实预览图,见下图:

f.png

1.png

4、在AppCube平台中创建轻应用项目,按照设计图完成这两个AppCube官网的H5页面。
5、在页面交互上,要求点击第一个页面中的“立即使用”按钮跳转到第二个页面,点击第二个页面中的“立即使用”按钮跳转到第一个页面。

个人思路:

1.从上面的的效果可以得出两个页面是由标题+按钮+图片+标签+文字组成,布局相对简单。
2.在页面里放置容器+分栏,然后挨个把页面的元素添加进容器,容器可以先给个相对定位固定,然后慢慢调整细节部分,例如文字大小,文字颜色,组件位置,按钮圆角,背景颜色等等。图标是在预置库里面找,有安卓和iOS的常用图标,很方便。
3.事件的跳转很简单,添加一个点击事件,选择跳转到第二个页面。在当前窗口打开就行。
4.难点在于组件与容器之间的嵌套以及组件相对位置的摆放

准备背景

首页先打开下面官方地址

https://www.huaweicloud.com/product/appcube.html

然后鼠标右键选中背景 选择检查源代码

然后在右边的image的url可以看到背景的链接:https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/appcube/eee.png

然后开始正式进入开发,返回官网,点立即使用,然后点进入开发环境

然后点击轻应用, 选择创建空白轻应用,再任意命名一下即可简单创建一个应用

然后点击page的+号,创建两个标准页面,用来开发h5页面

选择右边的手机,切换为h5开发页面

然后简单的拖入两个容器,呈现上下结构,第一个容器先拖入一个标题:应用魔方AppCube,标题下面的样式代码

:root{
text-align:center;
font-size:15px;
font-weight:bold;
line-height:35px;
}

左边的图标可以通过内置图标库或其他厂商的图标(如阿里图标库...)进行上传,然后通过相对的定位来进行位置的调动,这是h5基础,就不详细阐述了。

接下来需要实现这个效果,由图可见,有一张背景+两个按钮+标题+标签组成,背景上面我已经教给大家如何获取地址了
这里我们直接从左边的组件库拖入一个图片组件,在右边的属性里找到图片地址,直接输入我们获取到的image的链接:https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/appcube/eee.png


可以清晰的看到图片的宽高比不对劲,于是我们展开属性,找到图片宽高,输入375.2 和150,就变得漂亮起来了


在向其中添加标题,添加两个按钮和一段文字即可,同样也可以用相对定位,第二个按钮的背景就要勾选一下无背景风格

因为要求点击第一个立即使用的按钮会跳转第二个h5页面,所以这里我们还要添加一个点击事件。选择事件---+号,选择点击事件

然后选择当前应用页面,选择创建的第二个页面,当前窗口打开,点保存即可。

下面的部分拖入一个标题,再拖入一个容器,给他设置宽高,换背景颜色,再将三段文字+图标排版、定位即可。

第一个页面就差不多完成了,可以看看效果。

第二个页面:

上半部分相信大家也熟悉了、理解了,这里的思路是:拖入标题,进行居中,图标定位,再拖入一个容器给他背景色换为#F7F8FB;然后一顿root样式代码操作,就变成了这个样子,菜单的图标可以 直接在预置图标搜索list找到。

下半部分给大家看一下效果图,就知道怎么做了,咋一看:需要设置一个矩形容器,然后给他背景色#7B90E0,需要标题,需要文本,然后两个按钮,插入一个图片搞定。这么简单吗?没错就是这么简单,这也是AppCube的方便强大之处。先将整个矩形容器的宽高设置好,然后定位。再向其中添加子组件,相对容器定位,再将细节优化即可。

最后的最后,还需要添加一个点击事件,跟页面一的相同,点击即可返回页面1。

然后最后实现的跳转页面效果如下:

页面跳转点击事件.gif


总结:

这次的开发h5到这里结束了,相信大家对AppCube也有了一个全新的认识,丰富的组件库,组件、卡片、页面分层组装模式,多终端适配,页面构建简单高效,确实能帮助我们快速构建应用以及网页,低代码实现我们想要的效果。

【玩转应用魔方】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/306271

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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