思考問題:
通常,我們開發一個APP,有Android版本、IOS版本。
但是只有一個二維碼?怎么辦呢?
怎么讓IOS用戶掃描二維碼下載IOS版本,Android用戶掃描二維碼下載到Android版本呢?
實現思路:
- 首先,需要新建一個html文件,通過JavaScript來判斷用戶的手機系統(IOS或Android),判斷之后,根據不同的手機系統,跳轉到不同的鏈接去下載。
- 然后,使用這個html文件的鏈接去生成一個二維碼圖片。
- 最后,拿出手機掃一掃二維碼圖片會跳轉到相應的下載鏈接。
給出代碼:down.html
1 <html> 2 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>二維碼下載</title> 6 7 <script type="text/javascript"> 8 /* 9 * 智能機瀏覽器版本信息: 10 * 11 */ 12 var browser = { 13 versions: function() { 14 var u = navigator.userAgent, 15 app = navigator.appVersion; 16 return { //移動終端瀏覽器版本信息 17 trident: u.indexOf('Trident') > -1, //IE內核 18 presto: u.indexOf('Presto') > -1, //opera內核 19 webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核 20 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核 21 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否為移動終端 22 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端 23 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc瀏覽器 24 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否為iPhone或者QQHD瀏覽器 25 iPad: u.indexOf('iPad') > -1, //是否iPad 26 webApp: u.indexOf('Safari') == -1 //是否web應該程序,沒有頭部與底部 27 }; 28 }(), 29 language: (navigator.browserLanguage || navigator.language).toLowerCase() 30 } 31 32 if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) { 33 window.location = "https://itunes.apple.com/cn/app/xxx"; //改地址放入IOS跳轉鏈接 34 } else if (browser.versions.android) { //該地址放入Android下載包鏈接 35 window.location = "http://zhj8.aliapp.com/xxx.apk"; 36 } 37 38 // document.writeln("語言版本: " + browser.language); 39 // document.writeln(" 是否為移動終端: " + browser.versions.mobile); 40 // document.writeln(" ios終端: " + browser.versions.ios); 41 // document.writeln(" android終端: " + browser.versions.android); 42 // document.writeln(" 是否為iPhone: " + browser.versions.iPhone); 43 // document.writeln(" 是否iPad: " + browser.versions.iPad); 44 // document.writeln(navigator.userAgent); 45 </script> 46 </head> 47 48 <body> 49 50 </body> 51 52 </html>
用這個down.html去生成一個二維碼圖片,再使用手機掃一掃即可。
希望能夠幫助到大家!若有問題,歡迎加群!