標籤:觸屏 ima console 靜態 style 解決 載入 也會 並且
今天做了一個html的活動頁面,本來馬上就要完工,準備開開心心收尾,結果~...
產品突然提出需要說,要講html中的某些互動和APP原生組件掛鈎,心裡一萬頭xxx奔過~
靜下心來思考
以往我們是判斷是否用戶端開啟都依賴於後端,通過app主動拼接參數的方式,傳遞給後端,後端告訴前端本次的載入是在app裡還是app外,實現頁面的特殊功能
那我們發現,這個方式環節和局限性太多,我們無法保證用戶端一定能夠每個觸屏頁面都拼接我們需要的參數,而且我們的觸屏頁面有很多種,有的是活動需要的,有的是動態,有的是靜態
而且APP裡頭有很多途徑可以開啟,而且新的功能頁面還在持續增加,這樣就導致我們每次開發前必須定對好,確保它的正確性,缺乏容錯性,並且缺乏安全性,而且如果用戶端已經發布將只能重新發布進行修正
那麼我們能不嫩通過更簡單的方式直接通過 前端對用戶端 的方式來實現呢,答案肯定是可以的~,下面還是從產品的需求說起。
產品要求某個靜態資源頁面中的某些串連,在app外開啟的時候跳轉的是正常的觸屏頁面,在app中開啟的時候則跳轉app的原生互動頁,咋一聽,需求咋這麼變態呢~
如果利用以往的方式,我們就得把這些頁面轉化為動態頁面,而且還得和用戶端進行協定處理,工作量又被增加,開發效率降低,而且頁面效能也會受影響。
這導致我必須尋求一種新的解決方案。
首先,我用靜態頁調取了一個客戶的提供的js方法,提示
is not defined
什麼鬼呢,一般我們見到的都是
undefined
那什麼是is not defined?
從字面意思上來講就是未定義,也就是未申明。就是這個變數(對象)壓根就沒有,如下:
console.log(abc);//abc is not defined
可能還一知半解,我們繼續往下看。
is not defined 和 undefined 區別。
我們大多數人都知道 undefined ,卻不知道 defined , undefined 是未定義,如下:
var abc;console.log(abc);//undefinedconsole.log(abc.a);//so.a is undefined
這個時候輸出的是 undefined 。訪問變數的屬性就會提示is undefined 就是這個變數so 未定義值(類型);
而defined 呢,如下:
console.log(abc);//abc is not defined
其實如果理解一下其實就是未申明。也就是可以理解對象使用的過程是,先聲明後賦值,在賦值的過程中確定了這個的類型。
所以總結一下:is not defined 優先於 undefined ,也就是先判斷這個對象是否申明了,如果沒申明直接就 is not defined,如果已經申明,那麼再看有沒有賦值(類型),如果沒有那麼就是 undefined 或者 訪問對象的屬性就是 is undefined 。
如何判斷 undefined,undefined 很好判斷,如下:
var abc;console.log(abc == undefined);//trueconsole.log(abc === undefined);//true;console.log(typeof abc == ‘undefined‘);//trueconsole.log(typeof abc === ‘undefined‘);//trueconsole.log(!abc);//true
等等,有很多方式,但是這些都不是我需要的啊,如何判斷is not defined,這個才我們今天的重點.. ,直接上代碼..
try { //調取用戶端方法;} catch (e) { location.href = ‘‘;//跳轉觸屏版地址}
是不是很簡單,很高效,我們利用瀏覽器如果程式出現錯誤,會拋出異常的特性,來捕獲這個操作,執行我們指定的操作;
至此,我們得到相對完美的解決方案,又一次提升了自己,O(∩_∩)O哈哈~
接下來我們遐想一下
那我們是不是可以讓將全部的前端和用戶端互動的操作利用這樣的方式實現呢?
首先,用戶端定義一個被觸屏調用的js方法,這個方法的作用就是告訴用戶端,你是在我的用戶端開啟的
然後,觸屏調用這個方法,如果成功則將頁面互動處理為在用戶端的模式,如果失敗則處理為觸屏版的模式
這樣處理是不是更方便呢,不知大家還有什麼更好的方式呢~~~~
By Hgq
前端判斷是否APP用戶端開啟觸屏,實現跳轉APP原生組件互動之遐想