如何在非应用商店托管的React Ionic 5应用中从下载URL传递并自动填充推荐码数据？

我刚好做过类似的需求，给你几个不依赖Google Play Referrer API的可行方案，完全适配React Ionic 5的场景，尤其适合你这种非应用商店分发的情况：

这是最直接的方式，Ionic本身就支持深度链接处理，步骤如下：

1. 配置深度链接路由
   先在app-routing.module.ts里配置能接收refCode参数的路由（如果是启动页接收的话，就配置启动页的路由）：

   const routes: Routes = [
     {
       path: '',
       component: HomePage,
       // 定义接收的参数规则
       queryParams: { refCode: '' }
     }
   ];
   

2. 获取并存储参数
   在启动页（比如HomePage.tsx）或者App.tsx的初始化生命周期里，获取URL的refCode参数，并用Ionic的Storage持久化存储：

   import { useLocation } from 'react-router-dom';
   import { Storage } from '@ionic/storage';
   
   // 组件内部逻辑
   const location = useLocation();
   const storage = new Storage();
   
   useEffect(() => {
     async function initRefCode() {
       await storage.create();
       // 解析URL中的refCode参数
       const refCode = new URLSearchParams(location.search).get('refCode');
       if (refCode) {
         // 存到本地，避免下次启动丢失
         await storage.set('inviteRefCode', refCode);
       }
     }
     initRefCode();
   }, [location, storage]);
   

3. 自动填充输入框
   在推荐码输入框所在的组件里，读取本地存储的inviteRefCode，自动填充到输入框：

   import { useState, useEffect } from 'react';
   import { Storage } from '@ionic/storage';
   import { IonInput } from '@ionic/react';
   
   function ReferralCodeInput() {
     const [refCode, setRefCode] = useState('');
     const storage = new Storage();
   
     useEffect(() => {
       async function loadRefCode() {
         await storage.create();
         const savedCode = await storage.get('inviteRefCode');
         if (savedCode) {
           setRefCode(savedCode);
         }
       }
       loadRefCode();
     }, [storage]);
   
     return (
       <IonInput 
         value={refCode} 
         onChange={(e) => setRefCode(e.target.value)}
         placeholder="请输入推荐码"
       />
     );
   }
   

如果你的应用是打包成安卓/iOS原生APP，还可以通过自定义URL Scheme来处理外部链接唤起应用并传递参数：

1. 配置URL Scheme

   • 安卓：在android/app/src/main/AndroidManifest.xml里的<activity>标签下添加：

     <intent-filter>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.DEFAULT" />
       <category android:name="android.intent.category.BROWSABLE" />
       <!-- 自定义Scheme，比如yourapp:// -->
       <data android:scheme="yourapp" />
     </intent-filter>
     

   • iOS：在ios/App/App/Info.plist里添加：

     <key>CFBundleURLTypes</key>
     <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>yourapp</string>
         </array>
       </dict>
     </array>
     

2. 监听应用唤起事件
   用Capacitor的App插件监听appUrlOpen事件，获取参数并存储：

   import { App } from '@capacitor/app';
   import { Storage } from '@ionic/storage';
   
   useEffect(() => {
     async function setupAppListener() {
       await storage.create();
       // 监听应用被URL唤起的事件
       App.addListener('appUrlOpen', async (data) => {
         const url = data.url;
         // 解析URL里的refCode参数
         const refCode = new URL(url).searchParams.get('refCode');
         if (refCode) {
           await storage.set('inviteRefCode', refCode);
           // 可选：直接跳转去推荐码页面
           // history.push('/referral-page');
         }
       });
     }
     setupAppListener();
   }, []);
   

   之后填充输入框的逻辑和方案1一致。

如果用户是通过网页点击链接下载应用，还可以在网页里把refCode临时存储，等应用安装后读取：

• 网页端：当用户点击推荐链接时，把refCode存在localStorage或者Cookie里，然后引导下载应用。
• 应用端：如果是PWA，可以直接读取网页的localStorage；如果是原生APP，可以在首次启动时打开一个和网页通信的桥接页面，获取参数后存储。

额外注意事项 #

• 记得处理参数覆盖逻辑：比如用户已经手动输入过推荐码，就不要再自动填充，避免覆盖用户的自定义输入。
• 测试时要确保链接能正确唤起应用，参数解析无误，可以用Ionic DevApp或者真机测试。

内容的提问来源于stack exchange，提问作者sagar khatri