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

开发要求

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

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

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

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。

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

总结:

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

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