VS2015(Xamarin)開發安卓WebApp筆記

有關WebApp的開發，大多數人都用了第三方框架，如Cordova等。我這里沒有用到這類框架，而是新建了一個WebView嵌入Assets(本地資源)來完成這個App，由於第一個練習App希望對初學者有所幫助。

這是一個快遞快速查詢的App，現在添加了幾個比較火的快遞，調用查詢接口來自kuaidi100（有一定概率查詢出錯，估計是屏蔽措施，多查幾次），前端UI采用frozenui(騰訊團隊)，入門快demo齊全

先來效果圖

 

1、權限配置，既然是最快遞查詢，攝像頭權限是必不可少。查詢歷史等最好也要存起來，我這里通過sqlite存到了sd卡。

manifest節點下
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.FLASHLIGHT" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />

 

2、OnCreate初始化

            SetContentView(Resource.Layout.Main);
            webView = (WebView)FindViewById(Resource.Id.webView);
            try
            {
                var dbPath = "/sdcard/zExpress/";
                var dbFileName = "express.db";
　　　　　　　　　 //初始化sqlite本地庫，將來升級加表
                Common.InitDBAndUpdate(dbPath, dbFileName);
                //html通過js訪問后台C#
                webView.AddJavascriptInterface(new WebInterface(this, dbPath, dbFileName, webView) as Java.Lang.Object, "CSharp");
                //避免html
                webView.SetWebViewClient(new CommonWebViewClient());
　　　　　　　　　 //js權限　
                WebSettings settings = webView.Settings;
                settings.JavaScriptEnabled = true;
                settings.JavaScriptCanOpenWindowsAutomatically = true;
                
                webView.LoadData("", "text/html", "utf-8");
                webView.LoadUrl("file:///android_asset/index.html");
            }
            catch (Exception e)
            {
                Common.Log("OnCreate", e.Message + "\n" + e.StackTrace);
            }

 

3、非首頁按返回應該是webview頁面返回，在首頁按兩次返回鍵退出，以下是OnKeyDown代碼

            //webView返回 ，首頁點返回 不做 webView返回處理，應該是退出
            if (e.Action == KeyEventActions.Down && keyCode == Keycode.Back && webView.CanGoBack() && !webView.Url.ToLower().EndsWith("index.html"))
            {
                webView.GoBack();   //后退
                return true;    //已處理
            }

            //再按一次退出程序
            if (keyCode == Keycode.Back && e.Action == KeyEventActions.Down)
            {
                if (!lastBackKeyDownTime.HasValue || DateTime.Now - lastBackKeyDownTime.Value > new TimeSpan(0, 0, 2))
                {
                    Toast.MakeText(this.ApplicationContext, "再按一次退出程序", ToastLength.Short).Show();
                    lastBackKeyDownTime = DateTime.Now;
                }
                else
                {
                    Finish();
                }
                return true;
            }
            return base.OnKeyDown(keyCode, e);

 

4、js插件選取zepto(用法與jQuery一致，而且針對移動端優化)，移動端觸摸tap取代click

會jQuery就能零基礎使用zepto；關於click事件將會有300毫秒延遲，也是一部分人覺得web在移動端響應非常慢的原因之一，這是由於很久以前為了解決兼容pc的click事件與觸摸雙擊沖突出現的。按理說應該用touchstart、touchend結合處理。這里用tap解決了很多問題，你不會發現有延遲。

 

5、為什么打包這么大apk

原本我引用ExfSoft.Json(很小的json插件)、Mono.Data.Sqlite生成只有不到4MB，但是掃碼插件Zxing引入后暴漲到接近10MB

 

6、引用Zxing掃碼生成報錯問題（沒VPN）

剛引入Zxing即使不使用生成都會報錯（本人報的還是亂碼），清理解決方案再生成可以發現提示連接到谷歌下載android_m2repository_r16.zip失敗，並提示本地路徑C:\Users\你的用戶名\AppData\Local\Xamarin\Android.Support.v4\版本號，里面有個0kb的android_m2repository_r16.zip文件，請翻牆下載這個文件粘貼到這里。

 

提示：安裝vs2015會聯網，沒有VPN安裝十分漫長，我這里的webApp只是主要完成了功能，界面切換如果需要動畫還需要優化

編譯后的apk、源碼、android_m2repository_r16.zip，請移步雲盤

鏈接: http://pan.baidu.com/s/1bokyrZh 密碼: weye

 

補充：Zxing、Support.V4  鏈接：http://pan.baidu.com/s/1boapdAv 密碼: 8w3s

 

文采有限，凈貼代碼，敬請諒解