PhoneGap Plugin与Wind.js结合,实现异步通信

      最近在做一个的ios的App。项目选择了PhoneGap的移动跨平台框架。数据部分因为是某一小说网站的数据,通过ajax的跨域无法直接获取,所以考虑Hybrid模式,把这一部分放在原生那里去处理,然后通过Plugin来与页面JavaScript通信。到这里问题出来了:在PhoneGap中,Plugin不是异步通信的。在执行通信模块的时候,页面是不能动的,会出现假死的现象,页面的loading也无法动。

      查了很久的资源,发现:PhoneGap的javascript脚本与原生(iOS,android,wp等)的API的plugin交互,采用与浏览器webkit中的webview进行通信,而它的底层原理就是iframe的交互,它是以一种特定规范的通信协议来展开,而在传统的web上iframe的使用本身就是最原始的异步加载原理的使用。所以,没有办法异步方式在phonegap的开发中广泛使用。

      后来找到了老赵的Wind.js框架。通过简单的代码修改后。终于把问题解决了。下面是相关的内容与解决的方法。

      首先介绍一下老赵的Wind.js:

      官方链接:http://windjs.org/

      开源链接:https://github.com/JeffreyZhao/wind

      Wind.js的异步模块文档:http://windjs.org/cn/docs/async/

      Wind.js简单的介绍:

      Wind.js的前身为Jscex,即JavaScript Computation EXpressions的缩写,它为JavaScript语言提供了一个monadic扩展,能够显著提高一些常见场景下的编程体验(例如异步编程)。Wind.js完全使用JavaScript编写,能够在任意支持JavaScript的执行引擎里使用,包括各浏览器及服务器端JavaScript环境(例如Node.js)。

        

       没有引用Wind.js之前我的代码:

       call.js:

var getNovelNames = function(url){
    console.log("与原生交互...");
	cordova.exec(
		function(result){
            		console.log("交互成功...");
			var html = '';
			var novelNames = result;
			for(var i=0; i<novelNames.length; i++){
				html +='<li><a href="#page2" data-transition="slide">'+novelNames[i]+'</a></li>';
			}

			$("#daylist").append(html);
           		$.mobile.hidePageLoadingMsg();
		},
		function(error){
            		alert('亲,服务器繁忙,请重新刷新页面...');
        	},
		'CallPlugin',
		'getNovelNames',
		[url]
	);
};

index.js:

document.addEventListener('deviceready',function(){

                $.mobile.loadingMessageTextVisible = false;
                $("#day").bind("click",function(){
                            $.mobile.showPageLoadingMsg();
                            var url = '***'; //这里为某网站的URL暂时屏蔽
                            getNovelNames(url);
          });
 },true);

        引入Wind.js

        首先在页面引入:

<script type="text/javascript" src="js/wind-all-0.7.3.js"></script>

    call.js变为:

var asyncNovelNames = function(url){
        $await(Wind.Async.sleep(1000)); //这里停1s是为了让loading看清楚。App上线后应移除
	cordova.exec(
		function(result){
			var html = '';
			var novelNames = result;
			for(var i=0; i<novelNames.length; i++){
				html +='<li><a href="#page2" data-transition="slide">'+novelNames[i]+'</a></li>';
			}

			$("#daylist").append(html);
                        $.mobile.hidePageLoadingMsg();
		},
		function(error){
                        alert('亲,服务器繁忙,请重新刷新页面...');
                },
		'CallPlugin',
		'getNovelNames',
		[url]
	);
};

var getNovelNames =eval(Wind.compile("async", asyncNovelNames));

     index.js修改为:

document.addEventListener('deviceready',function(){
                $.mobile.loadingMessageTextVisible = false;
                $("#day").bind("click",function(){
                            $.mobile.showPageLoadingMsg();
                            var url = '***';//这里为某网站的URL暂时屏蔽
                            var task = getNovelNames(url);
                            task.start();
                });
            },true);

       修改完成后,发现App还是会有假死的问题,检查发现是原生问题的代码执行的时候,如果时间过长还是会影响页面的显示,这与website的区别很大。之前一直在做JavaEE方面的项目,所以一下直没考虑到这样的问题。后来将数据请求问题的NSURLConnection改成是委托代理的模式。数据通信问题问题解决。

时间: 2024-10-29 16:25:52

PhoneGap Plugin与Wind.js结合,实现异步通信的相关文章

使用生成器展平异步回调结构,JS篇

1. 前言 2012 年的时候,我去详细了解过 Python 的 Tornado 框架中的 gen.py 这套工具,http://www.zouyesheng.com/generator-for-async.html ,因为觉得它用于异步环境的编程中实在太方便了,而且,适用性上几乎没有成本,你的定义部分代码完全不需要因为这套工具而作任何改动,这套工具完全是"使用时"的一种可选形式. 那时我想的就是,如果在遍地是 callback 的 Javascript 中也有这样的东西可用就好了.后

JS组件系列之Bootstrap table表格组件神器【终结篇】_javascript技巧

bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap

reveal.js实现html播放ppt的炫酷效果

演示地址: http://meiyouwumai.github.io/reveal/ <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js - The HTML Presentation Framework</title> <meta name="description&qu

JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

原文:JS组件系列--表格组件神器:bootstrap table(三:终结篇,最后的干货福利) 前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实,博主挑选了一些自认为比较常用的功能在此分享给各位园友.源码也在这篇统一给出.好了,不多说废话,开始我们的干货之旅吧. bootstrap table系列: JS组件系列--表格组件神器

在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法_jquery

easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

zblog、统计、网摘、广告和我的博客

博客|广告|统计 晚上刚刚上传好ZBLOG,文章都还没几篇,便迫不及待的准备给我的博客做统计啊,弄广告啊,累是累了点,不过还好,通过在百度里的拼命寻找,终于找到了几篇文章,帮我弄好了我的小站,为了大家能轻松的完成任务,我把我的建站过程归结如下: 1.Z-Blog本人博客用的程序是Z-blog1.7laputa,感觉不错,直接上传到网站空间下即可,下载可到http://www.rainbowsoft.org/zblog/ 2.统计原来我总是在文件管理下,修改文件,但看了其他大侠的文章后,建议大家直

berserkJS —— 前端网络(性能)监测工具

berserkJS 详细介绍 berserkJS 是基于 Qt (C++跨平台库)开发的前端网络(性能)监测工具. 它的核心功能是通过内置 webkit 收集由页面实际网络请求相关数据. 偏重于页面上线前检测与评估. 页面性能分析工具,可用 JS 编写自己的检测.分析规则. 基于 Qt 开发,可跨平台编译,部署.内置基于 QtWebkit 的浏览器环境. 源码需在目标系统中编译后,可产生运行于 Windows / Linux / Mac 系统的可执行文件. 工程中自带 Window 系统中动态编

Hybrid框架UI重构之路:三、工欲善其事,必先利其器

上文回顾:Hybird框架UI重构之路:二.事出有因 工欲善其事,必先利其器,事是重构的目标,器是开发环境. 这篇文章将讲述重构时的UI框架的目录结构,且需要使用的开发工具. 目录结构 demo : 开发框架的模板(单页模式) demo-muti : 开发框架的模板(多页模式) demo-scene : 示例模板.一个完整的示例,目的是给使用者稍作修改就可以使用在项目上. demo-template : 给使用者使用的开发模板. demo-whole : 可在PC上演示的示例模板 dist :

js-javar script到底是什么

问题描述 javar script到底是什么 我学习jQuery和ajax的过程中,知道jQuery是一个js库,了解异步通信本质是通过js的XMLHttpRequest对象实现的. 为什么js能实现异步通信,js和浏览器,网络通信有啥关系? 搜索了很多答案,越来越搞不懂js到底是什么了,感觉js无所不能的样子. 假如我想了解js和整个web相关的体系结构,应该看哪本(哪几本书)!! 我是个野路子出身的,好不容易搞懂了C# .net,学到ajax 虽然会写,基本明白. 但对于更深的理解脑袋里有一