混合开发-利用Cordova插件实现HTML5 与 原生代码的连接

主要利用的就是通过Cordova这个东西, 进行HTML5 与 iOS断值得传递

列子:把HTML5 获取的日期同步到iOS系统的日历中去

1. 原生代码:.h.m 提供一个接口文件

主要代码:

- (BOOL)saveEventToCalender:(NSString *)title content:(NSString *)contentTitle year:(NSString *)year date:(NSString
*)date time:(NSString *)time

{

// 定义一个事件市场

EKEventStore *eventStore = [[EKEventStore
alloc] init];

if ([eventStore
respondsToSelector:@selector(requestAccessToEntityType:completion:)]) {

[eventStore requestAccessToEntityType:EKEntityTypeEvent
completion:^(BOOL granted,
NSError *
_Nullable error) {

dispatch_async(dispatch_get_main_queue(), ^{

if (error) {

flag =
0;

}

else
if (!granted){

// 用户不允许访问日历

flag =
0;

}else {

// 事件保存到日历中

flag =
1;

// 创建日历

EKEvent *event = [EKEvent
eventWithEventStore:eventStore];

// 设置保存事件的内容或者题目

event.title = title;

event.location = contentTitle;

// 进行日期字符串的拼接操作

if (![date
isEqualToString:@""] && ![time
isEqualToString:@""]) {

NSArray *dateArray = [date
componentsSeparatedByString:@"."];

NSArray *timeArray = [time 
componentsSeparatedByString:@":"];

NSInteger timeDate = [timeArray[0]
integerValue] + 2;

NSString *timeFinally = [NSString
stringWithFormat:@"%ld", (long)timeDate];

NSString *startTime = [NSString
stringWithFormat:@"%@年%@月%@日
%@:%@", year, dateArray[0], dateArray[1], timeArray[0], timeArray[1]];

NSString *endTime = [NSString
stringWithFormat:@"%@年%@月%@日
%@:%@", year, dateArray[0], dateArray[1], timeFinally, timeArray[1]];

NSDateFormatter *tempFormatter = [[NSDateFormatter
alloc] init];

// 设置时间的格式,
可以重新自定义

[tempFormatter setDateFormat:@"yyyy年MM月dd日
HH:mm"];

event.startDate = [[NSDate
alloc] init];

NSDate *dateTime = [[tempFormatter
dateFromString:startTime]
dateByAddingTimeInterval:[NSTimeZone
localTimeZone].secondsFromGMT];

NSDate *dateTimeEnd = [[tempFormatter
dateFromString:endTime]
dateByAddingTimeInterval:[NSTimeZone
localTimeZone].secondsFromGMT];

event.startDate = dateTime;

// 设置结束的时间(一定要加结束的时间)

//                        event.endDate = [[NSDate alloc] init];

event.endDate = dateTimeEnd;

event.allDay =
NO;

// 增加提醒(可以重新设置)

[event addAlarm:[EKAlarm
alarmWithRelativeOffset:60.0f * -60.0f *
24]];

[event addAlarm:[EKAlarm
alarmWithRelativeOffset:60.0f * -15.0f]];

[event setCalendar:[eventStore
defaultCalendarForNewEvents]];

NSError *err;

[eventStore saveEvent:event
span:EKSpanThisEvent
commit:YES
error:&err];

}

}

});

}];

}

return flag;

}

2. 对原生代码的一个封装, 用于与HTML5信息的传递, 原生Cordova插件的封装

创建一个文件继承于

CDVPlugin

引入:

#import <Cordova/CDVPlugin.h>

主要代码:

- (void)addconference:(CDVInvokedUrlCommand*)command{

ETLog(@"_________conmmand___________%@",command.arguments);

NSString *title = command.arguments[0];

EventToCalander *calander = [[EventToCalander
alloc]
init];

[calander saveEventToCalender:command.arguments[1]
content:command.arguments[2]
year:command.arguments[3]
date:command.arguments[4]
time:command.arguments[5]];

NSMutableDictionary *param_info = [[NSMutableDictionary
alloc]
init];

[param_info setValue:@"ok"
forKey:@"back"];

CDVPluginResult* pluginResult = [CDVPluginResult
resultWithStatus:CDVCommandStatus_OK
messageAsDictionary:param_info];

[self.commandDelegate
sendPluginResult:pluginResult
callbackId:command.callbackId];

}

3. 配置config.xml文件 如原生代码与web段建立关联

<feature name="LoginInfo_intent">

<param
name="ios-package"
value="ETELoginInfo" />

</feature>

4. 设置配置文件在cordova.js 文件中

// 配置文件配置的方法

{

"file":
"plugins/com.etteacher.plugins/www/LoginInfo_intent.js",

"id":
"org.apache.cordova.LoginInfo_intent",

"merges": [

"navigator.LoginInfo_intent"

]

},

其中: file 指的是Plugins 的路径

id: 文件识别的id

merges:调用方法的名称

5. 设置Plugins 中的内容

cordova.define("org.apache.cordova.LoginInfo_intent",
function (require, exports, module) {

var exec = require(‘cordova/exec‘);

module.exports = {

demo: function (sucess,failed,mills) {

exec(sucess, failed, "LoginInfo_intent",
"intent", [mills]);

},

wifi: function (success,failed,mills) {

exec(success, failed, "LoginInfo_intent",
"wifi", [mills]);

},

addconference: function (success,failed,mills) {

exec(success, failed, "Add_meeting",
"addconference", mills);

},

openPDF: function (success,failed,mills) {

exec(success, failed, "LoginInfo_intent",
"openPDF", mills);

}

,

timerpick: function(success,failed,mills) {

exec(success, failed, "LoginInfo_intent",
"timerpick", mills);

},

getproductinfo: function(success,failed,mills) {

exec(success, failed, "LoginInfo_intent",
"get_productinfo", mills);

}

};

});

其中有分别实现几个功能的方法

6. web段HTML5 利用AngularJS 进行传值的操作

if(navigator.LoginInfo_intent){

navigator.LoginInfo_intent.addconference(function (winParam) {

//myAlert(winParam.back);

logger("winParam_back----->" + winParam.back);

}, null, [cityAddress,project_name,$scope.cityDetailAddress,year_sel,date_sel,time_sel,user_name,user_email]);

}

}

其中为主要代码, , 整个思路就是web 段与 iOS段进行传值的过程, 其中需要设置一些关于Cordova的配置文件

时间: 2024-08-04 21:01:11

混合开发-利用Cordova插件实现HTML5 与 原生代码的连接的相关文章

Android + HTML5 混合开发

摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正 简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一个轻量级的浏览器(WebView),一部分原生的功能改为 HTML5 来开发,这部分功能不仅能够在不升级 App 的情况下动态更新,而且可以在 Android 或 iOS 的 App 上同时运行,让用户的体验更好又可以节省开发的资源. ##成品 APP: 超星慕课(一款包含 Java 和 C# 学习

理清cordova插件的调用流程

从调用的角度看流程  前端调用(clobbers)-->cordova_plugins.js(clobbers对应插件id和插件文件所在的路径)-–>js部分(配置着插件的名字,已经插件里面都有的方法)-->config.xml(根据插件的名字找到对应的插件原生文件的包名)-->原生(根据匹配到的方法名,来调用原生方法,另外也可以获取到js传递下来的参数) 简单说:前端调用-->桥梁:(cordova_plugin.js clobbers)-->js文件-->桥梁

Sublime Text 3前端开发常用优秀插件介绍

Package Control插件管理 提到Sublime Text插件安装,就不得不提Package Control [官方文档] 简而言之,它是用来管理插件的插件 所以,首次使用前也是需要安装的 使用Ctrl+`(Esc键下方)快捷键或者通过View->Show Console菜单打开命令行 将以下代码复制后粘贴到如上图中"<代码粘贴处>",然后按Enter(回车),稍等片刻 import urllib.request,os,hashlib; h = '2915d

Android移动APP开发笔记——Cordova(PhoneGap)通过CordovaPlugin插件调用 Activity 实例

引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用手机内部的API跟页面进行信息交换.Cordova 特别为此定制了完善的解决方案,以方便用户进行程序编辑.在这一章里将为大家逐一介绍Cordova与Actitity通讯的实现原理. 目录 一.CordovaPlugin类简介 二.页面通过 cordova.exec 函数调用 CordovaPlugi

浅谈UIWebView,HTML5与Native的混合开发

今天在做项目的时候,遇到了UIWebView的问题,所以今天顺便总结一下,同时也简单的谈了一下Native与H5的混合开发,关于混合开发这块,研究的不算太好,希望广大博友指正~~ 网络开发中,当公司已经使用 HTML5 技术实现同时适应 Android 和 iOS 等多个平台的网页时,这时往往需要我们 iOS 平台能够嵌入网页并进行各种交互, 这里我们考虑的方案就是:使用 UIWebView 网页控件 UIWebView是苹果给我们提供展示网页的一种控件. UIWebView的基本用法 我们一般

[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cordova-hot-code-push 以下是我对GitHub项目readme的翻译 ---------------------------------------------- Cordova Hot Code Push Plugin 此插件提供了能够使cordova app自己主动更新web内容的功

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

如何在android studio中cordova的混合开发

基于Android Studio 中Cordova的开发 cordova简介 Cordova的前身是PhoneGap 官网: (http://cordova.io) Cordova应是运行在客户端本地应用容器的web应用.因此,运行在Cordova容器中的Html5应用的结构和传统的基于web服务器的有所不同.传统的web应用中服务器端做了大部分工作,比如按照用户请求传回生成的内容.而Cordova这种容器中的应用本身包括了所需要的静态页面,用户请求一般由js代码响应并与服务器交互,这样与服务器

Android混合开发,html5自己主动更新爬过的坑

如今使用混合开发的公司越来越多,尽管出现了一些新技术,比方Facebook的react native.阿里的weex,但依旧阻挡不了一些公司採用h5的决心.当然,这也是从多方面考虑的选择. 在三年前就使用过html5混合开发,当时做的是一款贵金属软件,涨跌五线谱.乾坤交易,还有各个股市的信息,那时候还是上波牛市爆发的前夕,哎... 近期公司让用h5混合开发.一些页面和功能有h5分担,最初时候放在本地assets目录下,后来因为前端同事频繁改动和更新.再加上数据安全方面考虑,决定把包放在serve