什么是webApp

一. 原生App和WebApp的比較

  1. 原生(Native)App指:

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

    使用HTML5編寫的移動Web應(yīng)用,一個(gè)webapp幾乎可以不加修改的運(yùn)行在PC/Android/iOS等。
    
    優(yōu)勢:一套代碼到處運(yùn)行
    劣勢:某些底層功能缺失,運(yùn)行速度不如原生的App
    

二. 使用eclipse創(chuàng)建安卓應(yīng)用并安裝到手機(jī)

1. 前提

    1)保證“我的電腦”中可以看到我的手機(jī)
    2)在安卓系統(tǒng)-》設(shè)置-》開發(fā)者選項(xiàng)-》啟用USB調(diào)試

2. Android開發(fā)環(huán)境的搭建

    1) 下載并安裝java程序的運(yùn)行環(huán)境-JDK
   
           保證在命令行中輸入java可以運(yùn)行
顯示java版本
    2)下載并解壓縮Android應(yīng)用的開發(fā)環(huán)境-ADT(AndroidDeveloperTools)

    3) 啟動ADT: eclipse/eclipse.exe

    4) 創(chuàng)建Android應(yīng)用程序(創(chuàng)建應(yīng)用時(shí)選擇API19),選擇自定義圖標(biāo),定制窗口中的內(nèi)容,安裝到手機(jī)

3. Android應(yīng)用何設(shè)置一個(gè)全屏顯示的窗口

    修改項(xiàng)目清單文件 AndroidManifest.xml

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

三. 把HTML5應(yīng)用打包到Android手機(jī)中,創(chuàng)建一個(gè)HyBridApp,

 1. 混合app,像原生app一樣有圖標(biāo),點(diǎn)開后呈現(xiàn)一個(gè)原生app的窗口(成為activity);此窗口中只有一個(gè)組件-一個(gè)瀏覽器內(nèi)核(沒有地址欄),可以限定此瀏覽器內(nèi)核只顯示特定的網(wǎng)頁


 2. 創(chuàng)建webView組件-用于顯示網(wǎng)頁內(nèi)容(即瀏覽器的核心)

     //創(chuàng)建瀏覽器核心對象
     WebView wv = new WebView(this);
     //窗體中體檢webview組件
     this.setContentView(wv);

     注意: 只留一個(gè)oncreate方法,其他都刪掉

 3. 使用webView加載APK文件中打包好的本地網(wǎng)頁

      //出于安全考慮,webview默認(rèn)禁用了js,必須要啟用
      wv.getSettings().setJavaScriptEnabled(true);
      

      //加載本地的html文件
      wv.loadUrl("file:///android_asset/hybrid.html");

      所有的HTML/css/js都必須保存Android項(xiàng)目的assets目錄下
     

  4. 使用webview加載web服務(wù)器上的網(wǎng)頁

       //獲取到網(wǎng)絡(luò)使用權(quán)限
       <uses-permission android:name="android.permission.INTERNET"/>
       wv.loadUrl("http:www.baidu.com");

  5. 解決自動跳轉(zhuǎn)到手機(jī)瀏覽器問題

      首先引入WebViewClient框架

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

四. 框架整理

1. jQuery是一個(gè)js函數(shù)庫,簡化了DOM操作,本質(zhì)與DOM相同 

2. jQueryUI是一個(gè)HTML組件庫,豐富了HTML功能

3. BootStrap是一個(gè)HTML/CSS/JS框架,簡化了響應(yīng)式網(wǎng)頁的編寫,提供了CSSReset+HTML組件

4. Google AngularJS是一個(gè)JS框架,改變了網(wǎng)頁的編寫方式,適用于以數(shù)據(jù)操作為主的SPA應(yīng)用

5. jQueryMobile是一個(gè)HTML組件庫,適用于App的開發(fā)

五. 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主要分為四部分:
   
     頁面&導(dǎo)航
     CSS框架
     組件
     表單控件


3 使用JQM的步驟
    
  1) 項(xiàng)目中引入jquery1.8+版本

  2)  項(xiàng)目創(chuàng)建jqm目錄,引入jqm必需資源文件

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

  3)  創(chuàng)建html文件,引入必需的css和js,并設(shè)置viewport

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

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

    注意:  jqm的html文件中,body中必須至少有一個(gè)page,若用戶未提供,jqm自動添加

            body中可以聲明多個(gè)page,但默認(rèn)只有第一個(gè)可以顯示

            jqm中的所有的網(wǎng)頁內(nèi)容不能直接至于body中,必須至于page中

            jqm中的所有樣式都是通過預(yù)定義class來設(shè)置的,開發(fā)者可以指定元素的class,也可以為元素指定data-*擴(kuò)展屬性來實(shí)現(xiàn)讓jqm添加class的功能
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容