NFH.018 - WebApp入门

---

2.27学习经验分享#

Bruce_Zhu于2017.2.27

---

一、使用Eclipse创建安卓应用并安装到手机

1. Android开发环境的搭建

   1） 下载并安装java程序的运行环境-JDK，保证在命令行中输入java.exe可以运行

   2）下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)

   3. 启动ADT: eclipse/eclipse.exe

   4. 创建Android应用程序(创建应用时选择API19)，选择自定义图标，定制窗口中的内容，安装到手机

2. Android应用何设置一个全屏显示的窗口

   修改项目清单文件 AndroidManifest.xml

二、把HTML5应用打包到Android手机中，创建一个HyBridApp

1. 混合app,像原生app一样有图标,点开后呈现一个原生app的窗口(成为activity)；此窗口中只有一个组件-一个浏览器内核(没有地址栏),可以限定此浏览器内核只显示特定的网页

2. 创建webView组件-用于显示网页内容(即浏览器的核心)

    //创建浏览器核心对象
    WebView wv = new WebView(this);
    //窗体中体检webview组件
    this.setContentView(wv);
   

   注意： 只留一个oncreate方法，其他都删掉

3. 使用webView加载APK文件中打包好的本地网页

   //出于安全考虑，webview默认禁用了js,必须要启用
   wv.getSettings().setJavaScriptEnabled(true);
   
   //加载本地的html文件
   wv.loadUrl("file:///android_asset/hybrid.html");
   

   所有的HTML/css/js都必须保存Android项目的assets目录下

4. 使用webview加载web服务器上的网页

   //获取到网络使用权限
    
   

   wv.loadUrl("http:www.baidu.com");

5. 解决自动跳转到手机浏览器问题

   首先引入WebViewClient框架

   wv.setWebViewClient(new WebViewClient(){
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
       view.loadUrl(url);
       return super.shouldOverrideUrlLoading(view, url);
       }
    });
   

三、JQueryMobile

1. jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分为四部分：

   页面&导航
   CSS框架
   组件
   表单控件

3 使用JQM的步骤

1） 项目中引入jquery1.8+版本

2） 项目创建jqm目录，引入jqm必需资源文件

jquery-mobile.css
jquery-mobile.js
images/...

3） 创建html文件，引入必需的css和js,并设置viewport

 
 
注意： jqm的html文件中，body中必须至少有一个page，若用户未提供，jqm自动添加
 
 
body中可以声明多个page,但默认只有第一个可以显示
 
 
jqm中的所有的网页内容不能直接至于body中，必须至于page中
 
 
jqm中的所有样式都是通过预定义class来设置的，开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能