webAPP基礎

weixin_34208283發表於2017-02-27
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.exe可以執行

    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");

四. 框架整理

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的功能

相關文章