來越多的開發者熱衷于使用html5+JavaScript開發移動Web App。不過，HTML5 Web APP的出現能否在未來取代移動應用，就目前來說，還是個未知數。那么，有什么辦法，既可以使用HTMl5開發應 用，又可以將其簡單封裝成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);

2.調用WebView的loadUrl()方法，設置WevView要顯示的網頁：

? 互聯網用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.調用Activity的setContentView( )方法來顯示網頁視圖

4.用WebView點鏈接看了很多頁以后為了讓WebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統回退剪鍵，整個瀏覽器會調用finish()而結束自身，而不是回退到上一頁面

5.需要在AndroidManifest.xml文件中添加權限，否則會出現Web page not available錯誤。

? <uses-permission android:name="android.permission.INTERNET" />

缺點：如果是載入的是普通網頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5

下面是具體例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //實例化WebView對象 ?

??????????? webview = new WebView(this); ?

??????????? //設置WebView屬性，能夠執行Javascript腳本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加載需要顯示的網頁 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //設置Web視圖 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //設置回退 ?

??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加權限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

??????????????? <intent-filter>

??????????????????? <action android:name="android.intent.action.MAIN" />

??????????????????? <category android:name="android.intent.category.LAUNCHER" />

??????????????? </intent-filter>

??????????? </activity>

??????? </application>

??????? <uses-permission android:name="android.permission.INTERNET"/>

??? </manifest>

二、使用PhoneGap

??? PhoneGap是一個用基于HTML，CSS和JavaScript的，創建移動跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

詳細方法請見：http://phonegap.com/start#android

優點：在Eclipse中加入SDK，編程自由，完美適應不同設備屏幕大小，適合高手使用。

缺點：沒有使用布局，直接加載網頁，不能添加廣告。

----------------

切圖網（qietu.com）最早將psd轉html服務模式帶到國內，并首個提供響應式、webapp前端開發的公司。專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）

速入門uni-app，把想看的網站變APP。

下載hbuildx，這里官方提供了幾種安裝包，有完全版，還有beta版，還有標準版，隨便下一個吧，或者直接下載標準版的，因為它最小。

1.創建uni-app，直接選擇uni-app 默認模版（hello-app項目可以拿來看看，不建議開發時使用，wap2app是針對wap轉app端的，5+app 使用htmlplus，uni-app對html5+ 進行了整合，并建議直接使用uni-app即可，小程序那就是小程序咯，讓我們心大一點，練習多端吧）

關于目錄結構，可以在開放規范中看到或者直接創建一個heoll 模版項目看看，各個文件夾之間的關系和作用都比較明確，對于uni-app的配置文件需要仔細看看。

2.配置

manifest.json 這個文件在移動應用中屢見不鮮，在uni-app也有關這個文件的解釋https://developer.mozilla.org/zh-CN/docs/Web/Manifest

文件是應用的配置文件，用于指定應用的名稱、圖標、權限等。個人覺得就是映射，在不同的環境下具體的左右略有不同，比如webpack 中是指向原始文件的映射關系等。

uni-app 中有一些自定義屬性比如appid，是用來標識云端編譯用的。https://ask.dcloud.net.cn/article/35907

在ide中打開這個文件，會有一個新的視圖，是中文的，如果你要詳細了解關系，可以到文件目錄下打開這個文件查看或者直接點擊最下方的源碼視圖進行查看。另外有一些配置可能找不到，但是在源碼視圖中可以找到，還有一些配置，默認項目是沒有的，比如超時時間的設置。

啟動圖：配置.9 圖片制作流程 https://ask.dcloud.net.cn/article/35527

打開下載工具 draw9patch.bat（這里我沒有打開，處理文件報錯，不去深究了，看第二種方法，通過as，打開as）

新建一個as項目，找一個png圖片丟到as中，右鍵創建.9 圖片

打開這個文件，點擊鼠標坐標在邊上即可調整拉伸區域與內容區域，類似下面這種，關于四個邊的概念大家去看下文檔，類似下面這種內容居中的圖片（一般都是這樣），拉伸的時候左右兩側和上下兩側拉伸空白，在操作的時候需要先control選擇拉伸區域，然后再shift 去掉一部分的拉伸器區域~

像這樣搞定后就行了，然后根據uni-app的規定指定圖片大小上傳。

另外：此用法只適用與android，ios就一個個上傳吧。

查看json源碼，其中有一項為第三方sdk，配置后可使用第三方sdk的集成，一些常用的第三方sdk已集成，比如授權登錄、分享、支付等。

更多的配置自行看吧，再此不表。

第二個配置文件 pages.json 看名字就看的出來是配置頁面用的

關于pages，新增的頁面需要追到到page文件中，定義全局樣式后，每個page可以單獨的配置其style。

另外在pages目錄下新增頁面的時候，配置文件中會自動追加和刪除相關page。

其中關于導航欄，官方建議使用原生又uni-app提供的原生導航，如果自定義導航，可能會有很多問題，https://ask.dcloud.net.cn/article/34921

尤其是前端導航與下拉刷新之間的沖突。

關于subNVue，這里解釋一下nvue，剛開始看的時候我也有點懵，啥意思，vue提供的新擴展嗎？并不是，nvue 是與native.js 結合的一種組件規范，它可以直接調用原生代碼中的api，官方建議是只是在有特定需求的地方使用nvue，

而這里提到的subNVue 指的是通過nvue 創建的一種子窗口組件，它使用的是原生渲染的方式，通過窗口進行的實現，在做一些浮動的時候，比如遮罩蒙板，視頻彈幕這種的時候用得上。

所以使用nvue的時候想要調試必須在終端環境，模擬器或者微信工具。如果運行之前應該有記錄，這里不表。

多頁面通訊：有兩種，官方推薦新的方式，注冊監聽

uni.$on('page-popup', (data) => { 
 vm.title = data.title; 
 vm.content = data.content; 
}) 
uni.$emit('page-popup', { 
 title: '我是一個title', 
 content: '我試data content'
}); 
另，官方提供了一些建議：所以不要濫用它為好

還有就是關于subNVue的style 并不是我們平時理解的所有樣式表，它自有規則，具體請看官網，其中有幾個重要的屬性，比如type、position、dock。

conditon：

指定頁面，也就說不要不用每次啟動都要重新點一遍來看，只需要指定我們當前調試的頁面即可，這個配置只在開發時候生效，正式編譯打包后不起作用。

"condition":{ "current":0, "list":[ { "name":"me", "path":"pages/me/me", "query":"" } ] }

分包：這里是針對小程序的，因為小程序對包的大小有限制，所以在上傳小程序的時候需要對包進行管理，小程序允許分包的存在。

另外在配置這個文檔中還有package.json ，vue-config.json , uni.scss 的介紹

package.json ：因為uni-app 是基于vue的，在編譯時又是依賴與node的，所以可以添加打包文件，若是通過cli創建的項目，必須自己進行配置，對于通過ide創建的項目，則看需求。

vue.config.js 類似webpack它們都有配置文件或直接通過cli進行打包或編譯。其中有一些uni-app不支持，知曉即可。

對于內置的scss，可以進行應用與修改，其中的變量通過在style標簽中指定lang 即可進行引用。

另外日志什么的，有的集中類型不多說了，在HBuilder里可以使用代碼塊，可以快速補全。

生命周期：

這個標題標紅，個人認為生命周期對于一個框架來說非常的重要。

1.應用生命周期：最后一個監聽，比如之前說的nvue和vue之間交互就用它。

應用生命周期監聽一般都在APP.VUE 中進行注冊監聽，作為app的主入口。

應用啟動會，監聽的回調執行相關邏輯。

h5 打印效果如下：

2.頁面監聽函數

相比應用監聽函數，頁面監聽函數使用的是最多的，uni-app 提供了很多內置鉤子，不截圖了，比較多。

這里的onLoad 和onShow 給我感覺特別好，相比apicloud 每次新的頁面打開，除非設置強制刷新，否則會進行緩存，要么每次打開的時候發送消息事件，一個入口還好，

如果多個入口，會特別痛苦，除非自己再定義一個工具類什么，而uni-app的這2個鉤子，可以說完美的避開了這些瑣事，再次顯示的時候，我們可以做一些其他事情了。

另外對于小程序中的一些固定導航按鈕，同樣有他們的鉤子

并且，頁面滾動不要自己再去監聽dom什么的了，直接提供了鉤子，方便多了。

還有，對于原生搜索框，也就是之前提到的searchInput 也提供了回調

關于nvue的聲明周期：基本上與vue保持一致性。

關于各個頁面之間通訊：

使用uni-app 提供的事件自定義監聽機制可以對其進行監聽。（因為是uni所以只能是終端測試）。

全局監聽提供了4個函數：

uni.$emit(eventName,OBJECT)uni.$on(eventName,callback)uni.$once(eventName,callback)uni.$off([eventName, callback])// 基本上vue、jqeruy 還有一些第三方庫都有類似的函數