H5攜帶參數跳轉小程序頁面(微信與支付寶)


前提

  H5必須使用 https 地址,否則通不過

微信

  官方鏈接:https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#

  H5跳轉小程序配置路徑:開發>開發管理>開發設置>掃普通鏈接二維碼打開小程序,如下圖

  

  配置,如圖

 

 

 

 

 

支付寶

  官方地址:https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=manual&recommend=8b6202da8b06f20ef41161d6463aa59a

  開啟聯調模式:(https://opensupport.alipay.com/support/helpcenter/142/201602520380?ant_source=manual&recommend=8b6202da8b06f20ef41161d6463aa59a)

  H5跳轉小程序配置路徑:管理>碼管理>關聯普通二維碼,如下圖

  

  配置,如圖

  

 

 

 

  相關代碼  

  

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>跳轉中-xxx</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script>window.onload = function() {
        var orderId = GetQueryString("orderId");
        var browser = navigator.userAgent.toLowerCase();
		
        if (browser.match(/Alipay/i) == "alipay") {

		  window.location.href="alipays://platformapi/startapp?appId=xxx&page=pages/pay/pay&query="+encodeURIComponent("xxx");
          console.log("支付寶app的瀏覽器");
        } else if (browser.match(/MicroMessenger/i) == "micromessenger") {
          console.log("微信app的瀏覽器");

        } else {
          console.log("其它瀏覽器");

        }
      }

      //1.截取地址欄
      function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r[2];
        return null;
      }
	
	  </script>
    
    <head>

</html>

  

(

注意:

   1、支付寶必須使用中轉頁面進行喚起小程序 

   2、微信配置匹配規則不能占用,否則支付寶不能使用,同理支付寶不能選擇精准匹配,否則微信不能正常調用

   3、支付寶調試,需要在手機支付寶APP掃描項目小程序,進行設置>打開調試

)

 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM