CloudX5-APP制作教程

大雁子

                                                CloudX5-APP制作教程

视频教程

百度云盘：http://pan.baidu.com/s/1bTvmoe

百度传课：http://www.chuanke.com/v5628113-210251-1303041.html

一、注册、登录

首先访问cloudx5 网站（http://cloudx5.com）,没有账户的用户可以先进行注册。

登录时可以使用用户名或者手机号码作为登录名称，输入密码登陆后，就进入了cloudx5的主页面。

二、界面介绍

1.云部署

所有从起步的开发工具上云部署的项目都可以在这儿看到，可以对已经部署的app做一些重启、删除、域名修改、监控查看等简单操作。

2.APP制作

APP制作分为‘我的模板’、‘我的app’、‘我的组件’三个部分。我的模板中是上传的单页模板或应用类模板，在这儿可以进行模板上传，上传的模板会和购买的模板一起在页面中展示出来。针对自己上传的模板还可以进行申请发布，将模板发布到模版大厅赚取收益。申请发布的模板审核状态也会体现在页面上。

在我的app中可以在线开发APP，新建时选择合适的模板，或者在模板大厅购买其他用户发布的模板，组件大厅有其他开发者上传的组件方便开发的过程。

我的组件大部分功能以及操作基本和我的模板差不多，只不过我的组件是对组件的管理。

3.用户中心

对订单、基本信息以及账户的充值、提现的管理。

出售组件和模板的收入可以体现到支付宝账户，但是上传组件和模板的前提是必须注册为认证开发者，所以想要有钱拿，请先注册认证开发者。基本信息有认证的入口，填入支付宝账号等信息点击认证，审核通过就是起步的认证开发者啦。

yeshye

同志们你们先上，等bug都消的差不多了我再上

shui0855

wuxing 发表于 2017-1-23 09:58
详细的说明和操作，建议看视频教程。
视频教程
百度云盘：http://pan.baidu.com/s/1bTvmoe

动手实际操作的时候，是翻阅文档还是看视频比较方便？
个人觉得文档方便些，教程视频中的word文档就可以很方便地用来翻阅/查找，还可以在上面做些标记

大雁子

三、APP在线制作

下面以记账本为案例，介绍一下APP在线制作的基本功能。

多用户记账本ＡＰＰ的思路如下：

首先，需要一个账目列表页面来展示用户输入的所有保存在后台管理的账目列表对象中的账目信息，并且点击每一条账目信息时可以进入账目编辑页对当前的账目进行编辑。其次，要有一个新增账目页来输入要记录的账目信息，并把账目信息保存到后台管理的账目列表数据对象中。最后，希望用户可以自定义账目分类，所以添加一个分类设置页，把用户定义的账目分类保存到后台管理的账目分类数据对象中，让用户在新增和编辑账目时能够选择自己定义的分类。

因为是多用户记账本，所以添加用户组件，在首页调用用户组件的登录功能，并在新增账目和设置分类页面中，在保存数据时给数据对象中创建人ID字段值赋值为当前登录者ID，在账目列表页通过当前登录者的ID对账目列表数据对象的记录进行过滤，在设置分类页、编辑账目页、新增账目页添加账目分类数据对象中创建人ID等于当前登录者ID的过滤条件。

1.新建APP

首先新建一个APP，输入APP名称以及域名，域名不能和其他已经部署的项目重复，点击选择模板后，可以选择合适的APP模板，在模板的基础上进行修改或者新建一个空白模板自己设计开发。

鼠标移到新建好的APP上点击设计，进入APP设计页面。

设计页面分为三个主要部分，组件库、设计窗口、属性列表和组件树。

左侧组件库里面有一些官方提供的常用组件，还可以添加自己上传或者购买的组件。在设计窗口展示组件放置的位置以及效果图，基本上所见即所得。右侧的属性列表能满足对组件的事件、属性、样式的设置。组件树清楚的展示了页面上组件的层次结构。

2.记账本页面

账目列表功能以列表的形式列出账目信息，显示出每笔账目的分类、金额、备注和日期。

  在账目列表页面中，要显示出账目表中的数据，就需要在后台建立一个数据对象来存储账目信息。

  

在前台页面上使用动态数据组件，通过调用后端服务，获取账目表中的数据，用于账目列表的显示。

  在账目列表页面中，一条条账目使用列表的形式展现出来。使用布局组件动态列表实现列表展现，配合滚动视图组件实现上滑加载更多，下拉重新加载数据的功能。在动态列表中使用显示框组件显示账目信息。并添加两个按钮，一个用于新增一个用于删除当前行数据。

3.新增账目

   新增账目页实现新增账目数据功能，把新增的账目存储到账目列表数据中。

因此需要账目列表数据组件。新增时，需要一条空数据。

账目类型和账目分类都是下拉选择的数据，所以需要提供账目类型数据和账目分类数据，用于下拉选择。账目类型分为收入和支出，是静态数据，使用静态数据组件。账目分类则需要使用动态数据组件，通过调用后端服务，获取账目分类表中的数据。所以还需要在后台建立一个账目分类表。
在页面上放上下拉列表组和输入框组合由于数据输入。

大雁子

4.编辑账目

编辑账目时，数据来自账目列表页，所以不需要调用数据组件页面布局和新增账目保持一致。

5.设置分类

账目分类设置页实现新增、修改、删除账目分类的功能。编辑时下拉选择账目类型、输入分类名称。

账目类型是下拉选择的数据，所以需要提供账目类型数据，用于下拉选择。账目类型分为收入和支出，是静态数据，因此使用静态数据组件；账目分类则需要使用动态数据组件，通过调用后端服务，获取账目分类表中的数据。

在账目分类设置页面中，账目分类数据以列表的形式展现出来。使用动态列表组件实现列表展现。在动态列表组件中，使用下拉列表组进行账目类型的下拉选择，使用输入框组件实现账目分类名称的输入。

6.用户登录、用户信息查看、退出

在首页放入不可视组件用户，设置登录成功时显示首页，注销成功时删除账目列表页的数据。

再运行就能看到登陆界面了。

在左侧边栏加入两个按钮，一个显示用户信息，一个用来注销当前登录用户。

7.根据用户过滤

在账目列表给动态数据账目列表添加用户过滤条件；设置分类、新增账目、编辑账目的动态数据账目分类也要添加用户过滤条件。

大雁子

四、apploader
在预览页面可以看到两个二维码，首先扫描第二个二维码下载apploader，安装完成后用apploader中的扫描二维码扫描页面上的第一个二维码跳转到当前的APP，就可以在手机上体验当前APP的效果了。apploader最大的优点是可以体验手机原生插件的能力，比如摇一摇，扫一扫等在浏览器上无法测试的功能，通过apploader打开就能在手机上测试了。


五、打包、部署
在屏幕右上角的发布按钮下，可以看到可以对APP进行打包、部署、发布为模板、下载、访问等操作。
1.打包APP
点击打包APP，进入简便打包流程，只要填上名称、服务地址等信息就可以快速打包了。

这个简洁打包模式是为了方便大家测试，里面虽然内置了证书，但是不能用于发布。所以如果有发布需求建议大家使用高级模式，这样可以自定义包名、版本号等信息，还可以上传自己的证书。
2.部署APP
点击打包APP，勾选要发布的资源和数据表，点击部署就可以了，快速部署就是这么简单。在cloudx5上提供了两个项目的免费部署空间，如果大家对运行速度等有较高要求或者想部署多个项目，建议在主页的环境管理中购买主机，以提高项目运行环境配置。
扫码就可以在浏览器上或下载安装到手机上体验了。

lsqtly@163.com

支持苹果APP上架吗

gnixuw

lsqtly@163.com 发表于 2017-1-18 10:38
支持苹果APP上架吗

可以的。请在打包时选择高级模式，选择苹果开发证书文件并做相应设置。

malixin

这个云制作和stuidio制作的区别在哪里？

sxl

studio是wex5的线下开发工具，云制作可以认为wex5的线上免代码制作工具。

WWG

相比较哪一个功能更强大一点，我觉得线上制作一定有他的局限性吧。