有关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

深蓝互联成立于2013年，是一家物联网硬件开发及软件应用服务商，获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年，擅长SaaS 平台开发、APP小程序开发、软硬件结合开发，在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。

 

我们拥有专业优秀的设计和技术团队，以极具创意的 UI 设计、精湛卓越的开发技术，专业的网络策划团队。公司多年来投入打造物联网SaaS平台，集成了公司研发的多款智能物联网终端（智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等）。

 

公司一直坚持以研发为导向，打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务！

 

文章来自深蓝互联http://www.szdbi.com/webxt/323.html转载请注明出处！