sencha touch 和 phonegap结合的第一个应用

最新推荐文章于 2015-03-01 13:01:26 发布

小流星子

最新推荐文章于 2015-03-01 13:01:26 发布

阅读量922

点赞数

分类专栏： phonegap

本文链接：https://blog.csdn.net/xiaoliuxingzi/article/details/25399403

版权

phonegap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注：由于所以的学习过程都是自己摸索的，可能其中有不对的地方，有哪位高手看到后，还望不吝指教呀。

前几天我做了第一个phonegap应用，现在我想结合一下sencha touch 来做一个手机上的应用，这样的效果更佳。

接上篇，我们已经做了一个phonegap的应用。

现在来做一个sencha touch的应用。

步骤参照 http://docs.sencha.com/touch/2.3.1/#!/guide/first_app

1. 下载 sencha cmd 一个命令行的工具。

2. 安装好后，可以试一下，是否安装成功

在终端执行一下下面的命令

sencha

如果返回如下图

おめでとう、你安装成功了。

3. 执行命令创建sencha 应用

进入你要创建sencha 应用的目录，执行下面的语句。

$ sencha -sdk /path/to/touch generate app MyApp .


其中/path/to/touch 是你安装sencha touch 的目录。如下的内容。

其中MyApp 是你要给你的应用起的名字

注意 MyApp 后面有一个 "." 这个的意思是在当前的目录上创建，也可以在其它目录上创建。

4. 执行结束后，会生成出下面这些文件

注意，这里面有一个隐藏的文件夹。

这时候我们可以执行一下 index.html文件，可以在浏览器中看到sencha的应用已经出来了。

因为我需要将sencha 的应用和我之前创建好的phonegap的应用结合到一起，下面我们把这些文件，除了index.html文件都copy到之前的phonegap的应用的iOS平台下www目录下。

如下图

注意，这里有一个地方要改一下

原来的.sencha 这个目录，我们需要给它改个名字，把前面的. 去掉，这样这个文件夹就变成可视的文件夹了。

5 .下面我们来修改一下index.html文件

合并一下，把index.html文件变成下面的情况

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />

        <title>firstSencha</title>
        <style type="text/css">
            /**
            * Example of an initial loading indicator.
            * It is recommended to keep this as minimal as possible to provide instant feedback
            * while other resources are still being loaded for the first time
            */
            html, body {
                height: 100%;
                background-color: #1985D0
            }

            #appLoadingIndicator {
                position: absolute;
                top: 50%;
                margin-top: -15px;
                text-align: center;
                width: 100%;
                height: 30px;
                -webkit-animation-name: appLoadingIndicator;
                -webkit-animation-duration: 0.5s;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-direction: linear;
            }

            #appLoadingIndicator > * {
                background-color: #FFFFFF;
                display: inline-block;
                height: 30px;
                -webkit-border-radius: 15px;
                margin: 0 5px;
                width: 30px;
                opacity: 0.8;
            }

            @-webkit-keyframes appLoadingIndicator{
                0% {
                    opacity: 0.8
                }
                50% {
                    opacity: 0
                }
                100% {
                    opacity: 0.8
                }
            }
        </style>

        <script type="text/javascript" src="phonegap.js"></script>
        <!-- The line below must be kept intact for Sencha Command to build your application -->
        <script id="microloader" type="text/javascript" src="sencha/app/microloader/development.js"></script>

    </head>
    <body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
    </body>
</html>

6. 下面，就可以在XCode中执行一下了。运行结果如下