一，原生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)