自定义唤端页面配置

优质

小牛编辑

138浏览

2023-12-01

使用场景

在兑吧活动工具类型中，涉及邀请助力，邀请拼团，砍价等活动中，活动链路涉及被分享用户（或好友）给分享人助力或者参团时候，需要唤起开发者的app（deepLink唤端协议）到指定的活动页面，同事兼顾没有下载app的新用户可以调换到app的下载页面。

因此兑吧的活动在分享落地页面的业务中，需要使用到开发者的app唤端方法和下载方法。同时，如果app的唤端方法涉及到引入jssdk，或者JSbridge，安卓和IOS唤端方式不一样，以及唤端和下载不是同一个方法等等情况。

为了解决上面的问题，兑吧活动支持开发者通过封装自定义页面方法实现活动的唤端和下载等功能。本文档也旨在说明自定义页面的配置和作用。

技术实现

端外分享落地页面，唤起app到端内对应活动页面，需要跳转到端内，并且需要通过免登录跳转（免登录链接跳转和生成原理，详见文档《免登录接口地址》）到端内兑吧活动页面。其中活动链接和邀请码（shareCode），或者拼团的参数等，都是通过dbredirect参数，带在唤端链接中间页地址后面传给开发者。开发者接收到dbredirect参数只有，唤起app并生成免登录跳转到活动页面进行助力和拼团。主要实现流程如下图

参数说明

dbredirect:唤端链接后面兑吧自动拼装的参数地址，即免登录链接地址中的redirect参数，端内活动打开的活动地址，该地址会带上对应的shareCode或者拼团助力码。参数需要编码之后传输，方式链接后面的参数丢失。

参考示例

   <!DOCTYPE html>
     <html lang="en">

     <head>
         <meta charset="UTF-8">
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
         <meta name="format-detection" content="telephone=no" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
     </head>
     <body>
     <script>   
         // 主活动链接
         var dbredirect =getQueryString(location.href,"redirect_uri")||"";

         var encodeRedirectUrl = encodeURIComponent(encodeURIComponent(encodeURIComponent(encodeURIComponent(dbredirect))));
           var openUrl ="https://m.client.10010.com/mobileService/openPlatform/openPlatLineNew.htm?to_url=https%3A%2F%2Factivity.m.duiba.com.cn%2FcustomActivity%2Fsichuanunicom%2Flogin%3FactUrl%3D" + encodeRedirectUrl;

         var G = navigator.userAgent;
         var L = G.match(/Chrome/i) != null && G.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
         var M = (G.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
         var a = (G.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
         var q = (!a && G.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
          var c = (q || a) && G.match(/Safari/);
         var u = G.match(/MQQBrowser\/([\d\.]+)/) ? true : false;
         var K = 0;
          c && (K = G.match(/Version\/([\d\.]+)/));
         if(M){//安卓
         window.location.href = 'chinaunicom://?open={"openType":"url","title":"实时话费","openUrl":"'+openUrl+'"}';
         setTimeout(function () {
         window.location.href = "http://wap.10010.com/mobileService/wap/upload/khd.jsp"}, 500)
          }else{   //ios
         window.location.href = 'chinaunicom://?open={"openType":"url","title":"实时话费","openUrl":"'+openUrl+'"}';
         }
          function getQueryString(url, name) {
               var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
               var r = window.location.search.substr(1).match(reg);
               if (r != null) return unescape(r[2]);
               return null;
             }
          </script>
         </body>
         </html>