Xamainr 地图之webview初探

一 说几点

当下移动开发主要实现方式有传统的Native以及新的混合开发想Rect.js，nodejs这些前段框架，其本质要么是原生控件来实现UI，要么html来实现UI。Xamarin其实也只是取巧而已，目的在于方便net开发者再学习java以及蛋疼的oc和不成熟的swift，好了废话不多说了。

二 xamarin地图实现及其问题

gis作为软件领域基础性存在，比之传统表格列表等图形化展现数据优势。在app中由于国内国外墙原因一般都使用三方api，百度，高德，腾讯之类，其中高德自然是国内做得最专业的在线地图服务商，他们的api都很简单，所要注意一点就是坐标系，因为坐标系的原因常常标注一些地物要素对不上号。像传统老牌arcgis在移动领域其实也只是刷存在感。在xamarin中要开发地图应用自然的不得不使用三方，原因嘛android绑定了谷歌，ios嘛绑定了高德地图api功能又不够强大。怎么办的用高德，百度，腾讯，那么问题来了，xamarin使用三方库，这地方非常蛋疼，原因嘛xamarin其实将原生库元素据提取出来与c#语法映射，什么jar，.a ，.framework用很不成熟的sharpie工具反射，其实在这个过程中千丝万缕的牵涉到原生的oc姿势，不得不说非常蛋疼。即使你能够看懂官方英文，demo各种类型对应，问题还是会不少，不是缺个类就是函数签名对不上号，要么就是即使能is某个类型但as却编译不过。

三 面对问题怎么办？

问题自然是要解决的，随着h5的完善webview不失为更好一种办法，说白了就是把网页嵌入到页面中用c#与js交互，在这里以百度js api为例。

在xamarin.android中由于4.4版本以下浏览器内核存在天生渲染慢加载慢等不足，在xamarin.ios自8.0后增强优化wkwebview控件。

四 需求与实现

1 怎样把地图html页面嵌入到app页面，在这里xamarin为我们提供了很好的demo；

android实现代码

 using System;
 using Android.Net.Http;
 using Android.OS;
 using Android.Webkit;
 using MobileOperation.Droid.Web;
 using MobileOperation.Views;
 using Xamarin.Forms;
 using Xamarin.Forms.Platform.Android;
 using View = Android.Views.View;
 using WebView = Android.Webkit.WebView;

 [assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
 namespace MobileOperation.Droid.Web
 {
     public class HybridWebViewRenderer : ViewRenderer<HybridWebView, Android.Webkit.WebView>, IDownloadListener, View.IOnLongClickListener
     {
         const string JavaScriptFunction = "function invokeCSharpAction(data){jsBridge.invokeAction(data);}";

         protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
         {
             base.OnElementChanged(e);

             if (Control == null)
             {
                 var webView = new Android.Webkit.WebView(Forms.Context);
                 webView.Settings.JavaScriptEnabled = true;
                 webView.SetDownloadListener(this);
                 SetNativeControl(webView);
             }
             if (e.OldElement != null)
             {
                 Control.RemoveJavascriptInterface("jsBridge");
                 var hybridWebView = e.OldElement as HybridWebView;

             }
             if (e.NewElement != null)
             {

                 Control.AddJavascriptInterface(new JSBridge(this), "jsBridge");
                 //Control.LoadUrl(string.Format("file:///android_asset/Web/{0}", Element.Uri));
                 InjectJS(JavaScriptFunction);

                 Control.Settings.JavaScriptEnabled = true;
                 Control.SetWebChromeClient(new GeoWebChromeClient());
                 Control.SetWebViewClient(new MyWebViewClient());
                 Control.SetNetworkAvailable(true);
                 Control.Settings.SetGeolocationEnabled(true);
                 Control.Settings.JavaScriptCanOpenWindowsAutomatically = (true);

                 Control.Settings.SetAppCacheEnabled(true);
                 Control.Settings.AllowFileAccess=(true);
                 Control.Settings.DomStorageEnabled=(true);
                 Control.Settings.SetSupportZoom(false);
                 Control.Settings.SetSupportMultipleWindows(false);
                 Control.Settings.BuiltInZoomControls=(false);
                 Control.Settings.SetRenderPriority(WebSettings.RenderPriority.High);

                 Control.SetOnLongClickListener(this);
                 Control.ClearCache(true);
                 if ((int)Build.VERSION.SdkInt >= )
                 {
                     Control.Settings.LoadsImagesAutomatically=(true);
                 }
                 else
                 {
                     Control.Settings.LoadsImagesAutomatically=(false);
                 }

                 var hybirdWebView = e.NewElement;
                 hybirdWebView.RegisterInvokeJsFunctionAgent((s, action) =>
                 {
                     string jsInvokeStr = string.Format("javascript: {0}", s);

                     // 如果android运行版本高于4.4则调用该版本及其以上所支持的函数
                     if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
                     {
                         Control.EvaluateJavascript(jsInvokeStr, new ValueCallback(Control));
                     }
                     else
                     {
                         // todo 此处调用本身并不支持有返回值
                         Control.LoadUrl(jsInvokeStr);
                     }

                     //res  http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/

                     // todo 目前在android还无法实现有返回值
                     if (action != null)
                     {
                         action(string.Empty);
                     }
                 });
                 //Control.LoadUrl(string.Format("http://map.baidu.com/mobile/webapp/index.html"));
                 Control.LoadUrl(string.Format("http://192.168.50.148/baidu/index.html"));
                 //Control.LoadUrl(string.Format("http://192.168.50.254"));
                 //Control.LoadUrl(string.Format("http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=atm&c=75&searchFlag=bigBox&version=5&exptype=dep&src_from=webapp_all_bigBox&src=0&nb_x=11577553.94&nb_y=3541989.14&center_rank=1/vt=map"));

             }
         }

         void InjectJS(string script)
         {
             if (Control != null)
             {
                 Control.LoadUrl(string.Format("javascript: {0}", script));
             }
         }

         public void OnDownloadStart(string url, string userAgent, string contentDisposition, string mimetype, long contentLength)
         {

         }

         public bool OnLongClick(View v)
         {
             return true;

         }
     }

     public class GeoWebChromeClient : WebChromeClient
     {
         public override void OnGeolocationPermissionsShowPrompt(string origin, GeolocationPermissions.ICallback callback)
         {
             //允许通过权限询问访问
             callback.Invoke(origin, true, false);
         }

     }

     public class MyWebViewClient : WebViewClient
     {
         public override bool ShouldOverrideUrlLoading(WebView view, string url)
         {
             view.LoadUrl(url);
             return true;
         }
         public override void OnPageFinished(WebView view, String url)
         {
             if (!view.Settings.LoadsImagesAutomatically)
             {
                 view.Settings.LoadsImagesAutomatically=(true);
             }
         }

         public override void OnReceivedSslError(WebView view, SslErrorHandler handler, SslError error)
         {
             handler.Proceed();
         }

         public override void OnReceivedError(WebView view, ClientError errorCode, string description, string failingUrl)
         {
             base.OnReceivedError(view, errorCode, description, failingUrl);

         }

     }

     public class ValueCallback : IValueCallback
     {

         private Android.Webkit.WebView webView;

         public ValueCallback(Android.Webkit.WebView wbView)
         {
             webView = wbView;
         }

         public void OnReceiveValue(Java.Lang.Object value)
         {

         }

         public System.IntPtr Handle
         {
             get { return new IntPtr(); }
         }

         public void Dispose()
         {

         }
     }

 }

ios实现代码

 using System;
 using System.IO;
 using Foundation;
 using MobileOperation.iOS.WebCS;
 using MobileOperation.Views;
 using WebKit;
 using Xamarin.Forms;
 using Xamarin.Forms.Platform.iOS;

 [assembly: ExportRenderer(typeof(HybridWebView), typeof(HybridWebViewRenderer))]
 namespace MobileOperation.iOS.WebCS
 {
     public class HybridWebViewRenderer : ViewRenderer<HybridWebView, WKWebView>, IWKScriptMessageHandler
     {
         const string JavaScriptFunction = "function invokeCSharpAction(data){window.webkit.messageHandlers.invokeAction.postMessage(data);}";
         WKUserContentController _userController;

         protected override void OnElementChanged(ElementChangedEventArgs<HybridWebView> e)
         {
             base.OnElementChanged(e);

             if (Control == null)
             {
                 _userController = new WKUserContentController();
                 var script = new WKUserScript(new NSString(JavaScriptFunction), WKUserScriptInjectionTime.AtDocumentEnd, false);
                 _userController.AddUserScript(script);
                 _userController.AddScriptMessageHandler(this, "invokeAction");

                 var config = new WKWebViewConfiguration { UserContentController = _userController };
                 var webView = new WKWebView(Frame, config);
                 SetNativeControl(webView);
             }
             if (e.OldElement != null)
             {
                 _userController.RemoveAllUserScripts();
                 _userController.RemoveScriptMessageHandler("invokeAction");
                 var hybridWebView = e.OldElement as HybridWebView;
             }
             if (e.NewElement != null)
             {
                 string fileName = Path.Combine(NSBundle.MainBundle.BundlePath, string.Format("Web/{0}", Element.Uri));
                 Control.LoadRequest(new NSUrlRequest(new NSUrl(fileName, false)));

                 Control.LoadRequest(new NSUrlRequest(new NSUrl(string.Format("http://192.168.50.148/baidu/index.html"))));
                 var hybirdWebView = e.NewElement;
                 //Control.UIDelegate = new MyWKUIDelegate();
                 hybirdWebView.RegisterInvokeJsFunctionAgent((s,action) =>
                 {
                     string jsInvokeStr = string.Format("javascript: {0}", s);
                     Control.EvaluateJavaScript(jsInvokeStr, (rs, error) =>
                     {
                         if (action!=null)
                             action(rs.ToString());
                     });
                 });

             }
         }

         public void DidReceiveScriptMessage(WKUserContentController userContentController, WKScriptMessage message)
         {
             Element.InvokeAction(message.Body.ToString());
         }
     }

     public class MyWKUIDelegate : WKUIDelegate
     {
         public override void RunJavaScriptAlertPanel(WKWebView webView, string message, WKFrameInfo frame, Action completionHandler)
         {
             base.RunJavaScriptAlertPanel(webView, message, frame, completionHandler);
         }

         public override void RunJavaScriptTextInputPanel(WKWebView webView, string prompt, string defaultText, WKFrameInfo frame,
             Action<string> completionHandler)
         {
             base.RunJavaScriptTextInputPanel(webView, prompt, defaultText, frame, completionHandler);
         }

         public override void RunJavaScriptConfirmPanel(WKWebView webView, string message, WKFrameInfo frame, Action<bool> completionHandler)
         {
             base.RunJavaScriptConfirmPanel(webView, message, frame, completionHandler);
         }
     }

 }

2 c#与js如何交互：

c#调用js  android实现：

由于android api问题在4.4以下只能传参而没有返回值，4.4以上使用相应方法（但是我试过了是没有返回值的，原因未知）

  hybirdWebView.RegisterInvokeJsFunctionAgent((s, action) =>
                 {
                     string jsInvokeStr = string.Format("javascript: {0}", s);

                     // 如果android运行版本高于4.4则调用该版本及其以上所支持的函数
                     if (Build.VERSION.SdkInt >= BuildVersionCodes.Kitkat)
                     {
                         Control.EvaluateJavascript(jsInvokeStr, new ValueCallback(Control));
                     }
                     else
                     {
                         // todo 此处调用本身并不支持有返回值
                         Control.LoadUrl(jsInvokeStr);
                     }

                     //res  http://droidyue.com/blog/2014/09/20/interaction-between-java-and-javascript-in-android/

                     // todo 目前在android还无法实现有返回值
                     if (action != null)
                     {
                         action(string.Empty);
                     }
                 });

IOS实现：亲测ios是有返回值

hybirdWebView.RegisterInvokeJsFunctionAgent((s,action) =>
                {
                    string jsInvokeStr = string.Format("javascript: {0}", s);
                    Control.EvaluateJavaScript(jsInvokeStr, (rs, error) =>
                    {
                        if (action!=null)
                            action(rs.ToString());
                    });
                });

js调用c#在demo里面已经实现了

3 粗线的问题

在2.0版本的百度地图由于其js与移动端双指缩放处理bug当地图添加一些标注后缩放到一定时候地图卡死，解决办法将地图版本降低到1.5版本，对于百度地图嘛自然是无语的，下面请看

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=ak"></script>

链接：http://tieba.baidu.com/p/1724327638

4 定位

在代码里面已经实现自然的需要添加权限，重写webclient控件，由于移动手机的浏览器内核一般都支持h5，所以只需要调用百度地图的定位api即可通过本质上调用浏览器定位api轻松实现定位

链接：http://developer.baidu.com/map/jsdemo.htm#i8_1

5 性能

android webview的性能不咋个好，但是组织好html的渲染过程还是可以接受的

6截图