如何从Web App（Android WebView）初始化hover USSD会话？

你的需求完全可行，但由于WebView的沙箱限制，Web端代码无法直接调用Android原生的USSD能力或Hover USSD SDK，必须通过React Native与Android原生代码的桥接来实现。以下是具体的实现思路和步骤：

核心原理 #

WebView中的JavaScript代码无法直接访问Android系统API，需要通过React Native作为中间层：Web端按钮点击后，向React Native发送消息；React Native调用自定义的Android原生模块，该模块集成Hover USSD SDK并启动自动化会话；最后将会话结果反馈回Web端。

实现步骤 #

1. 开发Android原生模块集成Hover USSD SDK #

在React Native项目的Android部分创建原生模块，封装Hover USSD的会话启动逻辑：

• 首先按照Hover官方文档配置SDK依赖（添加maven仓库、引入SDK依赖）。
• 实现一个继承ReactContextBaseJavaModule的类，暴露供React Native调用的方法：

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Promise;
import com.hover.sdk.api.Hover;
import com.hover.sdk.api.Session;
import com.hover.sdk.api.SessionCallback;

public class HoverUssdModule extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public HoverUssdModule(ReactApplicationContext context) {
        super(context);
        reactContext = context;
        // 初始化Hover SDK
        Hover.initialize(context);
    }

    @Override
    public String getName() {
        return "HoverUssdModule"; // 模块名称，React Native端将通过此名称调用
    }

    @ReactMethod
    public void startUssdSession(String ussdCode, Promise promise) {
        // 构建并启动Hover USSD会话
        Session.Builder sessionBuilder = new Session.Builder(reactContext)
                .ussdCode(ussdCode)
                .build();

        sessionBuilder.start(new SessionCallback() {
            @Override
            public void onSuccess(Session session) {
                promise.resolve("USSD会话执行完成：" + session.getResponse());
            }

            @Override
            public void onError(Session session, String errorMessage) {
                promise.reject("USSD_SESSION_ERROR", errorMessage);
            }
        });
    }
}

• 注册该模块：创建HoverUssdPackage类并添加到MainApplication的包列表中：

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class HoverUssdPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new HoverUssdModule(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

修改MainApplication：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new HoverUssdPackage()); // 添加自定义包
    return packages;
}

2. 配置React Native WebView与Web端通信 #

在React Native的WebView组件中，通过onMessage监听Web端的消息，调用原生模块的方法，并将结果回传给Web端：

import React, { useRef } from 'react';
import { WebView, NativeModules } from 'react-native';

const { HoverUssdModule } = NativeModules;

const AppWebView = () => {
    const webViewRef = useRef(null);

    // 处理Web端发送的消息
    const handleWebMessage = (event) => {
        const message = JSON.parse(event.nativeEvent.data);
        if (message.action === 'startUssd') {
            // 调用原生模块启动USSD会话
            HoverUssdModule.startUssdSession(message.ussdCode)
                .then(result => {
                    // 将结果注入Web端JS
                    webViewRef.current?.injectJavaScript(`window.onUssdSuccess("${result}")`);
                })
                .catch(error => {
                    webViewRef.current?.injectJavaScript(`window.onUssdError("${error.message}")`);
                });
        }
    };

    // 向Web端注入监听按钮点击的JS代码
    const injectedJs = `
        // 监听Web端按钮点击
        document.querySelector('#startUssdBtn').addEventListener('click', () => {
            const ussdCode = '*123#'; // 替换为实际USSD代码
            window.ReactNativeWebView.postMessage(JSON.stringify({
                action: 'startUssd',
                ussdCode: ussdCode
            }));
        });

        // 定义接收结果的回调函数
        window.onUssdSuccess = function(result) {
            console.log('USSD会话成功：', result);
            // 此处处理成功逻辑，比如显示提示
        };

        window.onUssdError = function(error) {
            console.error('USSD会话失败：', error);
            // 此处处理错误逻辑
        };
    `;

    return (
        <WebView
            ref={webViewRef}
            source={{ uri: '你的Web App地址' }} // 替换为你的Web App实际地址
            onMessage={handleWebMessage}
            injectedJavaScript={injectedJs}
            javaScriptEnabled={true}
            domStorageEnabled={true}
        />
    );
};

export default AppWebView;

3. 权限配置 #

在AndroidManifest.xml中添加Hover SDK所需的权限：

<uses-permission android:name="android.permission.SEND_SMS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

注意：Android 6.0及以上需要动态申请SEND_SMS和READ_PHONE_STATE权限，需在原生模块中添加权限申请逻辑，确保会话启动前权限已获取。

关键注意事项 #

• 确保Hover SDK的初始化和配置完全符合官方要求，包括API密钥的设置（若需要）。
• 处理USSD会话的各种异常情况，比如用户拒绝权限、网络故障、USSD代码无效等，将错误信息清晰反馈给Web端用户。
• 测试时需使用实体Android设备，模拟器可能无法正常处理USSD会话。

内容的提问来源于stack exchange，提问作者Dégratias Buhendwa