玩轉cordova之二--增強的webview

寫在前面

前文說到。全APP用JS是很浪費的玩法。大多數時候。我不想要一個框架。二隻想要一個增強的webview。 怎麼辦？cordova也提到了這種玩法: http://cordova.apache.org/docs/en/4.0.0/guide_hybrid_webviews_index.md.html
http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_webview.md.html http://cordova.apache.org/docs/en/4.0.0/guide_platforms_android_webview.md.html
順便推薦一個開發文件聚合http://devdocs.io/

但是寫ios的同學太囉嗦了。光配置就寫了21條步驟。我試了一下，大部分是預設值。所以常規情況下不需要啦。我重新整理下步驟：

1. 建立工程
2. 在工程目錄下執行pod init, 會生成Podfile.
3. 編輯檔案加入：pod 'Cordova', '~> 3.6'
4. 執行 pod install --no-repo-update
5. 開啟生成的.xcworkspace檔案
6. 把前文中工程目錄下的www目錄拷貝到工程目錄下，拖入專案中,注意選擇：作為引用 “create folder references”，拖入後資料夾是藍色的。
7. 把前文中工程目錄下的config.xml和自己寫的外掛檔案拖入新工程。這回選擇作為拷貝，不要引用。
8. 從StroryBoard裡拖一個ViewController出來。給它建立對應的類檔案。繼承自CDVViewController
9. 試執行一下。已經OK了。

下面搞一下Android

1. 建立你的工程
2. 在前文的android工程目錄下的CordovaLib裡執行gradle,會再outputs裡生成CordovaLib-debug.aar 如果你是gradle管理的工程就可以用了。但我用得Intellij+老版工程結構。所以跳到下一步。
3. 把CordovaLib目錄拷貝到工程目錄裡。作為module引入。然後設定CordovaLib是一個lib模組，設定主工程對CordovaLib工程的引用。
4. 拷貝上文的config.xml到res/xml/,拷貝上文的外掛檔案Echo.java到當前工程，拷貝上文的www到當前工程assets/
5. 修改config.xml中外掛的包名為新的包名。

6. 修改main.xml

   <org.apache.cordova.CordovaWebView
   android:id="@+id/tutorialView"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
   

7. 修改Activity extends CordovaActivity

   public class MyActivity  extends CordovaActivity {
       CordovaWebView cwv;
       /**
        * Called when the activity is first created.
        */
       @Override
       public void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           super.init();
           if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
               this.appView.setWebContentsDebuggingEnabled(true);
           }
           // Set by <content src="index.html" /> in config.xml
           loadUrl(launchUrl);
       }
   }
   

8. 可以跑起來了

原始碼放在：https://bitbucket.org/fangj/cordova_webview