1.环境搭建
(1).登录http://www.369cloud.com/官方网站在文档中心页面，下载369CloudIDE文件包，如下如所示：
在解压后的文件里，双击如图所示，运行IDE（注意：整个程序文件需要放在英文目录下）
2.创建应用
1.应用简介
该应用会演示怎么一步步的开发一个369Cloud应用。369Cloud提供了两种应用的创建方式，方便开发者在IDE和云端中创建应用。同时介绍使用369Cloud应用开发平台的注意事项和IDE等相关知识。
2.IDE中创建应用
（1）369Cloud_IDE_V1.0.8以上版本支持离线开发，在IDE中，文件-->新建-->创建369Cloud工程
输入应用名称369cloud，输入应用说明：
（2）若是离线创建的项目，联网后第一次提交服务器需选择应用同步
若没有登录，此时会提示您登录，若没有369Cloud账号请点击注册账号到369CLoud官网注册。
登录后可将应用同步，上传过程如图所示：
上传工程至云服务器，如下图所示：
3.云端创建应用
（1）用注册好的369Cloud账号，在平台登录，进入控制台页面，创建应用填写应用名称和应用描述，点击确定，项目就创建完成
（2）通过SVN将应用项目检出到本地IDE中
4.应用开发实例
（1）我们提供了核心的css和js前端框架，可与第三方前端框架混用，也可不用我们的框架；css 处理不同平台浏览器的默认样式，js 提供最基础的 JavaScript 方法.
- 页面结构：分为header、content、footer
- onLoad方法:在所有核心功能模块准备完毕时调用，在这里加入自己的业务逻辑
（2）在打开的index.html中引入369Cloud平台内置的css样式表，其样式表一般放在head标签内（可根据实际情况引入相应的样式表）
<link rel="stylesheet" type="text/css" href="../common/css/common.css"/>
<link rel="stylesheet" type="text/css" href="../common/css/box.css"/>
<link rel="stylesheet" type="text/css" href="../common/css/color.css"/>
<link rel="stylesheet" type="text/css" href="../common/css/media.css"/>
<link rel="stylesheet" type="text/css" href="css/new.css"/>
<link rel="stylesheet" type="text/css" href="../common/co/css/co.css" />
369Cloud平台封装的底层js，可在页面底部调用
<script src="../common/co/native.js"></script>
<script src="../common/co/dom.js"></script>
<script src="../common/co/co.js"></script>
(3)页面的header是统一的，将header内容放在一个新页面内
<header class="ui-nav-bar" style="background-color: #5C78FD;">
<div class="ui-nav-bar-inner">
<a class="ui-action-back ui-nav-bar-link" style="color: #ffffff !important;">
<i class="ui-nav-bar-icon ui-nav-bar-left ui-icon-left-nav">
<span class="ui-nav-bar-des"></span>
</i>
</a>
<h1 class="ui-nav-bar-title" style="color: #ffffff !important;">369Cloud</h1>
</div>
</header>
因header内容是统一的，通过引擎window封装的openWindow方法将index_content.html页面内容在header.html页面打开
<script>
var view = app.currentView();
domReady(function(require){
var y = $('.ui-nav-bar').height();
var pop = view.createPopover(0,y,0,0);
pop.open('index_content.html');
});
</script>
（4）内容content部分写在一个新页面
<div class="container box box-ov">
<div class="box-f1 c-wh">
<div class="box box-ov container hei" tabindex="0" style="position: relative">
<div class="box box-ov hei">
<div style="height:13em !important;">
<div id="slider" class="ui-slider">
<div class="ui-slider-group">
<div class="ui-slider-item">
<div class="ui-slider-img banner"></div>
</div>
<div class="ui-slider-item">
<div class="ui-slider-img banner"></div>
</div>
<div class="ui-slider-item">
<div class="ui-slider-img banner"></div>
</div>
<div class="ui-slider-item">
<div class="ui-slider-img banner"></div>
</div>
</div>
</div>
</div>
<div class="box-f1 box box-ov">
<!--第一排-->
<div class="box-f1 box">
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu padd-a">
<div class="box box-ov">
<div class="t-3b">商品分类</div>
<div class="font-1 t-a0 mw6-2">Classification</div>
</div>
<div class="cla bg-img wh1"></div>
</div>
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu1 padd-a">
<div class="box box-ov">
<div class="t-3b">闪购</div>
<div class="font-1 t-a0 mw6-2">Flash purchase</div>
</div>
<div class="fla bg-img wh1"></div>
</div>
</div>
<!--第二排-->
<div class="box-f1 box">
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu1 padd-a">
<div class="box box-ov">
<div class="t-3b">话费充值</div>
<div class="font-1 t-a0 mw6-2">Recharge</div>
</div>
<div class="rec bg-img wh1"></div>
</div>
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu padd-a">
<div class="box box-ov">
<div class="t-3b">特价清仓</div>
<div class="font-1 t-a0 mw6-2">Sale</div>
</div>
<div class="sal bg-img wh1"></div>
</div>
</div>
<!--第三排-->
<div class="box-f1 box">
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu padd-a">
<div class="box box-ov">
<div class="t-3b">猜你喜欢</div>
<div class="font-1 t-a0 mw6-2">Love</div>
</div>
<div class="lov bg-img wh1"></div>
</div>
<div data-target="empty.html" class="data-target box box-f1 box-ac box-pc c-ligBlu1 padd-a">
<div class="box box-ov">
<div class="t-3b">意见反馈</div>
<div class="font-1 t-a0 mw6-2">Opinion</div>
</div>
<div class="opi bg-img wh1"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
content部分的js，其实现的是点击、轮播图、打开新页面的效果
<script>
domReady(function(require){
$('.padd-a').on('touchstart',function(evt){
var tar = $(evt.currentTarget);
tar.addClass('ani');
}).on('longTap touchmove touchcancel touchend',function(evt){
var tar = $(evt.currentTarget);
tar.removeClass('ani');
})
// touch点击事件
require("slider");
$('#slider').slider({
loop:true,
dots:true
})
// 轮播图
var win = app.createWindow();
$('.data-target').button(function(btn,evt){
win.open($(btn).data('target'));
})
//打开新页面
})
</script>
（5）在打开的页面上右击选择预览或者模拟器，实时预览页面效果，如下图所示：
3.应用包结构
（1）应用包结构
“application.xml”和 “component” 必须包含，其它均为可选。“application.xml”是配置文件，component里的“component.xml”中的URL是设置启动页面，“icon”为图标文件目录，“launch”为启动图片目录（更多介绍详见app包结构说明文档）。key.enc文件的管理插件（key.enc文件在打包前会加密，在使用时需调用该对象的函数进行解密）
（2）application.xml 配置文件
- id: 必填，application中的属性，用户需根据自己的应用ID地址（应用id中的数字）更改，由云服务器自动分配。它是该应用的唯一标识。
- version：必填，应用的版本号。
- name：必填，应用名称。
- description：可选，应用简单描述信息。
- orientation：可选，控制屏幕是否旋转。
- entry：必填，应用运行所在的文件夹名称。
- appkey：必填，应用的key值。
- logServer：必填，本地IP，日志输出的配置。
- logPort:必填，日志使用的端口号，默认40050，不建议更改。
（3）component.xml 配置文件
- version：必填，应用的版本号。
- url：必填，启动页名称。
- bgcolor：可选，背景色。
- name：必填，应用所在的文件夹名称。
4.应用打包
1本地打包(真机同步)
（1）通过数据线将手机与电脑连接
（2）当前项目下，右键选择“真机同步”或者使用快捷键（Ctrl+R）进行“真机同步”
真机同步的过程
真机同步后
2.云端打包
（1）将项目提交至云平台，进行编译
（2）在控制台进行编译，可选择iOS、Android 版本。（可扫码安装，在手机上预览效果）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
