首页 > ASP.net教程

【uwp】浅谈China Daily 中划词翻译的实现

2016-12-29 17:00:49

学习uwp开发也有一段时间了,最近上架了一个小应用(China Daily),现在准备将开发中所学到的一些东西拿出来跟大家分享交流一下。

先给出应用的下载链接:China Daily , 感兴趣的童鞋可以看一看。

废话就扯到这里,接下来,我们来看看这个应用中的划词翻译功能是如何实现的(也顺带谈谈点击正文中的图片显示详情)。

 

新闻的主体是放在一个WebView里面的,所以,说白了就是解决WebView的问题(JS通知后台C#以及C#调用JS)。

1.XAML

<WebView x:Name="webView"     NavigationCompleted="webView_NavigationCompleted"     ScriptNotify="webView_ScriptNotify"     />

2.添加对alert的监听

private async void webView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args){  //检测alert  var inject = WebViewUtil.RiseNotification();  await webView.InvokeScriptAsync("eval", new List<string>() { inject });}

public static string RiseNotification(){  string func = @"window.alert = function(arg) {            window.external.notify(arg);          };";  return func;}

3.监听到alert时的处理

private void webView_ScriptNotify(object sender, NotifyEventArgs e){  var data = e.Value.Trim();  if (data.Contains("http://"))  {    // 判断点击的是图片    LoadImage(data);  }  else  {    // 判断点击的是文本    LoadTranslation(data);  }}

此处的data是WebView通过JS方法传递过来的信息。如果点击的是图片,则传递图片的url;如果点击(选中)的是文本,则把文本传递过来。

当然,WebView会这么机智的将我们想要的信息准确的传递过来吗?答案是肯定的,前提是我们要告诉它应该怎么做。

4.交给WebView的锦囊

4.1 明确任务

China Daily 接口没有直接返回完整的html,但它将主要的内容都交到了我们手里,而我们所需要完成的,就是把这些资源给组合起来,再交给WebView。

4.2 前期准备

public static int GetBaseFontSize() => DeviceUtils.IsMobile ? 32 : 14;public static int GetBaseLineHeight() => DeviceUtils.IsMobile ? 64 : 28;/// <summary>/// 内容样式/// </summary>/// <returns></returns>public static string GetContentCSS(){  string commonStyle = "touch-action: pan-y; font-family:'微软雅黑';" + (DeviceUtils.IsMobile ? "padding:2px 19px 2px 19px;" : "text-align:justify; padding:2px 16px 2px 5px;");  string colorstyle = "background-color:#ffffff; color:#000000;" ;  string webStyle = "body{" + commonStyle + colorstyle +           $"font-size:{GetBaseFontSize()}px; line-height:{GetBaseLineHeight()}px" +           "}";  string css = "<style>" + webStyle + "</style>";  return css;}

/// <summary>/// JS方法/// </summary>/// <returns></returns>public static string GetContentJS(){  string js = @"window.lastOriginData = '';                  function mouseUp (param) {           if(param == 'y') return;           if (window.getSelection) {             var str = window.getSelection().toString();             window.lastOriginData = str.trim();             alert(str);           }         };         function getImageUrl(url) {           alert(url);         }         window.onload = function () {           var as = document.getElementsByTagName('a');           for (var i = 0; i < as.length; i++) {             as[i].onclick = function (event) {               window.external.notify(JSON.stringify({ 'type': 'HyperLink', 'content': this.href }));               return false;             }           }         };";  return js;}

GetContentCSS方法只是用于给整段新闻添加一个样式,使布局看起来美观一点,大家不用太在意。

可以关注下的是GetContentJS方法。小小的说明一下,window.onload部分不用太在意;mouseUp部分用于在光标离开的时候,通知后台C#用户所选中的文本;而getImageUrl方法则是用于传递所点击的图片的url。当然,接口给定的内容中一般来说不可能给出img的onclick事件,因此,这个部分也需要我们进行相关处理:

private const string imgStyle = "style='max-width: 100%' onclick='getImageUrl(this.src)'";

/// <summary>/// 处理新闻内容(主要是过滤Style和为图片添加点击事件)/// </summary>/// <param name="content"></param>/// <returns></returns>public static string UpdateContentStyle(string content){  if (string.IsNullOrEmpty(content))    return null;  // 正则匹配img,统一替换它的Style,并添加点击事件(此处该如何匹配还应视具体情况而定)  var matches = Regex.Matches(content, @"<img[\s\S]*?(style='[\s\S]*?')[\s\S]*?/?>");  List<string> list = new List<string>();  if (matches.Count > 0)    list.Add(matches[0].Groups[1].Value);  for (int i = 1; i < matches.Count - 1; i++)  {    if (!list.Contains(matches[i].Groups[1].Value))      list.Add(matches[i].Groups[1].Value);  }  foreach (var item in list)  {    content = content.Replace(item, imgStyle);  }  return content;}

4.3 整合资源

/// <summary>/// 将新闻主体部分拼凑成一段完整的html/// </summary>/// <returns></returns>public string ProcessNewsContent(){  var newsContent = WebViewUtil.UpdateContentStyle(news.Content);  string webContent = "<html><head>" + contentCSS + "<script>" + js + "</script>" + "</head>" + "<body><div onmouseup='mouseUp()'> " + newsContent + "</div>" + "</body></html>";  return webContent;}

简单说明一下,contentCSS就是上方GetContentCSS方法返回的结果,js是GetContentJS方法返回的结果,news则是用于展示的新闻,news.Content则是新闻内容,

它的大概模样如下(截取部分):

<p>  <strong>Today three top economists look at the state of the global economy and give their outlooks for 2017.</strong></p><p>  <img attachmentid=""232694"" src=""http://iosnews.chinadaily.com.cn/newsdata/news/201612/26/432220/picture_232694.jpg"" style='max-width: 100%' /></p>

4.4 交货

webView.NavigateToString(content);

此处的content自然就是我们整合好的资源了(一段字符串)。

5.存在的问题

至此,关键的部分均已实现,让我们按照以上套路运行一番。(假设LoadImage和LoadTranslation方法都只是将JS传递过来的信息直接显示出来)

我们发现,PC上正常运行无压力;而手机上却是另一番光景——选中文本的时候没有任何反应,取消选中的时候反倒是显示信息了。(尚未搞清楚是为何)

因此,我采用了一个纠正措施,如下:

/// <summary>/// 为wp修正文本选中问题/// </summary>public async void ProcessTextSelected4Phone(string text){  if (DeviceUtils.IsMobile)//wp上表现和电脑上不一样...  {    // 判断是否选中文本    DataPackage dataPackage = await webView.CaptureSelectedContentToDataPackageAsync();    if (dataPackage == null)// 表示未选中文本    {      LoadTranslation(null);// 隐藏翻译栏      return;    }    var handleMouseUp = string.IsNullOrEmpty(text) ? false : true;    await webView.InvokeScriptAsync("mouseUp", new[] { handleMouseUp ? "y" : "" });// 若参数为y,则不触发事件  }}

其实质就是在手机端,在正常的mouseUp触发基础上,通过代码主动多触发一次mouseUp,以达到修正目的。

6.Demo

http://files.cnblogs.com/files/lary/Demo.rar

7.参考

【WP8.1】WebView笔记:http://www.cnblogs.com/bomo/p/4320077.html

 

初次写博客,多多包涵

 

花开成景,花落成诗。不问花开几许,只问浅笑安然。(●'◡'●)