1. 程式人生 > >微信瀏覽器中打開提示的2種實現方式

微信瀏覽器中打開提示的2種實現方式

跳轉 遮罩 解決 推廣 ger 尋找 多說 默認 情況

  之前公司有一個新的APP項目上線,我們在項目首頁做個二維碼,然後用戶用手機掃一掃就能下載了。但是微信的掃一掃之後下載不了。   上網查了一下,微信自帶的內置瀏覽器屏蔽了下載功能,所以才出現用微信掃一掃不能下載的情況。這時候我們一般會建議用戶使用uc或者其他第三方瀏覽器自帶的掃一掃功能下載。但是現在的微信太普及了,很多人都習慣性的使用微信來掃碼下載,總不能每個用戶都解釋一遍,所以我們一直在尋找解決方案。    要解決這個問題思路很明確,既然微信內置瀏覽器不支持下載,那就只能想辦法調用外部瀏覽器來下載。   所以我們在尋找這麽一種方案:用戶點了某個推廣鏈接如何調用外部的瀏覽器實現下載功能呢?   有需要的可以用微信外跳工具 CommaTool:http://www.commatool.cn/
  好了,廢話不多說了,直接上方案。 方案1: 彈出一個遮罩提示用戶在新的瀏覽器窗口打開。


技術分享圖片

使用的是純JS+HTML+CSS結合的方式,但不要一進入微信就彈出提示它在新瀏覽器中打開,在這個頁面裏面還可以提交表單查看信息等,只有它點擊應用的鏈接後,才彈出提示它跳轉後下載。

想要制作而又不懂技術的朋友可以前往

部分代碼(網上有很多,我就不獻醜了)

var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf(‘micromessenger‘) !== -1})();window.onload = function
() {var winHeight = typeof window.innerHeight != ‘undefined‘ ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉var btn = document.getElementById(‘J_weixin‘);var tip = document.getElementById(‘weixin-tip‘);var close = document.getElementById(‘close‘);if (is_weixin) {btn.onclick = function(e) {tip.style.height = winHeight + ‘px‘; //兼容IOS彈窗整屏tip.style.display = ‘block‘;return false;}close.onclick = function() {tip.style.display = ‘none‘;}}}

方案2:

這個方案就是我們現在用的這種,相比第一種的話,轉化率方面都有顯著發的提升,

這個方案需要我們借助一個外部的接口來實現此功能

我們在他們那邊租用了此接口。

通過租用的接口可以實現安卓端微信直接喚醒手機默認瀏覽器打開指定的鏈接,從而實現下載APP的功能.

技術分享圖片

具體實現原理:

利用HTTP請求中Header中的user-agent字段,來識別用戶的客戶端,如果判斷用戶是在微信中打開的鏈接,則自動打開系統手機瀏覽器來打開鏈接。如果是在手機瀏覽器打開,則正常訪問。

判斷用戶客戶端的Javasript代碼如下

function is_wechat_client(){      var ua = navigator.userAgent.toLowerCase();      if(ua.match(/MicroMessenger/i)=="micromessenger"){          return true;      }else{          return false;      }}

好了,親們,上面兩種辦法筆者都嘗試過了,均可行。如果你有更好的辦法可以在此處留言,方便廣大碼友

微信瀏覽器中打開提示的2種實現方式