一，原生H5通過webview實現在原生app里顯示h5網頁(WebView(網絡視圖)能加載顯示網頁，可以將其視為一個瀏覽器。它使用了WebKit渲染引擎加載顯示網頁)
1,h5傳值給原生頁面方法：
定義一個方法判斷終端是ios還是安卓：
var isIos = judgeIosAndroid();
if (isIos == true) {
window.webkit.messageHandlers.goSubmittedClick.postMessage(null)//ios傳值方法postMessage（val）傳值方式
} else {
window.android.goSubmitted()//ios傳值方法goSubmitted（val）傳值方式
}
/*判斷是ios還是安卓*/
function judgeIosAndroid(){
var u = navigator.userAgent,
app = navigator.appVersion,
isIOS ;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isAndroid){
isIOS = false
}else if(isiOS){
isIOS = true
}
return isIOS
}
2.原生傳值給H5方法：
在全局中定義一個方法:
function removeData(data) {
alert(data)
}
//原生會直接調用這個方法並把值傳進來，就可以獲取到值；
二，我在開發中所遇到的坑和bug；
1.token的傳值和存儲（在調用接口時需要傳入token在header來進行登錄和角色驗證）；
在原生登錄后將token傳給一個空頁面並隱藏起來（原生來操作），傳值方式同上，在h5將token值存在本地；
axios.interceptors.request.use((config) => {
// 這里的config包含每次請求的內容
// let token = JSON.parse(localStorage.getItem('token'));
if (token) {
config.headers.common['Authorization']= `Bearer ${token}`;
}
return config;
}, (err) => {
return Promise.reject(err);
});
這里 最好跟原生溝通讓他們將值得類型統一，json的鍵值對形式，或是json字符串，方便前端統一；
調試時前端頁面無法在瀏覽器看到數據，只能通過原生的app來調試（有什么好方法望告，只是我沒找到好的方法）；
2.h5定義方法只能在全局中定義，在vue的methed中定義無法獲取；
3.如何將從原生獲取來的數據賦值給vue（目前找到兩種方法）；
//全局定義的變量，
var outData = {
arr：[]
}
var app =new Vue({
el: '#app',
data:outData,
})
//全局定義的方法，
function removeData(data) {
outData.number=data;//通過改變全局變量來改變vue的data，實現數據更新
}
//方法2
在mounted中使用循環將全局方法獲取的值賦值給vue的data；
setInterval(() => {
this.dataObj = dataObj;
}, 500)