什么是webApp

一. 原生App和WebApp的比较

  1. 原生(Native)App指:

    iOS: Object-C 或者 swift
    Android: java
    
  2. webApp指

    使用HTML5编写的移动Web应用,一个webapp几乎可以不加修改的运行在PC/Android/iOS等。
    
    优势:一套代码到处运行
    劣势:某些底层功能缺失,运行速度不如原生的App
    

二. 使用eclipse创建安卓应用并安装到手机

1. 前提

    1)保证“我的电脑”中可以看到我的手机
    2)在安卓系统-》设置-》开发者选项-》启用USB调试

2. Android开发环境的搭建

    1) 下载并安装java程序的运行环境-JDK
   
           保证在命令行中输入java可以运行
显示java版本
    2)下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)

    3) 启动ADT: eclipse/eclipse.exe

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

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

    修改项目清单文件 AndroidManifest.xml

      <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">

三. 把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服务器上的网页

       //获取到网络使用权限
       <uses-permission android:name="android.permission.INTERNET"/>
       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);
        }
        });

四. 框架整理

1. jQuery是一个js函数库,简化了DOM操作,本质与DOM相同 

2. jQueryUI是一个HTML组件库,丰富了HTML功能

3. BootStrap是一个HTML/CSS/JS框架,简化了响应式网页的编写,提供了CSSReset+HTML组件

4. Google AngularJS是一个JS框架,改变了网页的编写方式,适用于以数据操作为主的SPA应用

5. jQueryMobile是一个HTML组件库,适用于App的开发

五. 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

         <meta name="viewport" content="width=device-width,initial-scale=1>

  4) body中data-role="page"元素

    注意:  jqm的html文件中,body中必须至少有一个page,若用户未提供,jqm自动添加

            body中可以声明多个page,但默认只有第一个可以显示

            jqm中的所有的网页内容不能直接至于body中,必须至于page中

            jqm中的所有样式都是通过预定义class来设置的,开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 166,753评论 24 703
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 14,114评论 2 43
  • [前端技术] Seven原创 原生App也叫NativeApp,是指运行在iOS或者Android系统上的应用程序...
    CoverUER阅读 3,350评论 2 6
  • 从《奇葩说》、《超级演说家》到《职来职往》、《朗读者》,TED,这些将语言魅力展现到极致的节目,让我们似乎又开始重...
    晓籁1997阅读 847评论 0 2
  • 昨晚夜校發現自己一到要監視自己的核心資源時候,就不願意去看自己。其實不願意去承認自己好的地方,就是還不願意改,還不...
    Lucie陸陸阅读 125评论 0 0
  • 上一章 博院长一去世,传言就开始悄悄的流散。 据说,博院长这两年引进的学科带头人因为未纳入编制解决不了身份的问题,...
    箫雪1阅读 114评论 1 3