場景1
在原生app中經(jīng)常會使用到H5頁面鉴竭，比如說電商中的活動頁柿估，一些電商中的詳情頁循未，等等...這些頁面都有一個特點，那就是在未來修改的可能性秫舌，和一次性的幾率特別的大的妖。所以用H5的頁面是最睿智的一種選擇。
一旦使用了H5那么就少不了和原生開發(fā)的一些交互（Android, IOS）如下的方案能夠幫助你解決足陨。
其實現(xiàn)原理是原生在js的window對象中注入一個js方法嫂粟，以備原生應(yīng)用進行處罰觸發(fā)，就和我們平時去調(diào)用onclick的方法一樣簡單墨缘。
js代碼：
// mobile/index.js 常用js 調(diào)用原生的方式都在這里體現(xiàn)赋元。
export default {
/**
* 調(diào)用移動端方法
*
* @param {*} {name, params, call} 移動端注入的方法名 | 參數(shù) | 回調(diào)
*/
callMoblieMethods({name, params, call}){
// 移動端安卓的環(huán)境
if(window.android) {
// 移動端使用java所以不能直接解析json,只能解析字符串或者json字符串
window.android[name](JSON.stringify(params));
}
// 移動端IOS的環(huán)境
if(window.webkit && window.webkit.messageHandlers) {
window.webkit.messageHandlers[name].postMessage(params);
}
}
}
調(diào)用方式
if(window.android || (window.webkit && window.webkit.messageHandlers.activityDetails)) {
mobile.callMoblieMethods({ name: 'activityDetails', params: {activityId: item.act_id}});
}
這個判斷條件大家看起來可能很詭異，我測試過這各種機器的機型飒房，安卓機window肯定是沒有的屬性，但是在IOS上他會自帶webkit屬性所以我們先判斷他是否有webkit屬性在判斷他是否有注入的方法名這樣他就能很好的調(diào)用這個方法了媚值；
為了方便大家查找這里也附上移動端的代碼：
//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
#import <JavaScriptCore/JavaScriptCore.h>
WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"clinicDetails"];
[wkWebConfig.userContentController addScriptMessageHandler:self name:@"activityDetails"];
通過這個流程大家就能很方便的調(diào)用原生的方法了狠毯。
場景2
我們需要在短信中使用某個鏈接去打開原生應(yīng)用如果沒有那么就會提示他去下載某個應(yīng)用，首先原生的應(yīng)用需要定義一個url鏈接以備前端程序員在瀏覽器中調(diào)用褥芒，先給大家看一下鏈接示例：
// IOS
iOSStarClinic://
// Andriod
yjjkyl://starclinic
短小精悍嚼松，你只需要調(diào)用這個就可以了
那么在js中要怎么做呢？
if(this.isIOS) {
window.location.href = 'iOSStarClinic://';//與APP約定的一個協(xié)議URL
} else {
var state = null;
try {
state = window.open('yjjkyl://starclinic', '_blank');//與APP約定的一個協(xié)議URL
} catch(e) {}
if (state) {
window.close();
} else {
window.location.href = gbs.patientDownUrl;
}
}
先判斷一下當(dāng)前是IOS還是安卓環(huán)境锰扶，其實現(xiàn)在的瀏覽器已經(jīng)不能通過偏方（計時的方法）來解決檢查當(dāng)前時候有沒有安裝應(yīng)用了献酗，因為瀏覽器會彈出提示框用戶確認(rèn)才能跳轉(zhuǎn)所以用戶一旦不點擊確認(rèn)那么瀏覽器就會進行跳轉(zhuǎn)！所以在當(dāng)前頁應(yīng)該要給用戶顯示一些內(nèi)容以便用戶未打開應(yīng)用的時候有其他的業(yè)務(wù)流程坷牛。
-完-
