在router钩子函数中获取到安卓传过来的token值
function getGetToken(call) {
window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.send(
'webGetToken'
, function (responseData) {
try {
localStorage.setItem('userToken', JSON.parse(responseData).data.userToken)
localStorage.setItem('uid', JSON.parse(responseData).data.userId)
} catch (e) {
}
call()
}
)
}
router.beforeEach((to, from, next) => {
if (to.meta && to.meta.openNewWeb) {
if (window.WebViewJavascriptBridge) {
// h5页面通过路由进行跳转的时候
// 安卓环境下执行此方法跳转,否则执行默认
window.WebViewJavascriptBridge.callHandler('openNewWeb', {
statusBarProcessing: false,
url: location.origin + location.pathname + '#' + to.path
}, function (responese) {
})
} else {
var u = navigator.userAgent
if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
if (!window.WebViewJavascriptBridge) {
document.addEventListener('WebViewJavascriptBridgeReady', function () {
getGetToken(() => {
next()
})
})
} else {
getGetToken(() => {
next()
})
}
} else {
next()
}
}
}
})
export default router
h5的返回按钮也需要调用安卓的方法
// 关闭页面
export function finishPage() {
console.log(window.WebViewJavascriptBridge)
if (window.WebViewJavascriptBridge) {
window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('finishPage', function (data, callback) {
callback(data)
})
} else {
router.go(-1)
}
}
上传图片
<script>
methods: {
// 打开安卓相册
// key是限制选择的图片数量
getViewBrige(key) {
console.log("key" + key);
window.WebViewJavascriptBridge &&
window.WebViewJavascriptBridge.callHandler(
"openCamera",
{ maxSelectNum: "" + key },
function (data, responseCallback) {
responseCallback(data);
}
);
},
getImgList() {
// 获取到安卓传过来的图片
// 图片是以base64的形式传过来的,这样才能预览
window.WebViewJavascriptBridge &&
window.WebViewJavascriptBridge.registerHandler(
"cameraResult",
(data, responseCallback) => {
// console.log(JSON.parse(data).imgs)
// 将传过来的图片存起来
let imgs = JSON.parse(data).imgs;
for (let i = 0; i < imgs.length; i++) {
console.log(i);
let list = {
url: "",
status: true,
id: randomString(6),
};
list.url = imgs[i];
this.fileList.push(list);
}
}
);
},
},
// 生产随机字符串
randomString(length) {
const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
var result = ''
for (var i = length; i > 0; --i) { result += str[Math.floor(Math.random() * str.length)] }
return result
}
</script>
监听传过来的图片进行上传
watch: {
fileList: {
handler(val, oldVal) {
val.forEach((item) => {
if (item.status == true) {
this._uploadFile(item);
}
});
console.log(val);
// 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
},
deep: true,
},
},
// 上传图片接口
async _uploadFile(list) {
const formdata = new FormData();
formdata.append("File", base64File(list.url, randomString(6) + ".jpg"));
await uploadFile(formdata)
.then((res) => {
let imgsData = {
id: list.id,
url: res.re.data,
};
if (res.re.status == 1) {
list.status = false;
// 保存上传后的地址
this.uploadImgList.push(imgsData);
}
if (res.re.status == 0) {
list.status = false;
this.$toast("上传失败,请重新上传");
this.fileList = this.fileList.filter((item) => {
return item.id != list.id;
});
}
})
.catch((err) => {
console.log(err);
});
},
// base64转file
export function base64File(dataurl, filename) {
var arr = dataurl.split(',');
var mime = arr[0].match(/:(.*?);/)[1]
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, { type: mime })
}