vue如何判斷安卓還是IOS

更新時間：2022年04月12日 17:05:07 作者：周小盜

這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue判斷安卓還是IOS

最近工作上遇到這樣一個需求

vue寫的頁面，需要同時跟安卓和ios進行交互；

若是安卓，執(zhí)行代碼：android.finishActivity();
若是IOS，執(zhí)行代碼：

try {?
?window.webkit.messageHandlers.finishActivity.postMessage("");?
?}catch(error) {?
?console.log('WKWebView post message');
}

所以我們需要進行一個判斷

是安卓還是IOS：因為是做的單獨的APP所以沒有考慮微信的問題

finishActivity() {
? ? ? ? let ua = navigator.userAgent.toLowerCase();
? ? ? ? //android終端
? ? ? ? let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;?
? ? ? ? //ios終端
? ? ? ? let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
? ? ? ??
? ? ? ? ? if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
? ? ? ? ? ? //ios
? ? ? ? ? ? console.log(" 我是ios")
? ? ? ? ? ? //這里是和IOS商量好的寫法，調用IOS的finishActivity方法
? ? ? ? ? ? try {?
? ? ? ? ? ? ? window.webkit.messageHandlers.finishActivity.postMessage("");?
? ? ? ? ? ? }catch(error) {?
? ? ? ? ? ? ? ? console.log('WKWebView post message');
? ? ? ? ? ? ? }
? ? ? ? ? } else(/(Android)/i.test(navigator.userAgent)) {
? ? ? ? ? ? //android
? ? ? ? ? ? console.log("我是android")
? ? ? ? ? ? //這里是和安卓商量好的寫法，調用安卓的finishActivity方法
? ? ? ? ? ? android.finishActivity(); ? ? ? ? ? ?
? ? ? ? ? } ? ? ??
? }

然后就可以一個頁面同時給安卓和IOS進行交互啦！

H5端判斷安卓跟ios顯示不同的背景圖

html:

<div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div>

css:

? ? .index-cont{
? ? ? ? width: 100%;
? ? ? ? height: auto;
? ? ? ? min-height: 100vh;
? ? ? ? overflow-x:hidden;
? ? ? ? background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg3.png") no-repeat;
? ? ? ? background-size: contain;
? ? ? ? margin: 0;
? ? ? ? padding-bottom: 199%;
? ? ? ? // position: fixed;
? ? }
? ? .index-cont-phone{
? ? ? ? width: 100%;
? ? ? ? height: auto;
? ? ? ? min-height: 100vh;
? ? ? ? overflow-x:hidden;
? ? ? ? background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg4.png") no-repeat;
? ? ? ? background-size: contain;
? ? ? ? margin: 0;
? ? ? ? padding-bottom: 199%;
? ? ? ? // position: fixed;
? ? }

js:

<script>
export default {
? ? name: "index",
? ? data() {
? ? ? ? return {
? ? ? ? ? ? isApple:true,
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ?},
? ? ?methods: {
? ? ? ?// 判斷是安卓還是ios
? ? ? ? appDown() {
? ? ? ? ? ? var u = navigator.userAgent;
? ? ? ? ? ? var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
? ? ? ? ? ? var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
? ? ? ? ? ? if(isiOS){
? ? ? ? ? ? ? ? this.isApple = true
? ? ? ? ? ? }else if(isAndroid){
? ? ? ? ? ? ? ? this.isApple = false
? ? ? ? ? ? }
? ? ? ?},
? ?mounted() {
? ? ? ? ? // 調用判斷ios與安卓方法
? ? ? ? this.appDown();
? ? },
?}
</script>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: