文档章节

IOS分享扩展使用JS脚本

aron1992
 aron1992
发布于 2017/02/04 17:10
字数 652
阅读 80
收藏 1

实现一个分享扩展插件,功能是从Safari网页中截取当前网页的图片内容
输入图片说明 输入图片说明

基本的步骤总结在下面:

1.创建一个JS文件,命名为MyJavascriptFile.js,文件的功能是解析safari网页内容,获取到网页中的所有图片节点,解析从图片的URL,返回所有图片URL拼接而成的字符串。
JS中主要用到run: function(arguments){}这个方法来处理抓取数据的逻辑,处理抓取到的数据调用 arguments.completionFunction({ "webImages": imageArrStr }); 这个方法把数据返回,"webImages"这个key可以自定义,在第三步的原生层OC代码中需要用到这个key把JS层抓取到的数据取出来,然后可以对这些图片数据进行保存、上传等需要的操作了。

MyJavascriptFile.js文件内容

var BuscapeClass = function() {};

BuscapeClass.prototype = {
    
    run: function(arguments) {
        var imageArray = new Array();
        var objs = document.getElementsByTagName("img");
        for(var i=0;i<objs.length;i++){
            if(imageArray.indexOf(objs[i].src) == -1){
                imageArray.push(objs[i].src);
            }
        }
        var imageArrStr = imageArray.join('+');
        // Pass the baseURI of the webpage to the extension.
        arguments.completionFunction({ "webImages": imageArrStr });
    },
    
    // Note that the finalize function is only available in iOS.
    finalize: function(arguments) {
        // arguments contains the value the extension provides in [NSExtensionContext completeRequestReturningItems:completion:].
        // In this example, the extension provides a color as a returning item.
        // document.body.style.backgroundColor = arguments["bgColor"];
        
        var bestOffer = arguments["bestOffer"];
        
        alert("A melhor oferta é da loja\n" + bestOffer["sellername"] + " por " + bestOffer["price"]);
    }
};

// The JavaScript file must contain a global object named "ExtensionPreprocessingJS".
var ExtensionPreprocessingJS = new BuscapeClass;

2.在info.plis文件中把创建的JS文件进行配置,配置如下: 输入图片说明
配置的源码

	<key>NSExtension</key>
	<dict>
		<key>NSExtensionAttributes</key>
		<dict>
			<key>NSExtensionActivationRule</key>
			<string>SUBQUERY (
    extensionItems,
    $extensionItem,
    SUBQUERY (
        $extensionItem.attachments,
        $attachment,
        (
       		 	ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.url"
       		 || ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.image"
       		 || ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO "public.plain-text"
        )
        
    ).@count &gt;= $extensionItem.attachments.@count
).@count &gt;= 1</string>
			<key>NSExtensionJavaScriptPreprocessingFile</key>
			<string>MyJavascriptFile</string>
		</dict>
		<key>NSExtensionMainStoryboard</key>
		<string>MainInterface</string>
		<key>NSExtensionPointIdentifier</key>
		<string>com.apple.share-services</string>
	</dict>

3.原生层OC代码中处理JS抓取的数据,主要用到这两句,把数据取出来"webImages"这个key要和JS中定义的KEY一致

NSDictionary *results = jsDict[NSExtensionJavaScriptPreprocessingResultsKey];
NSString* result = [results objectForKey:@"webImages"];

完整的处理代码

- (void)fetchDataFromWebContent {
    __weak typeof(self) weakSelf = self;

    //获取inputItems,在这里itemProvider是你要分享的图片
    NSArray* extensionItems = self.extensionContext.inputItems;
    for (NSExtensionItem *extensionItem in extensionItems) {
        
        NSMutableArray* tmpTypeImageArr = [NSMutableArray array];
        NSMutableArray* tmpTypePropertyListArr = [NSMutableArray array];
        
        NSArray* attachments = extensionItem.attachments;
        // 处理attachments
        for (NSItemProvider *itemProvider in attachments) {
            
            // 注入JS获取图片数据数据
            if ([itemProvider hasItemConformingToTypeIdentifier:(NSString *)kUTTypePropertyList]) {
                [itemProvider loadItemForTypeIdentifier:(NSString *)kUTTypePropertyList options:nil completionHandler:^(NSDictionary *jsDict, NSError *error) {
                    NSLog(@"jsDict: %@", jsDict);
                    
                    dispatch_async(dispatch_get_main_queue(), ^{
                        // Get javascript result
                        NSDictionary *results = jsDict[NSExtensionJavaScriptPreprocessingResultsKey];
                        NSString* result = [results objectForKey:@"webImages"];
                        BMLog(@"=== webImages ===%@", result);
                        NSArray* tmpArr = [weakSelf handleImages:result];
                        if (tmpArr.count > 0) {
                            [tmpTypePropertyListArr addObjectsFromArray:tmpArr];
                        }
                        
                        [weakSelf handleResult:tmpTypePropertyListArr];
                    });
                }];
            }
        }
    }
}

- (NSArray*)handleImages:(NSString*)imagesStr {
    NSMutableArray* mUrlArray = [NSMutableArray arrayWithArray:[imagesStr componentsSeparatedByString:@"+"]];
    NSMutableArray* tmpUrls = [NSMutableArray array];
    for (int i = mUrlArray.count-1; i>=0; i--) {
        NSString* url = mUrlArray[i];
        // 过滤空的和jpg的图像
        if (![url isEmptyOrWhitespace]) {
            // 在这里处理图片的URL
        }
    }
    NSLog(@"mUrlArray = %@   tmpUrls = %@", mUrlArray, tmpUrls);
    return tmpUrls;
}

参考资料:
App Extension Programming Guide

© 著作权归作者所有

aron1992

aron1992

粉丝 65
博文 91
码字总数 165831
作品 0
厦门
程序员
私信 提问
iOS与JS交互之UIWebView-JSExport协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JSExport」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前端(不...

QiShare
2018/08/31
0
0
Visual Studio Code 支持 iOS Web 应用调试

微软JavaScript Diagnostics项目经理Kenneth Auchenberg在一篇文章中写道,有一个新的Visual Studio Code扩展,允许开发人员直接在他们的Mac和Windows编辑器上调试在iOS设备上运行的JavaScr...

局长
2016/09/06
3.5K
6
基于原生的移动跨平台研究和实践

基于原生主要是针对基于webview+h5比较来说的,基于H5的我不想再讨论了,我想尝试的是从UI到功能都是原生,而不是用H5模拟的所谓原生体验。 背景 我们从开发角度来考虑,但凡想从事长远的开发...

voxer
2017/03/26
149
0
iOS与JS交互之UIWebView-JavaScriptCore框架

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前...

QiShare
2018/08/30
0
0
iOS与JS交互之WKWebView-WKScriptMessageHandler协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKJSMessageHandler」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
2018/09/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 自定义登录认证(二)

一、前言 本篇文章将讲述Spring Security自定义登录认证校验用户名、密码,自定义密码加密方式,以及在前后端分离的情况下认证失败或成功处理返回json格式数据 温馨小提示:Spring Security...

郑清
24分钟前
2
0
php yield关键字以及协程的实现

php的yield是在php5.5版本就出来了,而在初级php界却很少有人提起,我就说说个人对php yield的理解 Iterator接口 在php中,除了数组,对象可以被foreach遍历之外,还有另外一种特殊对象,也就是继承...

冻结not
37分钟前
3
0
servlet请求和响应的过程

本文转载于:专业的前端网站➥servlet请求和响应的过程 1.加载 Servlet类被加载到Java虚拟机中,并且实例化。在这个过程中,web容器(例如tomcat)会调用Servlet类的公开无参构造函数,产生一...

前端老手
38分钟前
3
0
golang 1.13 errors 包来了,不用写“err 气功波”代码

引 这篇是对 errors 包 的姿势挖掘 气功波错误代码 从 http.Get()返回的错误 判断 syscall.ECONNREFUSED 错误.以前要对 go 标准库 error 结构有点熟悉,才能写出下面的代码 func CmdErr(err ...

guonaihong
41分钟前
28
0
喜玛拉雅已听书单

时间倒序排 书名 作者 状态 唐砖 孑与2 进行中 死灵之书(克苏鲁神话合集) 阿卜杜拉·阿尔哈萨德 进行中 赡养人类 刘慈欣 完结 赡养上帝 刘慈欣 完结 中国太阳 刘慈欣 完结 中国太阳 刘慈欣...

Alex_Java
42分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部