iPhone APP 掃碼下載

時間 2019-11-13

標籤 iphone app 下載欄目 iPhone 简体版

原文原文鏈接

移動互聯網發展迅速，各類APP的開發都太瘋狂了，通常稍大點兒的應用，都會準備多個版本，好比：iPhone版、iPad版、Android版，咱們姑且稱之爲：終端適配。
javascript

業務作的再大點兒的，APP還會考慮覆蓋到多個國家，好比：中文版、英文版、日文版、韓文版等，咱們可稱之爲：APP國際化。html

還有更拽的，針對不一樣渠道（流量來源）也提供不一樣的版本，好比：百度版、Google版、阿里版、騰訊版，等，咱們可稱之爲：多渠道適配。java

可是對於應用提供方，必定但願入口只有一個：在二維碼瘋狂流行的年代，必然是已掃描二維碼直接下載來的最快最便捷，因此怎樣讓這張二維碼承載這麼豐富的信息量呢？以前給PM作過好幾個這樣的二維碼，後來發現這種需求還很多，估計FEer都會遇到，因此乾脆寫成一篇文章，將解決方案（代碼）share出來，供須要者使用！android

其實所謂的解決方案，就是作一個HTML靜態頁面，全部邏輯控制都在該頁面進行，好比判斷終端、判斷語言、判斷渠道等；而後經過該HTML頁面對應的URL生成一張二維碼便可！瀏覽器

1、針對「終端適配」&「APP國際化」app

 
          <!DOCTYPE HTML> 
         
          <html lang= 
          "zh-CN" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>手機APP下載頁面：根據終端辨別下載地址</title> 
         
          <script type= 
          "text/javascript" 
          > 
         
          // 獲取終端的相關信息 
         
          var 
          Terminal = { 
         
          // 辨別移動終端類型 
         
          platform :  
          function 
          (){ 
         
          var 
          u = navigator.userAgent, app = navigator.appVersion; 
         
          return 
          { 
         
          // android終端或者uc瀏覽器 
         
          android: u.indexOf( 
          'Android' 
          ) > -1 || u.indexOf( 
          'Linux' 
          ) > -1, 
         
          // 是否爲iPhone或者QQHD瀏覽器 
         
          iPhone: u.indexOf( 
          'iPhone' 
          ) > -1 , 
         
          // 是否iPad 
         
          iPad: u.indexOf( 
          'iPad' 
          ) > -1 
         
          }; 
         
          }(), 
         
          // 辨別移動終端的語言：zh-cn、en-us、ko-kr、ja-jp... 
         
          language : (navigator.browserLanguage || navigator.language).toLowerCase() 
         
          } 
         
          // 根據不一樣的終端，跳轉到不一樣的地址 
         
          var 
          theUrl =  
          'http://www.baidufe.com' 
          ; 
         
          if 
          (Terminal.platform.android){ 
         
          theUrl =  
          '你的Android APP對應下載地址：apk文件地址' 
          ; 
         
          } 
          else 
          if 
          (Terminal.platform.iPhone){ 
         
          theUrl =  
          '你的iPhone APP對應下載地址：APP Store地址' 
          ; 
         
          } 
          else 
          if 
          (Terminal.platform.iPad){ 
         
          // 還能夠經過language，區分開多國語言版 
         
          switch 
          (Terminal.language){ 
         
          case 
          'en-us' 
          : 
         
          theUrl =  
          '你的iPad APP（英文版）對應下載地址：APP Store地址' 
          ; 
         
          break 
          ; 
         
          case 
          'ko-kr' 
          : 
         
          theUrl =  
          '你的iPad APP（韓語版）對應下載地址：APP Store地址' 
          ; 
         
          break 
          ; 
         
          case 
          'ja-jp' 
          : 
         
          theUrl =  
          '你的iPad APP（日文版）對應下載地址：APP Store地址' 
          ; 
         
          break 
          ; 
         
          default 
          : 
         
          theUrl =  
          '你的iPad APP（中文版-默認）對應下載地址：APP Store地址' 
          ; 
         
          } 
         
          } 
         
          location.href = theUrl; 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <!-- 
         
          有啥問題，請直接到這裏來反饋：http: 
          //www.baidufe.com/item/92457b4d0bfde1effa40.html 
         
          --> 
         
          </body> 
         
          </html>

假設如上HTML靜態文件對應的URL爲：http://www.baidufe.com/app-install/terminal-language.html網站

那麼就能夠經過該URL生成一張二維碼，掃面該二維碼後，具體的下載地址，會由terminal-language.html自動識別並前往。google

2、針對「多渠道適配」
spa

 
          <!DOCTYPE HTML> 
         
          <html lang= 
          "zh-CN" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>手機APP下載頁面：根據渠道辨別下載地址</title> 
         
          <script type= 
          "text/javascript" 
          > 
         
          // 若是要分渠道，也是能夠的，渠道區分：?from=xx 
         
          var 
          From = ( 
          function 
          (){ 
         
          var 
          searchInfo = location.search.substr(1).split( 
          '&' 
          ),item,from; 
         
          for 
          ( 
          var 
          i= 0,len=searchInfo.length;len > 1 && i<len;i++){ 
         
          item = searchInfo[i].split( 
          '=' 
          ); 
         
          if 
          (item[0] ==  
          'from' 
          ) { 
         
          from = item[1]; 
         
          break 
          ; 
         
          } 
         
          } 
         
          return 
          from; 
         
          })(); 
         
          // 根據不一樣渠道，去向不一樣的下載地址 
         
          var 
          theUrl =  
          'http://www.baidufe.com' 
          ; 
         
          switch 
          (From){ 
         
          case 
          'baidu' 
          : 
         
          theUrl =  
          '你的APP：針對 baidu 的定製版' 
          ; 
         
          break 
          ; 
         
          case 
          'google' 
          : 
         
          theUrl =  
          '你的APP：針對 google 的定製版' 
          ; 
         
          break 
          ; 
         
          default 
          : 
         
          theUrl =  
          '你的APP：官方 版' 
          ; 
         
          break 
          ; 
         
          } 
         
          location.href = theUrl; 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <!-- 
         
          有啥問題，請直接到這裏來反饋：http: 
          //www.baidufe.com/item/92457b4d0bfde1effa40.html 
         
          --> 
         
          </body> 
         
          </html>

對於上面這種多渠道適配的，會稍微複雜一些，假設如上HTML文件的地址爲：http://www.baidufe.com/app-install/channel.html .net

那麼對於不一樣的渠道，我們就須要生成不一樣的二維碼。也許此時你會不理解，渠道在哪兒體現？I Tell U：

假設咱們的APP官網（推廣頁面）爲：http://www.baidu.com/app ,那麼我們的運營PM可能會將該URL後面加上不一樣參數，而後在各大網站進行推廣，好比：

在百度貼吧推廣：http://www.baidufe.com/app?from=baidu

在新浪微博推廣：http://www.baidufe.com/app?from=sina

在騰訊微博推廣：http://www.baidufe.com/app?from=qq

上面的from參數，就是渠道，針對上面的三個渠道，我們就須要用以下三個URL來生成二維碼：

來源網站爲百度：http://www.baidufe.com/app-install/channel.html?from=baidu

來源網站爲新浪：http://www.baidufe.com/app-install/channel.html?from=sina

來源網站爲騰訊：http://www.baidufe.com/app-install/channel.html?from=qq

而且須要在APP官網（http://www.baidufe.com/app）顯示二維碼的地方，經過from參數加載不一樣渠道的二維碼，這樣，掃描該二維碼後，便會獲得該渠道定製版本的APP。

3、這三種也能夠結合起來使用，同時對終端、語言、渠道進行識別：

 
          <!DOCTYPE HTML> 
         
          <html lang= 
          "zh-CN" 
          > 
         
          <head> 
         
          <meta charset= 
          "UTF-8" 
          > 
         
          <title>手機APP下載頁面：根據終端&渠道辨別下載地址</title> 
         
          <script type= 
          "text/javascript" 
          > 
         
          // 獲取終端的相關信息 
         
          var 
          Terminal = { 
         
          // 辨別移動終端類型 
         
          platform :  
          function 
          (){ 
         
          var 
          u = navigator.userAgent, app = navigator.appVersion; 
         
          return 
          { 
         
          // android終端或者uc瀏覽器 
         
          android: u.indexOf( 
          'Android' 
          ) > -1 || u.indexOf( 
          'Linux' 
          ) > -1, 
         
          // 是否爲iPhone或者QQHD瀏覽器 
         
          iPhone: u.indexOf( 
          'iPhone' 
          ) > -1 , 
         
          // 是否iPad 
         
          iPad: u.indexOf( 
          'iPad' 
          ) > -1 
         
          }; 
         
          }(), 
         
          // 辨別移動終端的語言：zh-cn、en-us、ko-kr、ja-jp... 
         
          language : (navigator.browserLanguage || navigator.language).toLowerCase() 
         
          } 
         
          // 若是要分渠道，也是能夠的，渠道區分：?from=xx 
         
          var 
          From = ( 
          function 
          (){ 
         
          var 
          searchInfo = location.search.substr(1).split( 
          '&' 
          ),item,from; 
         
          for 
          ( 
          var 
          i= 0,len=searchInfo.length;len > 1 && i<len;i++){ 
         
          item = searchInfo[i].split( 
          '=' 
          ); 
         
          if 
          (item[0] ==  
          'from' 
          ) { 
         
          from = item[1]; 
         
          break 
          ; 
         
          } 
         
          } 
         
          return 
          from; 
         
          })(); 
         
          // 根據不一樣的終端，跳轉到不一樣的地址 
         
          var 
          theUrl =  
          'http://www.baidufe.com' 
          ; 
         
          // android系統APP 
         
          if 
          (Terminal.platform.android){ 
         
          // 這裏區分渠道 
         
          switch 
          (From){ 
         
          case 
          'baidu' 
          : 
         
          theUrl =  
          '你的APP：baidu定製版' 
          ; 
         
          break 
          ; 
         
          case 
          'google' 
          : 
         
          theUrl =  
          '你的APP：google定製版' 
          ; 
         
          break 
          ; 
         
          default 
          : 
         
          theUrl =  
          '你的APP：官方版' 
         
          } 
         
          } 
         
          location.href = theUrl; 
         
          </script> 
         
          </head> 
         
          <body> 
         
          <!-- 
         
          有啥問題，請直接到這裏來反饋：http: 
          //www.baidufe.com/item/92457b4d0bfde1effa40.html 
         
          --> 
         
          </body> 
         
          </html>

二維碼的生成策略，和「多渠道適配」類型保持一致。

copy from http://blog.csdn.net/zjlovety/article/details/21726785

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。