国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

怎么在網頁中打開你的app

SKYZACK / 1684人閱讀

摘要:很好的一個屬性,因為通過這個屬性在上我們能夠繞過微信的攔截從而打開。微信中打開至此只有微信是打不開的,實際上騰訊系的產品都是打不開的,包括瀏覽器。簡而言之,騰訊的產品中都去借助應用寶這個平臺去執行你需要的操作。

先聲明一下關于ios中9.0打開方式的文章來自博客:IOS9通用鏈接(universal link)

前言

對于一個完備的互聯網產品而言需要有app端與web端兩個不同前端,對于產品而言很多都希望能夠將wap頁上的用戶引向native app上這就要求前端工程師們為網頁提供各種入口去打開app,今天我們就聊一聊app的打開方式(有錯誤的地方還請高手指正)。

常規打開

對于app打開而言最常規的打開就是通過url scheme的方式去打開你的app,如下的

myapp://
myapp://open
myapp://type=1&id=2sdeo223lwe

這些拋出都是以url的方式進行拋出,app捕捉到這些拋出去做相應的處理,本文對app的處理不做詳細描述,app開發請自行谷歌百度。對于前端而言拋出的方式也有很多,而最理想的方式是通過iframe的src對其進行鏈拋出,來!說的在多都沒有代碼來的清晰,請看下面。

首先我們需要有一個iframe:

//實際上就是新建一個iframe的生成器
var  createIframe=(function(){
  var iframe;
    return function(){
        if(iframe){
            return iframe;
        }else{
            iframe = document.createElement("iframe");
            iframe.style.display = "none";
            document.body.appendChild(iframe);
            return iframe;      
        }
    }
})()

之后我們還需要一個url scheme:

//生成一個url scheme,假設我們約定的scheme是myApp://type=1&id=iewo212j32這種形式的

var baseScheme = "myApp://"
var createScheme=function(options){
    var urlScheme=baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + "=" + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return encodeURIComponent(urlScheme);
}

這種scheme形式的其實不是最好的,根據我們踩過的坑,覺得約定為與http協議相近可能更好一些,具體的協議需要前端人員自己去和app端人員約定。

ok萬事具備,iframe有了,urlScheme也有了,該去打開app了

var openApp=function(){
    var localUrl=createScheme();
    var openIframe=createIframe();
    if(isIos()){
        //判斷是否是ios,具體的判斷函數自行百度
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下載頁面";
            }
        }, 25);
    }else if(isAndroid()){
        //判斷是否是android,具體的判斷函數自行百度
        if (isChrome()) {
            //chrome瀏覽器用iframe打不開得直接去打開,算一個坑
            window.location.href = localUrl;
        } else {
            //拋出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }else{
        //主要是給winphone的用戶準備的,實際都沒測過,現在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }
}

以上就是你要打開scheme的主要代碼了,好吧,實際上不只是打開app,還要實現未打開的時候跳到下載頁去。其中安卓實際上無論有沒有打開都會跳到下載頁去,而ios........好吧!按照網上的說法是瀏覽器失焦后會掛起腳本,呵呵,這是多老的ios版本的表現了,實際上現在的ios已經沒有這么做,有些版本會跟安卓的表現一樣,而有些則是直接跳轉根本不會去打開,還有打開的時候那個惡心的系統彈窗是什么鬼。好吧,實際上至此你會發現,ios9.0以上的有些打不開直接跳,有些打得開還會有允許彈窗,而微信則是無論如何都打不開,實際上微信會在他的瀏覽器里攔截掉所有未經其允許的scheme包括app store,那么接下來我們要解決這些問題。

通用鏈接

針對ios9及以上的打不開問題,實際上ios9提供了更好的解決方案————通用鏈接。

什么是Universal Links(通用鏈接)?

這是iOS9推出的一項功能,如果你的應用支持Universal Links(通用鏈接),那么就能夠方便的通過傳統的HTTP鏈接來啟動APP(如果iOS設備上已經安裝了你的app,不需要額外做任何判斷等),或者打開網頁(iOS設備上沒有安裝你的app)?;蛟S可以更簡單點來說明,在iOS9之前,對于從各種從瀏覽器,Safari、UIWebView或者 WKWebView中喚醒APP的需求,我們通常只能使用scheme。

以上來自網上關于通用鏈接的介紹,對于前端簡單點講就是你訪問一個http的url,如果這個url帶有你提交給開發平臺的配置文件中匹配規則的內容,ios系統會去嘗試打開你的app,如果打不開,系統就會在瀏覽器中轉向你要訪問的鏈接。很好的一個屬性,因為通過這個屬性在ios9上我們能夠繞過微信的攔截從而打開app。

以下是ios開發人員要做的百度搜索結果第一條ios中實現通用鏈接:

而我們要做的真的很簡單,實際上我們只需要拋出鏈接就好了(實際上博主只是來騙經驗的)。在此之前請準備好與主站不同的域名,比如主站www.xxxx.com,你們可以準備好open.xxxx.com的域名作為重定向用。好吧!實際上通用鏈接有一個很坑的屬性,必須是異域打開,而且如果你提交的是你主站的鏈接,你打開你的主站你會發現網站上方會掛著一個難看的灰條轉向appstore中你們的app,沒錯,就是ios系統干的這個事,具體的其他注意事項可以參考這篇文章IOS9通用鏈接(universal link)。

那么接下來我們的代碼得做好更改

//增加通用鏈接的生成,
var baseScheme = "myApp://",
    baseLink="http://m.xxxx.com?";
var createScheme=function(options,isLink){
    var urlScheme=isLink?baseLink:baseScheme;
    for(var item in options){
        urlScheme=urlScheme+item + "=" + encodeURIComponent(options[item]) + "&";
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return isLink?urlScheme:encodeURIComponent(urlScheme);
}

然后對拋出做

var openApp=function(){
    //生成你的scheme你也可以選擇外部傳入
    var localUrl=createScheme({type:1,id:"sdsdewe2122"});
    var openIframe=createIframe();
    if(isIos()){
        //判斷是否是ios,具體的判斷函數自行百度
        if(isGreaterThan9()){
            //判斷是否為ios9以上的版本,跟其他判斷一樣navigator.userAgent判斷,ios會有帶版本號
            localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代碼還可以優化一下
            location.href = localUrl;//實際上不少產品會選擇一開始將鏈接寫入到用戶需要點擊的a標簽里
            return;
        }
        window.location.href = localUrl;
        var loadDateTime = Date.now();
        setTimeout(function () {
            var timeOutDateTime = Date.now();
            if (timeOutDateTime - loadDateTime < 1000) {
                window.location.href = "你的下載頁面";
            }
        }, 25);
    }else if(isAndroid()){
        //判斷是否是android,具體的判斷函數自行百度
        if (isChrome()) {
            //chrome瀏覽器用iframe打不開得直接去打開,算一個坑
            window.location.href = localUrl;
        } else {
            //拋出你的scheme
            openIframe.src = localUrl;
        }
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }else{
        //主要是給winphone的用戶準備的,實際都沒測過,現在winphone不好找啊
        openIframe.src = localUrl;
        setTimeout(function () {
            window.location.href = "你的下載頁面";
        }, 500);
    }
}

實際上就只需要更改這么點,最重要的是app端接入通用鏈接,注意拋出的鏈接不要跟主站同域即可,之后就是不斷的調試,自己去踩坑吧,記得綁定域名,這個對域名具有一定的依賴性。

微信中打開

至此只有微信是打不開的,實際上騰訊系的產品都是打不開的,包括qq瀏覽器。

對于微信中有兩種方式:

一種簡單的方式就是彈窗告訴用戶讓他去瀏覽器中打開——在技術之外的辦法

還有一種方式就是應用寶

是的如果是微信就去打開你的app對應的應用寶,應用寶會去檢測你的app是否存在有則去打開,但只是去打開。實際上騰訊的應用寶對于開發者在功能上做的比想象中的要強大,你在應用寶的微下載中配置申請你的applink與app store的鏈接,之后你只要在你的鏈接參數中帶上android_schema="myApp://"就在應用寶中打開app中的特定功能,如果忽略應用寶的頁面跟自己scheme打開沒有太大區別,具體的操作可以查看應用寶的說明。簡而言之,騰訊的產品中都去借助應用寶這個平臺去執行你需要的操作。在此就不貼代碼了,只要判斷瀏覽器如果是微信或者是qq就去跳你的應用寶鏈接就行。

總結

實際上單純打開app非常簡單,目前無論安卓還是ios都能夠很好的支持scheme,當然騰訊系產品除外,實際上百度瀏覽器也會攔截scheme(我覺得真是奇了葩!?。∥⑿胚@種尚能理解,一個瀏覽器居然擅自去攔截scheme)目前對百度瀏覽器還沒有什么很好的辦法,可以嘗試是否能夠通過百度應用市場去解決。如果是希望打開app同時又要打開下載頁,那么ios9及以上就得用通用鏈接去解決,重點就是這個通用鏈接。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80018.html

相關文章

  • 關于IOS測試

    摘要:由于測試環境中的數據為模擬數據,測試時必須預先考慮到正式環境中可能出現的數據類型。并在之后的測試報告中予以體現。只有在回歸測試通過之后,才對產品進行提交。測試工具歸納是蘋果自帶的工具,肯定比較好用。 前言: 最近跟很多同行討論過,現在也想和大家聊聊,我這里還有一些APP測試的具體指標,希望通過自己很有限的經驗幫助大家。內容中部分是可以百度到,部分是我自己的一些看法,歡迎大家補充。201...

    SmallBoyO 評論0 收藏0
  • 一次移動優化之旅

    摘要:在這里介紹移動中嵌入網頁,優化頁面顯示速度。測試代碼如果后面找到解決方案,會更新到后面。一次移動優化之旅二參考使用的分析頁面性能技術筆記詳解網頁渲染過程 在這里介紹移動App中嵌入網頁,優化頁面顯示速度。 前言 最近在Boss的要求下,寫組件模式的移動頁面。這里選擇的庫是react。(為什么? 入門簡單 + JSX)。 在經過愉快的編寫組件后,打包組件形成組件庫文件,然后被頁面引用。配...

    Binguner 評論0 收藏0

發表評論

0條評論

SKYZACK

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<