APP內嵌H5呼叫原生方法重繪token
場景：在某些app內嵌的H5頁面，H5頁面請求需要攜帶token，或者token過期需要重繪token,而token又不能通過url傳參傳入情況下，H5頁面可以通過呼叫原生的方法，讓APP給H5頁面傳入，
export const getAppToken = ()=>{
const promise = new Promise((resolve,reject)=>{
//判斷環境
var u = navigator.userAgent
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) {
console.log('當前安卓環境');
// 呼叫安卓app方法通知app重繪token并回呼本地方法
//（window.android.getToken()是與安卓開發約定好的他把getToken這個方法掛載到H5的window.android上）
window.android.getToken()
} else if (isiOS) {
console.log('當前IOS環境');
// 呼叫蘋果app方法通知app重繪token并回呼本地方法
//（與ios開發約定好的方法名getToken，.postMessage("獲取token")是傳參）
window.webkit.messageHandlers.getToken.postMessage("獲取token");
}
//注冊掛載全域方法等待app回呼后resolve就可進行操作了
window.getIosToken=(token) => {
localStorage.setItem("testtkoen", token);
resolve();
};
})
return promise
}
代碼原理：先判斷蘋果或者安卓系統，呼叫對應的原生APP方法，呼叫該方法后通知原生應用重繪token后再呼叫H5的方法進行傳參（H5的方法掛在windows上APP可以直接呼叫）
用promise封裝是為了獲取到token后進行請求（我這app重繪token并回呼回來是異步的有時間差）
整套業務邏輯（vue為例）
<template>
<div class="test">
</div>
</template>
<script>
import { getAppToken } from "../utils/getAppToken";
export default {
data() {
return {
};
},
methods: {},
created() {
getAppToken().then(() => {
//這里發送請求
});
},
};
</script>
<style>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/316674.html
標籤：其他