本文目錄一覽:
- 1、原生APP中js怎樣與Android和ios進行交互
- 2、android(ios)設備通過js打開手機上存在的app….
- 3、如何啟用javascript在Safari和iOS設備
- 4、如何在iOS和Android上選擇一個JavaScript 引擎進行應用開發
- 5、怎麼在手機端用js啟動迅雷app?ios和Android分別怎麼啟動?
- 6、iOS – OC 與 JS 交互六種方式總結
原生APP中js怎樣與Android和ios進行交互
Android的webview是基於webkit內核的,webview中集成了js與java互調的介面函數,通過addJavas criptInterface方法,可以將Java的類註冊進webkit,給網頁上的js進行調用,而且還可以通過loadUrl方法是給webkit傳遞一個URL,供瀏覽器來進行解析,實現Java和js交互。要想運行網頁上的js腳本,webview必須設置支持Javas cript。Java代碼1mWebview.getSettings().setJavas criptEnabled(true);然後是設置webview要載入的網頁:web的網頁:webView.loadUrl(“”);本地的網頁:webView.loadUrl(“”); //本地的存放在:assets文件夾中webview做完基本的初始化後咱們還要要給它,加進一個回調的代理類Javas criptInterface,並給它一個調用的名稱:ncpJava代碼1mWebView.addJavas criptInterface(new Javas criptInterface(),”ncp”);Javas criptInterface可以是一個普通的Java類,類實現的方法,均可被js回調:Java代碼final class Javas criptInterface {public int callOnJs() {return 1000;}public void callOnJs2(String mode) {//TODO}}Java要調用js的方法,只需知道js的方法名稱即可:Java代碼1mWebView.loadUrl(“javas cript:onSaveCallback()”);js 這邊就更簡單:Js代碼window.onload = function(){document.getElementById(‘btn_1’).addEventListener(‘click’, onBtnClick, false);var _int_value = window.ncp.callOnJs();alert(“get int from java:” + _int_value );}function onBtnClick() {window.ncp.callOnJs2(“click”);}
android(ios)設備通過js打開手機上存在的app….
找一下appcan或者phonegap框架,這兩個都有本地化的JS庫可以進行你要的操作
如何啟用javascript在Safari和iOS設備
1. 隨著在MacOS上的Safari。點擊Safari菜單,選擇”Preferences…”(或按Command+,)
如果您使用的是Windows上的Safari。點擊Gear icon,選擇”Preferences”。
2. “Preferences”窗口中選擇”Security”選項卡。
“Security”選項卡部分”Web content”標記”Enable JavaScript”複選框。
3. 關閉Preferences彈出窗口,並刷新您的網頁。
適用於iOS的Safari瀏覽器中的JavaScript啟用(iphone, ipod, ipad)
1. 命中Settings圖標。
2. 向下滾動,直到您看到”Safari”點擊它調出選項頁。
3. “JavaScript”選項,打開你做了iOS上的Safari中啟用JavaScript。
如何在iOS和Android上選擇一個JavaScript 引擎進行應用開發
在我開始使用OpenAphid-Engine的時候,已經有幾種類似的iOS/Android 項目.這些商業項目或者開源項目使用JavaScript實現代碼特性。比如,Titanium 和PhoneGap 允許開發者使用JavaScript開發本地 iOS/Android apps;ngCore 更是可以使用純正的JavaScript構建跨平台的遊戲。JavaScript已經成為了編程語言中的佼佼者,也因為更容易學習吸引了眾多開發者參與到這一領域。
怎樣在IOS/Android上使用JavaScript
主要有兩種方法。一種是使用系統的瀏覽器組件(IOS中的UIWebView和Android中的WebView),另一方法就是使用整合好的JavaScript引擎。
使用系統的瀏覽器組件比較容易實現但是更複雜,效率也低。 WebView提供了 addJavascriptInterface 把Java classes注入到JavaScript文本的方法。但是它只支持最原始的幾種數據類型,因此也局限了API設計。並且在Android 2.3模擬器上不穩定,在真機上也會遇到 issue #12987的問題。在IOS上更糟 UIWebView沒有公共的APIs支持JavaScript到Objective-C的交互(你必須使用似有的APIs才能達到與addJavascriptInterface相同的功能)。
PhoneGap 是基於 UIWebView and WebView的比較出名的項目。開發者被迫使用回調函數從JavaScript APIs得到返回值。這在遊戲上效率極低,也更為複雜。
早期的ngCore同樣依賴UIWebView來支持iOS。但是這個機制由於其糟糕的表現被取代。
為了獲得更好的表現、靈活性、兼容性,嵌入全功能的JavaScript引擎變得更為有效。
選擇JavaScript 引擎
據我所知,iOS 或 android 上能夠運行的JavaScript 引擎有4個: JavaScriptCore, SpiderMonkey, V8 and Rhino.下面這個表格展示各個引擎在iOS 和 Android 的兼容性
當我設計 OpenAphid-Engine 成為一個合適的Javascript的引擎的時候,我主要考量以下指標:
兼容性:同時支持iOS 和 Android 在x86 和 ARM 平台上的 模擬器和 設備。
穩定性. 穩定的運行在對應的平台和CPU的架構上。
擴展性. 能夠很方便的利用本地特性進行擴展。例如OpenAphid-Engine 通過一個橋接層,實現了通過Javascript 進行OpenGL ES 的使用。
性能好:一個快速的Javascript 引擎主要歸結為兩個因素:有效的綁定機制和進行較低的開銷。. OpenAphid-Engine 在渲染一幀頁面的時候通過JavaScript觸發數百個OpenGL ES調用來進行渲染。這點是非常有意義的,如果只是把開銷放到單純的執行JavaScript上進行將會導致渲染很慢,。
體積小.:在內存的佔用上和自身的執行文件上都要比較小。
Rhino和 V8出現的最早,但是不支持iOS。我非常希望可以使用 V8開發 OpenAphid-Engine ,在初次使用時就發現它擁有優雅的代碼結構,良好的表現,但是我非常失望,因為 V8隻能在JIT模式下使用,而IOS不支持。除非你使用jailbroken設備。(詳情請參考 issue #1312)
我在JavaScriptCore和SpiderMonkey間糾結了很久。在成功部署了Android和IOS項目後,我通過實驗找到更好的一個。
SpiderMonkey 容易得到開發許可權,但是在與JavaScriptCore比較時甘拜下風。SpiderMonkey產生了大量的二進位文件 (在ARMv7上大約1.3MB);JavaScript執行得更慢,在JavaScript和C++的橋接表現更為重要。另外一個讓我遠離SpiderMonkey的原因是在iOS模擬器上出現隨機崩潰現象。
JavaScript引擎會受很多東西影響,比如交叉編譯器的版本、引擎的版本和操作系統的種類等。下表列舉了幾種運行在iPod Touch 4上引擎的運行時間。(有興趣請於Google Doc查看精確的時間)
JavaScriptCore 大比分領先。
我沒有找到SpiderMonkey,所以就使用了下面的三種自定義搭建Cocos2d-iPhone-2.1-beta4, Cocos2d-x-2.1-beta3和iMonkey。
所有測試的apps都基於LLVM 4.1版本,所有的引擎都運行在解釋器模式(iOS受限)。
幾種基準的介紹:
1m-js_loop執行空循環一百萬次。
1m-native_function請求調用一百萬次返回undefined的本地函數
1m-js_function跟上面一個相同,只是換成了JavaScript。
fib(30)遞歸的方式計算Fibonacci(30)。
sudoku-5用這裡的演算法解決Sudoku問題。
1m-native_function JavaScriptCore使用可移植的C APIs實現,當然這不是最有效引入本地函數的方法。
SpiderMonkey 在台式電腦上由於高級的JIT追蹤方法運行更快,但是在IOS設備上卻與之相反。
在大部分的基準上,使用iMonkey比SpiderMonkey更快
很明顯的,使用SpiderMonkey將會在iOS上獲得更好的表現。ngCore 1.10在iOS上加入自定義功能,所以要更優於像SpiderMonkey這樣的變體。
對於JavaScript Code 的挑戰
在我專心於 JavaScriptCore之後,我的研究更進了一步:
1. 它在運行 一百萬 次 native_function和 一百萬次Math.abs(0) 的時間六倍於 使用 JavaScriptCore.我觀察到同樣的性能問題出現在通過注入的方式訪問對象的屬性。
2. 利用 C APIs 進行設計雖然開發簡單,但是缺乏靈活的內存管理機制。缺乏一個高級的內部垃圾回收機制很難解決類似於 circular references 的問題。
3. 眾多的 JavaScriptCore 正式版本都是可用的 。 不過 OpenAphid-Engine 是更好的一個,它不但速度快,而且相當小。
我拋棄了原來的使用 C APIs 方案因此解決了 問題 1 和 2. 使用的JSC 版本來自於iOS4.3.3,因為同樣在解析器模式下這個版本相比來自於iOS 5 的版本更快,執行文件更小。
在其他產品上使用的JS引擎
在開發OpenAphid-Engine期間,我一直保持對其他引擎的關注,以下這個表格總結了其他JS引擎的使用情況
怎麼在手機端用js啟動迅雷app?ios和Android分別怎麼啟動?
JavaScript是前端開發的主要語言,我們可以通過編寫JavaScript程序來判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法,一種是根據各種瀏覽器獨有的屬性來分辨,另一種是通過分析瀏覽器的userAgent屬性來判斷的。在許多情況下,值判斷出瀏覽器類型之後,還需判斷瀏覽器版本才能處理兼容性問題,而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道。
瀏覽器類型
⑴瀏覽器特有屬性
⑵根據userAgent
瀏覽器版本
⑴根據userAgent
對於手機瀏覽器判斷
1.如何判斷是否為移動終端 利用正則match,
匹配navigator.userAgent是否含有字元串AppleWebKit*****Mobile
安卓qq瀏覽器HD版 只有AppleWebKit
2手機語言版本的判斷
使用navigator.browserLanguage 便可得出windows phone語言版本,
當然可惡的小小手機語言版本也有兼容性的差異,兼容Mozilla,以及AppleWebKit內核的瀏覽器訪問其語言版本,它會列出 navigator.language
CODE:
script type=”text/javascript”
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return { //移動終端瀏覽器版本信息
trident: u.indexOf(‘Trident’) -1, //IE內核
presto: u.indexOf(‘Presto’) -1, //opera內核
webKit: u.indexOf(‘AppleWebKit’) -1, //蘋果、谷歌內核
gecko: u.indexOf(‘Gecko’) -1 u.indexOf(‘KHTML’) == -1, //火狐內核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
android: u.indexOf(‘Android’) -1 || u.indexOf(‘Linux’) -1, //android終端或uc瀏覽器
iPhone: u.indexOf(‘iPhone’) -1 , //是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf(‘iPad’) -1, //是否iPad
webApp: u.indexOf(‘Safari’) == -1 //是否web應該程序,沒有頭部與底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln(“語言版本: “+browser.language);
document.writeln(” 是否為移動終端: “+browser.versions.mobile);
document.writeln(” ios終端: “+browser.versions.ios);
document.writeln(” android終端: “+browser.versions.android);
document.writeln(” 是否為iPhone: “+browser.versions.iPhone);
document.writeln(” 是否iPad: “+browser.versions.iPad);
document.writeln(navigator.userAgent);
/script
比較特別的地方
UC瀏覽器沒有安卓報頭,只返回:linux ,這裡粗略的根據linux來判斷是安卓(前提必須滿足是移動終端,UC這點是滿足的)
安卓QQ瀏覽器HD版檢測的結果是:mac, Safari
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
原創文章,作者:A18WL,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/130671.html