最近在做一个的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改成是委托代理的模式。数据通信问题问题解决。
分享到:
相关推荐
Apress.Beginning.PhoneGap.Mobile.Web.Framework.for.JavaScript.and.HTML5.2012
PhoneGap开发入门借鉴.pdf
phonegap3.4.0如何安装.docx
phoneGAP就是Cordova,据说执行起来比网页快, Android, ios通吃
通过自定义plugin插件实现了javascript与Android的交互。
Eclipse+android+jdk+phonegap开发环境教程.pdf
PhoneGap.2.x.Mobile.Application.Development
Create, develop, debug, and deploy your very own mobile applications with PhoneGap About This Book Build hybrid mobile applications with PhoneGap/Cordova using HTML, CSS and JavaScript Optimize and ...
Packt.PhoneGap.for.Enterprise.2014
最新的跨平台移动开发技术,phonegap将是未来移动开发的趋势,一次代码编写多平台运行
PhoneGAP书内实例 文件较大,分2卷压缩,2卷下载完后才可以打开。 如果打不开,请比较文件大小是否正确, 小于我的文件大小请重新下载。
最新版本的phonegap-2.9.1是没有cordova-2.9.1.jar的,这里打包好给大家。
PhoneGAP书内实例 文件较大,分2卷压缩,2卷下载完后才可以打开。 如果打不开,请比较文件大小是否正确, 小于我的文件大小请重新下载。
phoneGapPhoneGap是一个用基于HTML CSS和JavaScript的 创建移动跨平台移动应用程序的快速开发平台 它使开发者能够利用iPhone Android Palm Symbian WP7 Bada和Blackberry智能手机的核心功能 包括地理定位 加速器 ...
PhoneGap 应用开发基础 前端必备技能 助你快速掌握~~~
PhoneGap is a useful and flexible tool that enables you to create complex hybrid applications for mobile platforms. In addition to the core technology, there is a large and vibrant community that ...
phonegap-cli, PhoneGap和 PhoneGap/构建 命令行 接口 PhoneGap命令行接口和 node.js 库。命令行命令行要求安装 node.js 版本 >=4.0.0安装 iOS sim 将应用程序部署到iOS模拟器。安装$ npm install
phonegap_baidu_sdk_location, 针对android的phonegap百度sdk位置 phonegap-baidu-locationPhonegap百度位置插件fork地址:https://github.com/andybuit/phonegap-baidu-location使用方法详见我的博客:http://sn
PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。
android_phonegap-0.9.5.1jar 包, Android以后的发展趋势