c html联调,JS与native 交互简单应用

JS与native 交互简单应用

一、objectiveC 语法简介

二、简易项目浏览器搭建

新建项目步骤:

1>

04cfa7e7e6e3

DraggedImage.png

2>

04cfa7e7e6e3

2222.png

3>

04cfa7e7e6e3

33333.png

4>

04cfa7e7e6e3

4444.png

建立一个小的浏览器即webview

关键代码如下:

// context 上下文也可以在此处获取,开始加载网页调用此方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

return YES;

}

// 网页加载完成会执行此方法

- (void)webViewDidFinishLoad:(UIWebView *)webView {

self.jsbinding_context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

[self initBinding];

}

/** 懒加载 */

- (UIWebView *)webView {

if(!_webView) {

_webView = [[UIWebView alloc]init];

_webView.delegate = self;

NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];

NSURL* url = [NSURL fileURLWithPath:path];

// NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];

NSURLRequest *request = [[NSURLRequest alloc]initWithURL:url];

[_webView loadRequest:request];

}

return _webView;

}

三、js和native交互联调工具认识:

iOS 与 js 交互联调工具必须为safari,首先我们设置一下safari 如下设置调出开发者工具

04cfa7e7e6e3

a'a'a'a.png

04cfa7e7e6e3

bbbbb.png

OK这样我就可以在工具栏中多了一个 【开发】 选项,然后我们编译我们的项目就可以找到相应的网页,跟调试普通网页相同,只是网页现在在手机上

04cfa7e7e6e3

DraggedImage-2-1.png

四、js 与 native 原生交互

1> js 调用oc 方法

a> 用block 的方式

self.jsbinding_context[@"multiply"] = ^(NSInteger a, NSInteger b){

return a * b;

};

b> JSExport 方式

binding类 .h 文件

#import

#import

@protocol JsBindingDemoProtocol

JSExportAs(nativeAdd, - (NSInteger)addX:(NSInteger)x andY:(NSInteger)y);

@end

@interface JsBindingDemo : NSObject

@end

binding类 .m 文件

#import "JsBindingDemo.h"

@implementation JsBindingDemo

- (NSInteger)addX:(NSInteger)x andY:(NSInteger)y {

return x+y;

}

@end

我们要用export 的方式去调用,我们首先要绑定初始化binding类,然后注入到js 中,代码如下:

- (void)initBinding {

JsBindingDemo *binding = [[JsBindingDemo alloc]init];

self.jsbinding_context[@"JsBindingDemo"] = binding;

}

2> native调用js 方法(也有两种方法)

a>context 用上下文执行

- (JSValue *)evaluateScript:(NSString *)script;

eg:执行js中的 native_ execute() 方法

[self.jsbinding_context evaluateScript:@"native_ execute()"];

b>用webview 执行

- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL

eg: [self.webview evaluateScript@"native_ execute()" withSourceURL:@"index.js"];

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

eg:[self.webView stringByEvaluatingJavaScriptFromString:@"native_ execute()"];

备注:上面为调用方法代码,导出、注入 属性,步骤与导出、注入方法代码 相同不一一举例说明

五、参考资料:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/465119.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Extjs的OPOA

基于ExtJs的opoa系统 OPOA是one page ,one application的简称,即单页系统,也就是说一个系统只有一个页面。就是要求所有其他的页面都以插件的形式在主页里显示,点击主页的一个菜单或链接按钮,调用一个模块的插件。插件在主页里以t…

写给我弟

我堂弟今年24岁,也是我最小的一个堂弟,我想给他说点事,想告诉他一些东西,但是也担心自己所说的,并不能让他认同和接受。我心里一定是有我弟的,也是装着我弟的,所以我弟的事情,我自己…

Chrome插件(扩展)

【干货】Chrome插件(扩展)开发全攻略 写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面:https://github.com…

计算机科学与技术 天涯,计算机科学与技术专业

计算机科学与技术专业业务培养目标:本专业培养具有良好的科学素养,系统地、较好地掌握计算机科学与技术包括计算机硬件、软件与应用的基本理论、基本知识和基本技能与方法,能在科研部门、教育单位、企业、事业、技术和行政管理部门等单位从事…

Apache OpenJPA 2.1.0 发布

OpenJPA 是 Apache 组织提供的开源项目,它实现了 EJB 3.0 中的 JPA 标准,为开发者提供功能强大、使用简单的持久化数据管理框架。OpenJPA 封装了和关系型数据库交互的操作,让开发者把注意力集中在编写业务逻辑上。OpenJPA 可以作为独立的持久…

手把手带你写一个中断输入设备驱动

今天群里有人问,要开始驱动开发的话从什么开始比较好。我说,应该开始去摸索触摸屏驱动,现在我想了下,触摸屏驱动可能会难了些,但是从一个GPIO开始,我觉得一定是一件很容易的事情。所以这篇文章就来了。大家…

配置sudo访问

具体操作步骤 1.首先我们建立一个账户,设置密码 [rootVM_0_13_centos home]# useradd 123 [rootVM_0_13_centos home]# passwd 123 Changing password for user better407. New password: BAD PASSWORD: it is WAY too short BAD PASSWORD: is too simple Retype n…

读取Xml文档的元素和属性

<?xml version"1.0" encoding"utf-8" ?><StuInfo> <student> <ID>1001</ID> <Name>张三</Name> <Sex>男</Sex> <Birthday age"23">1987-1-12</Birthday> &l…

计算机专业需要注意什么细节,计算机专业考生复试注意事项

计算机专业考生复试注意事项随着计算机相关技术的突飞猛进&#xff0c;对人才的职业发展也提出了更高的要求。近年来&#xff0c;计算机及相关专业一直是研究生报考的热门专业&#xff0c;复试中的竞争日益激烈。如何在复试中脱颖而出呢?导师通常看重学生的那些能力?下面就计…

驱动调试神器printk你掌握了吗?

[导读] 刚刚开始做Linux相关开发工作时&#xff0c;深感Linux内核代码庞大&#xff0c;要加些自己的驱动进内核代码树&#xff0c;常常深陷bug的泥沼难以自拔&#xff0c;今天来分享一下内核调试利器printk的使用心得。前面一段时间很忙&#xff0c;后期更文频率会渐渐回归正常…

腾讯云技术专家卢萌凯手把手教你Demo一个人脸识别程序!

欢迎大家前往腾讯云社区&#xff0c;获取更多腾讯海量技术实践干货哦~ 本文来自腾讯云技术沙龙&#xff0c;本次沙龙主题为Serverless架构开发与SCF部署实践 卢萌凯&#xff1a;毕业于东南大学&#xff0c;曾就职于华为&#xff0c;熟悉云行业解决方案。目前负责腾讯云中间件产…

计算机硬件知识考证题,计算机硬件知识题(答案)资料

信息技术过关考试题库(“计算机基础知识”部分)1、计算机的核心部件中央处理器的简称是________。CA 主机B 存储器C CPUD 输入设备2、世界上第一台电子计算机诞生于_____________。AA 1946年B 1950年C 1949年D 1941年3、下列全部是硬件的选项是______。AA 键盘、显示器B Window…

活动目录排错笔记

经过几年的网络管理工作&#xff0c;总结了一些关于AD的排错经验现在拿出来同大家分享&#xff0c;其中一些说明抄了微软的KB在这里说明一下&#xff0c;排错笔记有些地方可能写的不是很全&#xff0c;看不明白的地方大家可以GOOGLE一下&#xff0c;不对的地方也请大家提出 活…

CCF 201712-3 Crontab

本地AC&#xff0c;CCF编译失败。 通过对每条任务进行处理&#xff0c;将可能的月&#xff0c;日处理出来&#xff0c;并且比对对应星期是否符合要求。再对时分进行处理&#xff0c;判断整体时间在所给区域内。 思路借鉴自https://blog.csdn.net/gl486546/article/details/7905…

二十世纪最伟大的算法,你了解哪个?

导读&#xff1a;作者July总结了一篇关于计算方法的文章《 细数二十世纪最伟大的10大算法 》。一、1946 蒙特卡洛方法[1946: John von Neumann, Stan Ulam, and Nick Metropolis, all at the Los Alamos Scientific Laboratory, cook up the Metropolis algorithm, also known …

桌面计算机恢复出厂设置,windows7电脑怎么恢复出厂设置

我们使用电脑一段时间&#xff0c;由于各种问题&#xff0c;希望将电脑恢复出厂设置&#xff0c;那么windows7电脑怎么恢复出厂设置呢&#xff1f;下面跟着学习啦小编来一起了解下windows7电脑恢复出厂设置的方法吧。windows7电脑恢复出厂设置方法一按下开机键&#xff0c;启动…

关于Exchange管理控制台报“您的权限不足,无法此查看数据”的解决办法

今天朋友突然来电话&#xff0c;说自己的Exchange 2010 EMC突然报“you dont have sufficient permissions to view this data”&#xff08;您的权限不足&#xff0c;无法查看此数据&#xff09;&#xff0c;同时所有的cmdlet命令也不可以执行。询问我解决办法&#xff0c;出错…

C语言程序返回值为int的时候,不同值代表不同的意义

这个是我自己给自己的代码定的标准&#xff0c;方便自己阅读与编码。他人代码情况不可套用 1  执行成功 0  出现错误&#xff0c;不影响程序执行 -1  执行失败 -2  程序内部致命错误&#xff0c;退出程序转载于:https://www.cnblogs.com/kgtone/p/9570388.html

内存为什么还有管理?

本文作者&#xff1a;度白嵌入式任何程序运行起来都需要分配内存空间存放该进程的资源信息的&#xff0c;C程序也不例外。C程序中的变量、常量、函数、代码等等的信息所存放的区域都有所不同&#xff0c;不同的区域又有不同的特性。C语言学习者、尤其是在学习嵌入式的朋友&…

ajax html fileupload,fileUpload.html

文件上传测试说明: 最大上传量:100M&#xff0c;单个文件最大长度:100Menctype"multipart/form-data" method"post">Element.hide(progressBar);Event.observe(fileUploadForm,submit,startProgress,false);Event.observe(cancelUploadButton,click,ca…