hybridApp 混合编程 前端嵌入步骤

hybridApp 混合编程


步骤分析：
①编写前端代码，测试在pc端是否能够达到效果 index.html
②将前端代码拷贝到android工程中的assets目录
③借助原生组件WebView，将前端代码显示在android的视图中


WebView组件:网络视图组件，可以加载前端代码
//实例化WebView的一个对象
WebView wv = new WebView(getApplicationContext());


//使用wv来加载页面

wv.loadUrl("file:///android_asset/index.html");

//如果要想混合编程app能够执行js，必须添加设置：
wv.getSettings().setJavaScriptEnabled(true);

//将wv作为activity的内容视图

setContentView(wv);

设置能够查看console.log所输入的日志：
        wv.setWebChromeClient(
        new WebChromeClient(){
        @Override
        @Deprecated
        public void onConsoleMessage(String message,
        int lineNumber, String sourceID) {
        // TODO Auto-generated method stub
        Log.e("test",
        "行号为:"+lineNumber+
        " 输入内容为:"+message);
        super.onConsoleMessage(message, lineNumber, sourceID);
        }
        });

实现混合编程的两种方式：
1、直接将前端代码 放到assets目录中
2、将前端代码都部署在服务器端，拿到url，载入并显示
基本步骤：
①在pc端完成代码的编辑，能够正常访问和浏览
②将代码部署在服务器端（apache和mySql）
③拿到Url：得到当前机器的ip地址：windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。
172.163.100.78 将之前访问工程的localhost改成ip地址。
http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html
==》
http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html
④配置webView，载入指定的url
⑤添加网络权限，运行看效果。