创建第一个应用


1.环境搭建


(1).登录http://www.369cloud.com/官方网站在文档中心页面,下载369CloudIDE文件包,如下如所示:

image

在解压后的文件里,双击如图所示,运行IDE(注意:整个程序文件需要放在英文目录下)

image

2.创建应用

1.应用简介


该应用会演示怎么一步步的开发一个369Cloud应用。369Cloud提供了两种应用的创建方式,方便开发者在IDE和云端中创建应用。同时介绍使用369Cloud应用开发平台的注意事项和IDE等相关知识。

2.IDE中创建应用


(1)369Cloud_IDE_V1.0.8以上版本支持离线开发,在IDE中,文件-->新建-->创建369Cloud工程

image

输入应用名称369cloud,输入应用说明:

image

(2)若是离线创建的项目,联网后第一次提交服务器需选择应用同步

image

若没有登录,此时会提示您登录,若没有369Cloud账号请点击注册账号到369CLoud官网注册。

image

登录后可将应用同步,上传过程如图所示:

image

上传工程至云服务器,如下图所示:

image

3.云端创建应用


(1)用注册好的369Cloud账号,在平台登录,进入控制台页面,创建应用填写应用名称和应用描述,点击确定,项目就创建完成

image

(2)通过SVN将应用项目检出到本地IDE中

image

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)在打开的页面上右击选择预览或者模拟器,实时预览页面效果,如下图所示:

image

3.应用包结构

(1)应用包结构


image

“application.xml”和 “component” 必须包含,其它均为可选。“application.xml”是配置文件,component里的“component.xml”中的URL是设置启动页面,“icon”为图标文件目录,“launch”为启动图片目录(更多介绍详见app包结构说明文档)。key.enc文件的管理插件(key.enc文件在打包前会加密,在使用时需调用该对象的函数进行解密)

(2)application.xml 配置文件

image

  • id: 必填,application中的属性,用户需根据自己的应用ID地址(应用id中的数字)更改,由云服务器自动分配。它是该应用的唯一标识。
  • version:必填,应用的版本号。
  • name:必填,应用名称。
  • description:可选,应用简单描述信息。
  • orientation:可选,控制屏幕是否旋转。
  • entry:必填,应用运行所在的文件夹名称。
  • appkey:必填,应用的key值。
  • logServer:必填,本地IP,日志输出的配置。
  • logPort:必填,日志使用的端口号,默认40050,不建议更改。

(3)component.xml 配置文件

image

  • version:必填,应用的版本号。
  • url:必填,启动页名称。
  • bgcolor:可选,背景色。
  • name:必填,应用所在的文件夹名称。

4.应用打包

1本地打包(真机同步)


(1)通过数据线将手机与电脑连接

(2)当前项目下,右键选择“真机同步”或者使用快捷键(Ctrl+R)进行“真机同步”

image

真机同步的过程

image

真机同步后

image

2.云端打包

(1)将项目提交至云平台,进行编译

image

(2)在控制台进行编译,可选择iOS、Android 版本。(可扫码安装,在手机上预览效果)

image