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

简介: <p>    <span style="font-size:10px"><span style="background-color:rgb(255,255,255)">  最近在做一个的ios的App。项目</span><span style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; line-height:19px

      最近在做一个的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改成是委托代理的模式。数据通信问题问题解决。



目录
相关文章
|
6月前
|
JavaScript 前端开发 UED
Vue.js中的父子组件通信:构建交互性和可维护性的组件
Vue.js是一款流行的JavaScript框架,以其组件化的开发方式而著称。在Vue.js中,父子组件通信是实现组件之间交互和数据传递的重要机制。在本博客中,我们将深入研究父子组件通信的概念、用法、传递数据的方式以及如何有效地利用它来构建交互性和可维护性的组件。
32 0
|
6月前
|
JavaScript 前端开发 UED
Vue.js中的自定义事件:组件间通信的灵活工具
Vue.js是一款流行的JavaScript框架,以其组件化的开发方式而著称。在Vue.js中,自定义事件是一种强大的机制,用于在组件之间进行通信和交互。在本博客中,我们将深入研究自定义事件的概念、创建、触发和监听,以及如何利用它来实现灵活的组件间通信。
26 0
|
6月前
|
JavaScript
Vue | Vue.js 组件化 - 组件间通信
Vue | Vue.js 组件化 - 组件间通信
|
3月前
|
存储 JavaScript 安全
js中多个页面之间如何进行通信?有什么区别?
js中多个页面之间如何进行通信?有什么区别?
25 0
|
3月前
|
JavaScript
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
js实现跨浏览器tab选项卡页通信、传参,监听localStorage.变量的实时变化,实现打开多个浏览器页面窗口相互可以传参通信
|
4月前
|
前端开发 JavaScript 数据处理
【JavaScript】在前后端通信方面的优势
【JavaScript】在前后端通信方面的优势
16 0
|
5月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(1)
|
5月前
|
存储 前端开发 JavaScript
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
带你读《现代Javascript高级教程》二十一、前端跨页面通信:实现页面间的数据传递与交互(2)
|
5月前
|
前端开发 JavaScript 安全
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互(1)
带你读《现代Javascript高级教程》——前端跨页面通信:实现页面间的数据传递与交互
|
8月前
|
JSON JavaScript 前端开发
JavaScript iframe 多窗口通信实战
JavaScript iframe 多窗口通信实战

相关产品

  • 云迁移中心