摘要:一旦使用了那么就少不了和原生開發的一些交互如下的方案能夠幫助你解決。其實現原理是原生在的對象中注入一個方法,以備原生應用進行處罰觸發,就和我們平時去調用的方法一樣簡單。代碼常用調用原生的方式都在這里體現。
場景1
在原生app中經常會使用到H5頁面,比如說電商中的活動頁,一些電商中的詳情頁,等等...這些頁面都有一個特點,那就是在未來修改的可能性,和一次性的幾率特別的大。所以用H5的頁面是最睿智的一種選擇。
一旦使用了H5那么就少不了和原生開發的一些交互(Android, IOS)如下的方案能夠幫助你解決。
其實現原理是原生在js的window對象中注入一個js方法,以備原生應用進行處罰觸發,就和我們平時去調用onclick的方法一樣簡單。
js代碼:
// mobile/index.js 常用js 調用原生的方式都在這里體現。 export default { /** * 調用移動端方法 * * @param {*} {name, params, call} 移動端注入的方法名 | 參數 | 回調 */ callMoblieMethods({name, params, call}){ // 移動端安卓的環境 if(window.android) { // 移動端使用java所以不能直接解析json,只能解析字符串或者json字符串 window.android[name](JSON.stringify(params)); } // 移動端IOS的環境 if(window.webkit && window.webkit.messageHandlers) { window.webkit.messageHandlers[name].postMessage(params); } } }
調用方式
if(window.android || (window.webkit && window.webkit.messageHandlers.activityDetails)) { mobile.callMoblieMethods({ name: "activityDetails", params: {activityId: item.act_id}}); }
這個判斷條件大家看起來可能很詭異,我測試過這各種機器的機型,安卓機window肯定是沒有的屬性,但是在IOS上他會自帶webkit屬性所以我們先判斷他是否有webkit屬性在判斷他是否有注入的方法名這樣他就能很好的調用這個方法了;
為了方便大家查找這里也附上移動端的代碼:
//Android public class AndroidJavascriptInterface { Activity mActivity; public AndroidJavascriptInterface(Activity activity) { this.mActivity = activity; } //診所詳情 @JavascriptInterface public void clinicDetails(String jsonData) { Log.i("znh", "H5-JS-診所詳情"); Intent intent = new Intent(mActivity, OutPatientActivity.class); Bundle bundle = new Bundle(); bundle.putString(Constants.CLINIC_ID, GsonUtil.getJSONObjectKeyVal(jsonData, "clinicId")); intent.putExtras(bundle); mActivity.startActivity(intent); } //活動詳情 @JavascriptInterface public void activityDetails(String jsonData) { Log.i("znh", "H5-JS-活動詳情"); Intent intent = new Intent(mActivity, ActivityDetailActivity.class); Bundle bundle = new Bundle(); bundle.putString("id", GsonUtil.getJSONObjectKeyVal(jsonData, "activityId")); intent.putExtras(bundle); mActivity.startActivity(intent); } } //IOS #importWKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init]; [wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"]; [wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"];
通過這個流程大家就能很方便的調用原生的方法了。
場景2我們需要在短信中使用某個鏈接去打開原生應用如果沒有那么就會提示他去下載某個應用,首先原生的應用需要定義一個url鏈接以備前端程序員在瀏覽器中調用,先給大家看一下鏈接示例:
// IOS iOSStarClinic:// // Andriod yjjkyl://starclinic
短小精悍,你只需要調用這個就可以了
那么在js中要怎么做呢?
if(this.isIOS) { window.location.href = "iOSStarClinic://";//與APP約定的一個協議URL } else { var state = null; try { state = window.open("yjjkyl://starclinic", "_blank");//與APP約定的一個協議URL } catch(e) {} if (state) { window.close(); } else { window.location.href = gbs.patientDownUrl; } }
先判斷一下當前是IOS還是安卓環境,其實現在的瀏覽器已經不能通過偏方(計時的方法)來解決檢查當前時候有沒有安裝應用了,因為瀏覽器會彈出提示框用戶確認才能跳轉所以用戶一旦不點擊確認那么瀏覽器就會進行跳轉!所以在當前頁應該要給用戶顯示一些內容以便用戶未打開應用的時候有其他的業務流程。
-完-
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/99116.html
摘要:歡迎使用中文文檔架構概覽是網易項目團隊開發的一個基于進行開發的應用層框架,提供了一個輕量級的容器來編寫簡單可維護的。 JavaScript 可以……嘛,不就是操作一下 DOM,可以讓元素飛來飛去嗎JavaScript 是……不就是用 jQuery 讓網頁動起來,頂多就是再用用 Ajax 和后端進行一下數據交換嗎JavaScript 是一門……最討厭和鄙視這種弱類型不需要編譯的腳本語言...
摘要:后續我們還會增加一些實戰類的移動開發案例,歡迎關注專欄。進入官網新版預覽在線預覽需要使用開啟設備模擬,效果更佳。 前言 之前寫過一篇 2018開發最快的Webapp框架--BUI交互框架 ,如果你還沒看過,可以簡單看一下,主要介紹了BUI的基本功能,有多少控件,以及實現的思路,BUI 1.5版本以后變化很大,統一新的風格,新的規范750,新增基于Dom的數據驅動,完善了頁面的生命周期等...
摘要:原生應用是一個基于引擎的運行環境使用了一個事件驅動非阻塞式的模型,使其輕量又高效的包管理器,是全球最大的開源庫生態系統本文主要介紹構建一個應用的基本步驟和模塊,并假定你已經對有一定的了解本文引用部分代碼作為例子,如果希望參看全部源碼,歡迎去 原生 Node.js 應用 Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境Node.js 使用了一個事件驅...
閱讀 1599·2021-11-22 09:34
閱讀 1690·2019-08-29 16:36
閱讀 2668·2019-08-29 15:43
閱讀 3113·2019-08-29 13:57
閱讀 1297·2019-08-28 18:05
閱讀 1874·2019-08-26 18:26
閱讀 3242·2019-08-26 10:39
閱讀 3454·2019-08-23 18:40