ios中仿支付寶js與oc交互,ios和js交互

本文目錄一覽：

• 1、iOS開發（OC）——支付寶支付
• 2、OC與JS交互-WKWebView篇
• 3、OC仿支付寶返回到後台添加模糊效果
• 4、JS與OC交互、js事件注入、修改js方法實現
• 5、iOS – OC 與 JS 交互六種方式總結
• 6、如何在IOS平台上使用js直接調用OC方法

iOS開發（OC）——支付寶支付

1、首先在支付寶開發者平台上創建應用，並按照開發者平台上的步驟把SDK接入，配置環境（這些步驟支付寶開發者平台寫的很清楚，下面我主要寫一些開放平台沒有，或者需要注意的地方）

2、導入頭文件 #import AlipaySDK/AlipaySDK.h （如果報錯，則是缺少某些類庫或者靜態庫和頭文件路徑沒有設置好，請仔細查看並按照開放平台的步驟檢查，或者看一下這個： ）

3、iOS 8.0以下重寫下面方法

4、iOS 9.0以上實現下面的方法（也就是說，如果app要兼容iOS 8.0以上，則步驟3和步驟4的方法都要實現）

5、發起支付

注意：為了支付完成後能成功返回app，需要在info.plist文件中設置URL scheme，並且這個值是唯一的（最好填寫bundel id 或者開放平台上的app ID），詳細步驟在支付寶開放平台的接入文檔有

OC與JS交互-WKWebView篇

oc 跟 js 端協議好方法名 比如 js 的方法為 Back()

1.oc 對 js 的方法進行監聽

[config.userContentController addScriptMessageHandler:self name:@”Back”];

2.oc 設置代理並且導入代理 

WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler

self.webView.UIDelegate = self;

self.webView.navigationDelegate = self;

3.實現代理

– (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message;

4.離開頁面的時候移除監聽

[config.userContentController removeScriptMessageHandlerForName:@”Back”];

1.創建按鈕 並且實現按鈕的回調

input type=”button” value=”返回按鈕” onclick=”backClick()” /

2.按鈕的響應方法中添加發送消息到 OC (可以攜帶參數)

 functionbackClick() {window.webkit.messageHandlers.Back.postMessage(‘固定寫的 js 值–點擊了返回’);}

1.OC 添加對 JS 的消息監聽,實現代理對監聽的實現方法。

2.JS 端在合適的時機發送消息,並且可以攜帶參數。

js 跟 oc 端協議好方法名 比如 js 的方法為 transferPrama(str)

//oc 在合適的時機調用 js 方法(可以傳參數)

NSString* paramString =@”我是 OC 調用 JS”;

NSString* jsStr = [NSStringstringWithFormat:@”transferPrama(‘%@’)”,paramString];

 [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {NSLog(@”result=%@  error=%@”,result, error);}];

//js需要定義一個對應的方法供 OC 調用

functiontransferPrama(str) {

document.getElementById(“secondid”).value = str;

}

– (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message

– (void)evaluateJavaScript:(NSString*)javaScriptString completionHandler:(void(^_Nullable)(_Nullableid,NSError*_Nullableerror))completionHandler;

憤怒的牛牛的

憤怒的牛牛的新浪博客

憤怒的牛牛的GitHub

OC仿支付寶返回到後台添加模糊效果

最近在使用支付寶的過程中發現當支付寶運行在手機後台，我們雙擊Home鍵切換app的時候，支付寶為了保護用戶隱私會添加模糊效果。自己就模仿着實現了一下，先說一下我的實現思路：

獲取到當前window的截屏圖片並保存到沙盒，然後在下面這個方法裡面將你創建的覆蓋window上view顯示出來

在app將葯進入前台的時候將你創建覆蓋在window上的view移除掉

圖片高斯模糊效果的實現

屏幕截圖的實現

保存沙盒的實現

讀取沙盒截圖的實現

demo的 傳送門

如果對您有幫助，順便給個✨吧！

JS與OC交互、js事件注入、修改js方法實現

由於UIWebview即將廢棄，相比較於WKWebview，通過測試即可發現UIWebview佔用更多內存，且內存很誇張。WKWebView網頁加載速度也有提升，但是並不像內存那樣提升那麼多。下面列舉一些其它的優勢：

WKScriptMessageHandler是因為我們要處理JS調用OC方法的請求。

WKScriptMessage有兩個關鍵屬性name 和 body。

因為我們給每一個OC 方法取了一個name，那麼我們就可以根據name 來區分執行不同的方法。body 中存着JS 要給OC 傳的參數。

ocAddAction方法在js文件中並沒有定義

實現WKNavigationDelegate協議方法，執行之後會在WKScriptMessageHandler代理方法中攔截到 ocZRAction

動態修改alert系統函數的實現，當js中調用alert函數時，觸發的是我們自定義方法

URL Scheme攔截的問題，這裡不做贅述，請看 demo

JS注入詳情

參考鏈接：

鏈接一

鏈接二

iOS – OC 與 JS 交互六種方式總結

在 APP 中，免不了與 H5頁面打交道，所以掌握 與 JS 交互就顯的至關重要，本文總結了常見的與 JS 交互方式。

注意事項

在 OC 原生中

在 html 文件中

早期的JS與原生交互的開源庫很多都是用得這種方式來實現的，例如：PhoneGap、 WebViewJavascriptBridge 。

效果圖

使用WKNavigationDelegate中的代理方法，攔截自定義的 URL 來實現 JS 調用 OC 方法。

注意點

關於如何區分執行不同的OC 方法，也與UIWebView的處理方式一樣,通過URL 的host 來區分執行不同的方法：

JS 調用OC 方法後，有的操作可能需要將結果返回給JS。這時候就是OC 調用JS 方法的場景。

WKWebView 提供了一個新的方法 evaluateJavaScript:completionHandler: ，實現OC 調用JS 等場景。

注意點

運行結果

在iOS 7之後，apple添加了一個新的庫JavaScriptCore，用來做JS交互，因此JS與原生OC交互也變得簡單了許多。

首先導入JavaScriptCore庫, 然後在OC中獲取JS的上下文。

再然後定義好JS需要調用的方法，例如JS要調用share方法：

則可以在UIWebView加載url完成後，在其代理方法中添加要調用的share方法：

OC 調用 JS 方法有多種，首先介紹使用JavaScriptCore框架的方式。

使用JSContext 的方法 -evaluateScript ，可以實現 OC 調用 JS 方法

效果圖

使用WKWebView的時候，如果想要實現JS調用OC方法，除了攔截URL之外，還有一種簡單的方式。那就是利用WKWebView的新特性MessageHandler來實現JS調用原生方法。

創建 WKWebViewConfiguration 對象，配置各個API對應的MessageHandler。

然後在界面即將顯示的時候添加MessageHandler

需要注意的是addScriptMessageHandler很容易引起循環引用，導致控制器無法被釋放，所以需要移除MessageHandler

這裡實現了兩個協議 WKUIDelegate,WKScriptMessageHandler ， WKUIDelegate 是因為我在JS中彈出了alert 。 WKScriptMessageHandler 是因為我們要處理JS調用OC方法的請求。

WKScriptMessage 有兩個關鍵屬性 name 和 body 。

因為我們給每一個OC 方法取了一個name，那麼我們就可以根據name 來區分執行不同的方法。body 中存着JS 要給OC 傳的參數。

關於參數body 的解析，我就舉一個body中放字典的例子，其他的稍後可以看demo。

解析JS 調用OC 實現分享的參數：

message.boby 就是JS 里傳過來的參數。我們不同的方法先做一下容錯性判斷。然後正常取值就可以了。

下面只列舉一個shareClick()方法，其他看Demo

這裡使用WKWebView 實現OC 調用JS方法與之前說的文章一樣，通過

– evaluateJavaScript:completionHandler:

效果圖如下圖所示

詳情看下面文章鏈接

iOS下 JS 與 OC 互相調用(五) – UIWebView+WebViewJavascriptBridge

詳情看下面文章鏈接

iOS下 JS 與 OC 互相調用(六) – WKWebView+WKWebViewJavascriptBridge

iOS下 JS 與OC 互相調用(一) – UIWebView 攔截 URL

iOS下 JS 與OC 互相調用(二) – JavaScriptCore

iOS 下 JS 與 OC 互相調用(三) – WKWebView 攔截 URL

iOS下JS與OC互相調用(四)-MessageHandler

iOS下 JS 與 OC 互相調用(五) – UIWebView+WebViewJavascriptBridge

iOS下 JS 與 OC 互相調用(六) – WKWebView+WKWebViewJavascriptBridge

如何在IOS平台上使用js直接調用OC方法

在Cocos2d-JS v3.0 RC2中，與Android上js調用Java一樣，Cocos2d-JS也提供了在iOS和Mac上js直接調用Objective-C的方法，示例代碼如下：

1 var ojb = jsb.reflection.callStaticMethod(className, methodNmae, arg1, arg2, …..);

在 jsb.reflection.callStaticMethod 方法中，我們通過傳入OC的類名，方法名，參數就可以直接調用OC的靜態方法，並且可以獲得OC方法的返回值。

類

•參數中的類名，只需要傳入OC中的類名即可，與Java不同，類名並不需要路徑。比如你在工程底下新建一個類 NativeOcClass ，只要你將他引入工程，那麼他的類名就是 NativeOcClass ，你並不需要傳入它的路徑。

1 import Foundation/Foundation.h @interface NativeOcClass : NSObject +( BOOL )callNativeUIWithTitle:(NSString *) title andContent:(NSString *)content; @end

方法

•js到OC的反射僅支持OC中類的靜態方法。

•方法名比較要需要注意，我們需要傳入完整的方法名，特別是當某個方法帶有參數的時候，你需要將他的:也帶上。根據上面的例子。此時的方法名字是callNativeUIWithTitle:andContent:，不要漏掉了他們之間的:。

•如果是沒有參數的函數，那麼他就不需要:,如下代碼，他的方法名是 callNativeWithReturnString ，由於沒有參數，他不需要:，跟OC的method寫法一致。

1 +(NSString *)callNativeWithReturnString;

使用示例

•下面的示例代碼將調用上面 NativeOcClass 的方法，在js層我們只需要這樣調用：

1234 var ret = jsb.reflection.callStaticMethod( “NativeOcClass” , “callNativeUIWithTitle:andContent:” , “cocos2d-js” , “Yes! you call a Native UI from Reflection” );

•這裡是這個方法在OC的實現，可以看到是彈出一個native的對話框。並把 title 和 content 設置成你傳入的參數，並返回一個boolean類型的返回值。

123 +( BOOL )callNativeUIWithTitle:(NSString *) title andContent:(NSString *)content{ UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:title message:content delegate:self cancelButtonTitle:@ “Cancel” otherButtonTitles:@ “OK” , nil]; [alertView show]; return true ; }

•此時，你就可以在 ret 中接受到從OC傳回的返回值（true）了。

注意

在OC的實現中，如果方法的參數需要使用float、int、bool的，請使用如下類型進行轉換：

•float，int 請使用NSNumber類型

•bool請使用BOOL類型。

•例如下面代碼，我們傳入2個浮點數，然後計算他們的合併返回，我們使用NSNumber而不是int、float去作為參數類型。

1 +( float ) addTwoNumber:(NSNumber *)num1 and:(NSNumber *)num2{ float result = [num1 floatValue]+[num2 floatValue]; return result;}

•目前參數和返回值支持 int, float, bool, string，其餘的類型暫時不支持。