将Summer工程发布成webapp

将Summer工程发布成webapp

webapp介绍

iuap mobile开发平台默认开发的是混合应用。同时也支持将工程发布成webApp。
什么是webapp？就是将移动项目中的html，js，css、图片等代码资源部署在服务器端，通过studio编译打包成一个app进行访问这些页面资源，而app本身内部是没有任何Html、js、css等资源，这种应用称之为webApp。
通过iuap mobile开发的webApp可以像混合应用一样调用各种原生服务API。一般传统意义上的webapp都是基于系统（ios 或 Android）浏览器访问，这种方式是不支持直接调用原生服务的。

webapp的优势

最大的好处就是更新app无需升级安装客户端。有新版本时，只需更新服务器端的web页面即可，客户端APP访问就同访问一般网站议一样。

如何发布webApp

以Tomcat为例，将一个开发完毕的iuaomobile项目发布成webApp需要如下步骤：

第一步、搭建Web服务器

搭建Tomcat服务器（略）
这个你必须要会，如果不会，搭个apache也可以啊

第二部、获取部署代码

(1) 获取webApp项目源文件

可以直接实用开发工具中的Summer项目源代码，去除native目录和配置文件config.xml

(2) 获取summerApi的服务文件

这里需要分别获取android和ios的对于cordova服务组件，用于处理基本summerApi调用，如openWin，openFrame等，
注意：这里根据用户构建壳app(即打开这个webApp的应用)的方式的不同，获取代码的方式也有不同
第一种：
用户壳app使用新云端构建的（官网最新版本开发工具sr6）
这种需要登录构建管理后台，下载用户构建的app的原生工程(下载原生工程操作，参考文档-应用发布-云构建账号-构建日志管理)，然后在原生工程中获取服务文件，如下图操作
android：

ios：

第二种：其他的版本构建壳app
可以直接在开发工具中的summer项目下的native目录下找ios和android目录下的www目录中的plugins,cordova.js和cordova_plugins.js复制到相应的ios和android文件夹下，如图。

(3) 制作完整webApp

将获取的文件分别以如下目录放好

(4) 发布webApp

以tomcat为例
第一种：webApp在根目录
以前三步制作的test目录为例，项目目录test放在webapps目录下，相对路径为webapps/test ，这种直接部署就可使用
第二种：webApp不在根目录
以前三步制作的test目录为例，这种需要修改html源码，在引入summer.js前，需要设置cordova的路径，设置的变量名为window.__$_CORDOVA_PATH
设置方法为script声明

<script>
window.__$_CORDOVA_PATH = "****"
</script>

如test目录在webapps下的uapmobile中，即相对路径为webapps/uapmobile/test,这里需要在源码html引入如下代码：
样例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/font-icons.css">
        <link rel="stylesheet" href="css/iuapmobile.um.css">
        <script>
            window.__$_CORDOVA_PATH ="http://123.103.9.206:7100/uapmobile/test/"
        </script>
        <script src="js/summer.js" ></script>
        <script src="js/jquery.min.js" ></script>
        <script src="js/Frameworks/iuapmobile.frameworks.ui.js" ></script>
        <script src="js/index.js" ></script>
    </head>
    <body>
    ...
    </body>
    </html>

第三步、通过开发工具构建壳App

只需要更改项目中的config.xml中的启动页，如图红线位置是实际的包含域名的首页地址。

说明：实际上打包后的app可以不包含任何html等，因为所有访问的html都请求自服务器端的。

样例App（新云端打包）

可以参考我们的样例webApp（新云端打包summer应用，首页修改为：http://123.103.9.206:7100/test/login.html
即可）
webApp源码下载：
http://mobile.yyuap.com/dongzhk/test.zip

文档更新时间: 2018-06-06 13:54