创建第一个应用

• 1.环境搭建
• 2.创建应用
  • 1.应用简介
  • 2.IDE中创建应用
  • 3.云端创建应用
  • 4.应用开发实例
• 3.应用包结构
• 4.应用打包
  • 1.本地打包(真机同步)
  • 2.云端打包

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 版本。（可扫码安装，在手机上预览效果）