带你入门使用AppCube开发H5页面

通过第一阶段：前端基础篇，第二阶段：前端移动开发篇的学习，对前端开发已经有了整体的认识，并且具有前端独立的开发能力，只有通过具体的实例开发才能提高解决问题的能力，提升前端开发能力。本篇主要使用AppCube来开发一个手机端（H5）页面，使用应用魔方 AppCube 平台和编辑器开发还是具有很大的差别，下面就把我使用 AppCube 的开发过程分享给大家。

创建项目

打开AppCube网站：https://www.huaweicloud.com/product/appcube.html

点击“立即使用”，打开会有之前免费的AppCube实例

点击“进入开发环境”，打开进入应用魔方AppCube

这里可以创建项目，也可以打开以前创建开发应用，可以去学习中心学习等功能。

本次示例是开发2个页面，页面之间进行跳转。

点击“轻应用”，创建一个空白应用，如果开发其它东西可以选择类似模板进行开发。

点击“创建空白应用”，输入标签名称：“app_site”,名称会自动填入，分类和描述可以不填。

点击“创建”，进入开发环境

创建页面

左侧菜单栏有模块树，调试，预览，设置等功能，在模块树文件夹列表中，选中“Page”，点击文件夹右侧“+”，选择“标准页面”

打开添加标准页面窗口，输入“标签”名称，点击“名称”文本框会自动填入，点击“添加”，也可选择上方“基于模板”创建页面。

进入页面开发，右上角选择页面呈现端“手机”，组件上方“获取锁”就可以使页面内容处于编辑状态。

左侧基本组件主要有布局，表单，基本，高级四类组件。本次页面开发常用组件如下：

布局

容器（类似于div）

分栏（类似于Layout，进行水平或者垂直划分24等分，可以自行设置比例，使用flex布局）

表单

form里面用的组件，如：输入框，复选框，单选框，下拉框，日期选择框等。

基本

按钮，按钮卡，标签，图标，标题，图片，链接，面包屑等。

高级

选项树，时间轴，走马灯，滚动容器，标签栏等。

开发页面

新建“标准页面”后，在页面区域拖入容器控件进行布局，头部区，内容区，底部区。

头部固定显示，点击“搜索”会显示隐藏搜索栏，使用“自动完成”控件布局搜索框

1.页面区域底部有常用的开发模块，如下：

设计视图，页面的呈现形式，拖拽控件进行布局设计

模型视图，对页面绑定数据的模型对象进行设置

事件视图，增加页面和控件的事件代码

样式代码，对页面和控件进行自定义样式编写

2.右侧区域是对页面控件的属性，事件和库的设置

高级设置-样式源码：是对对应控件的样式进行编写。

高级设置-样式类：是使用“样式代码”里面的自定义类名进行设置，多个css类名使用空格隔开。

3.搜索框样式

.search {
  height: 30px;
  padding-left: 0px;
  background-color: #fff;
  z-index: 999;
}
.search>.icon-16-arrowRight {
  display: none;
}
.search-cancel {
  display: block;
  width: 50px;
  height: 38px;
  line-height: 38px;
  color: #575d6c;
  text-align: center;
  float: right;
  text-decoration: none;
}
.search-cancel:link {text-decoration:none;color: #575d6c;}
.search-cancel:visited {text-decoration:none;color: #575d6c;}
.search-cancel:hover {text-decoration:none;color: #575d6c;} 

4.搜索框模型视图

新建模型-模型名称（search），自定义

新增三个节点：clean，show，cancel

模型名称 search 右侧操作，点击“新增计算节点”，输入字段名称“getShow”,字段值：$var.show，（用来获取show 的值）。

选中页面，选择右侧“事件”，点击下方加号“+”，添加自定义JS代码

页面加载事件，编写代码，设置搜索框是否隐藏初始值为 true

$model.ref("search").setValue("show", true);

选中搜索框容器，属性-数据绑定，右侧加号“+”，属性选择“隐藏”，模型字段选择“getShow”

选中顶部“搜索”，选择“事件”，添加点击事件，增加自定义JS代码

点击事件设置显示或隐藏搜索框脚本

var search = $model.ref("search").getData(); // 获取模型对象
var isShow = search.show;// 获取模型属性show的值
$model.ref("search").setValue("show", !isShow);// 设置修改属性show的值

页面跳转

点击“立即使用”按钮，右侧 属性-基本属性-设置URL类型，页面，链接目标，这样就可以实现链接按钮跳转页面的功能。

配置

点击左侧菜单“模块树”，下方的设置-配置，点击上方Tab标签“导航条”，菜单树添加新的导航页面，拖动菜单名称可调整顺序

点击上方选项卡“布局与颜色”，布局里面选择“手机菜单”，点击“保存”

总结：总体感觉使用AppCube还是方便点，但是如果比较熟悉web开发的还是直接使用编辑器开发页面比较方便。AppCube目前主要是一些常用的控件，使用容器的布局不是非常方便，尤其是页面比较复杂、内容比较多的时候容易放错容器；分栏容器在设置部分属性后并没有改变默认的表现，只有预览显示才正确；模型视图的使用对于数据的绑定使用比较方便，但是对于其它一些功能实现还是不是很方便；自定义样式和原始开发是一样的，符合开发习惯。