访问远程WebApp

场景描述

公司已有自己的web服务端，主要针对了PC端而做。希望增加一个APP的客户端，以浏览器的方式访问远程服务端页面。不做资源本地化，非js模块化编程。

解决思路

此时ipu客户端主要作为一个手机终端的壳，桥接html页面和手机终端设备。可以考虑将base64.js、expand-mobile.js、jcl.js、mobile-core.js(webview安全注入PluginManager的片断js)、mobile-util.js、wade-mobile.js、zepto.js里面的js接口对象绑定到window上。在使用时，引入这些js文件。

解决方案

1. 继承NetMobileActivity

package com.ai.mobile.display;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import com.wade.mobile.app.MobileAppInfo;
import com.wade.mobile.app.MobileOperation;
import com.wade.mobile.frame.activity.NetMobileActivity;
import com.wade.mobile.frame.net.NetWebView;
import com.wade.mobile.ui.comp.dialog.ConfirmBlockDialog;
import com.wade.mobile.util.Messages;
public class MainActivity extends NetMobileActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        setTheme(R.style.Theme_Sherlock_Light);
        MobileAppInfo appInfo = MobileAppInfo.getInstance(this);
        if(appInfo.isTablet()){
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }else{
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        }
        super.onCreate(savedInstanceState);
    }
    @Override
    public void onBackPressed() {
        getWadeMobileClient().shutdownByConfirm(Messages.CONFIRM_CLOSE);
    }
    @Override
    public void loadingError(final NetWebView webView, final int errorCode,
            final String description, final String failingUrl) {
        MainActivity.this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                try {
                    webView.loadAssetHtml("html/welcome.html");
                } catch (Exception e) {
                    e.printStackTrace();
                }finally{
                    ConfirmBlockDialog dialog = new ConfirmBlockDialog(MainActivity.this, "异常", "资源加载异常，请检查网络与防火墙设置。即将退出应用……" , "确定" , null);
                    dialog.show();
                    if(dialog.getResult() == ConfirmBlockDialog.Result.OK ){
                        MobileOperation.exitApp();
                    }
                }
            }
        });
    }
}

2. 配置mobile-config.xml

主要注意如下两个配置项

<?xml version="1.0" encoding="utf-8"?>
<configs>
    <!-- 非必须， 默认false。是否开启多WebView模式 -->
    <config name="is_mult_webview" value="false"/>
    <!-- 远程服务端地址 -->
    <config name="remote_url" value="http://10.0.2.2:8080/g/html/myindex.html" />
</configs>

总体配置如下：

<?xml version="1.0" encoding="utf-8"?>
<configs>
    <!-- 必须。10.0.2.2为Android模拟器的保留ip地址。访问到本机电脑时使用 -->
    <config name="request_host" value="http://10.0.2.2:8080"/>
    <!-- 请求主机名或请求地址。包括服务器的ip地址和端口 -->
    <!-- <config name="request_host" value="http://192.168.0.143:8080"/>  -->
    <!-- 必须。容器应用名或请求根路径 -->
    <config name="request_path" value="/ipu"/>
    <!-- 必须。数据接口的servlet路径 -->
    <config name="request_servlet" value="/mobiledata"/>
    <!-- 非必须，默认应用名。sd卡上的应用根目录名字,解决应用中文名的问题 -->
    <config name="app_path" value="ipu"/>
    <!-- 非必须，默认UTF-8。 应用需要用到的编码 -->
    <config name="encode" value="UTF-8"/>
    <!-- 非必须， 默认false。是否开启多WebView模式 -->
    <config name="is_mult_webview" value="false"/>
    <!-- 必须。应用license -->
    <config name="license" value="GYk5f-NYLRI2OJTdQUWT8GF7aMoeEsjr7CZL76qTTExBJ0LkITg-MYW8eDdcpQFoKrxvlrYk/SSw1Fqo5tMTDu95u6MXZTjt-8Ek1weBr8TC8ZCt988aKBNSgDXCu0qedYK00qaN52Mpxi4WETT7sANs-zmNlkmCxCVzZfjazsQ=|@@MDBCN0FGQ0U4REYxN0E5QTQ5OTFCMDVDREQ2NTI5ODA1MDEwNjA5RjIzMUQ0NTcwODdDQTFEQzcxNjdEMzM1NTVDNjk4NzYwODZCQkY0QTQxRjJFREZGMUNFMTRFNEUwNEExNThGQjExNEFEMTNCOURBMjJFRjhDNDFEMkU1MjU5MTExMjA4NjJFQTk1QzZBOERFOTdCQzg0MkM5MTQwMjkyOUZENzlDMkQyMzk1OEFBN0E2MkY3QUZBMTc3NzlDMzZDM0IwQjc4MTFBRjM5NjJFQzI5QjMwQzZDQ0JENDE0M0I1RTNBRDNDOUIyN0Q5NkMxMzZBNTlCRjlGNEM4QjY5" ></config>
    <!-- 非必须。进入应用时的欢迎页面 --><!-- file:///android_asset为固定写法，表示工程的asset目录 -->
    <config name="loading_page" value="file:///android_asset/local/welcome.html"/>
    <!-- 非必须。更新应用的url -->
    <config name="update_url" value="setup/ipu-client.apk"/>
    <!-- 推送平台服务地址 -->
    <config name="push_address" value="192.168.100.224"/>
    <!-- 推送平台服务端口 -->
    <config name="push_port" value="23456"/>
    <!-- 非必须，默认false。是否强制更新 -->
    <config name="is_force_update" value="true"/>
    <!-- 非必须，默认2。缓存模式 --><!-- APP_CACHE_MODE -1:LOAD_DEFAULT,0:LOAD_NORMAL,1:LOAD_CACHE_ELSE_NETWORK,2:LOAD_NO_CACHE,3:LOAD_CACHE_ONLY -->
    <config name="cache_mode" value="2"/>
    <!-- *********非模板引擎时使用的配置********* -->
    <!-- 非必须，默认false。页面过渡是否显示loading对话框 -->
    <config name="is_loading_dialog" value="false"/>
    <!-- 非必须。页面过渡的loading图片 -->
    <config name="loading_bg_image" value=""/>
    <!-- 非必须,默认false。页面加载超时是否弹出重试对话框 -->
    <config name="is_overtime_retry" value="false"/>
    <!-- 非必须,默认20000。页面加载的超时时间 -->
    <config name="loadurl_timeout" value="20000"/>
    <!-- 非必须，默认false。打开调试模式，不再比对资源版本，客户端每次下载所有资源-->
    <config name="is_debug" value="false"/> 
    <!-- 安全的进行js对象注入，默认true -->
    <config name="safe_inject" value="true" />
    <!-- 远程服务端地址 -->
    <config name="remote_url" value="http://10.0.2.2:8080/g/html/myindex.html" />
</configs>

3.下载general-web-server

百度云链接: http://pan.baidu.com/s/1nudrFp3 密码: krwd

4.在general-web-server服务端编写测试页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script src="../res/js/mobile-core.js"></script>
        <script src="../res/js/zepto.js"></script>
        <script src="../res/js/base64.js"></script>
        <script src="../res/js/jcl.js"></script>
        <script src="../res/js/wade-mobile.js"></script>
        <script src="../res/js/expand-mobile.js"></script>
        <script src="../biz/js/common/biz-mobile.js"></script>
    </head>
    <body>
        <script type="text/javascript">
            WadeMobile.tip("世界，你好！");
        </script>
        <div style="margin: 0 auto;"><h1>演示</h1></div>
        <br /><br />
        <button style="width:200px;height:100px;" id="openBrowser">打开浏览器(openBrowser)</button>
        <script type="text/javascript">
            var btn = document.getElementById("openBrowser");
            btn.onclick = function(){
                WadeMobile.openBrowser("http://3g.baidu.com");
            }
        </script>
        <br /><br />
        <button style="width:200px;height:100px;" id="getImei">获取手机IMEI号(回调)</button>
        <script type="text/javascript">
            var btn = document.getElementById("getImei");
            btn.onclick = function(){
                WadeMobile.getImei(function(result){
                    alert("手机IMEI号为：" + result);
                });
            }
        </script>
        <br /><br />
        <button style="width: 200px;height: 100px;" id="sendAjaxPost">发送Post请求</button>
        <script type="text/javascript">
            var btn = document.getElementById("sendAjaxPost");
            btn.onclick = function(){
                //创建XMLHttpRequest对象
                xhr = new XMLHttpRequest();
                //注册回调函数
                xhr.onreadystatechange=callback;
                //第一个参数设置成post，第二个写url地址，第三个为是否采用异步方式
                xhr.open("POST","../data",true);
                //post请求需要自己设置请求头
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //post请求
                xhr.send("name=lisi");
            }
            function callback(){
                //接收响应数据
                //判断对象状态是否交互完成，如果为4则交互完成
                if(xhr.readyState == 4){
                    //判断对象状态是否交互成功，如果成功则为200
                    if(xhr.status == 200){
                        //接收数据，得到服务器输出的纯属文本数据
                        var response = xhr.responseText;
                        alert("返回的数据为：" + response);
                    }
                }
            }
        </script>
        <br /><br />
        <button style="width:200px;height:100px;" id="hrefBaidu">跳转到百度(href)</button>
        <script type="text/javascript">
            var btn = document.getElementById("hrefBaidu");
            btn.onclick = function(){
                window.location.href="http://3g.baidu.com";
            }
        </script>
    </body>
</html>