Android WebView监听远程PHP站点按钮点击触发奖励视频方案咨询

嘿，这个需求其实就是Web页面和Android原生应用的交互问题，咱们分Web端和Android端两步来实现，逻辑很清晰的~

一、Web端（PHP页面）处理 #

首先要在你的PHP页面里，给「FREE life」按钮绑定点击事件，触发JavaScript调用Android原生的方法：

1. 先写按钮的HTML：

<button id="freeLifeBtn">FREE life</button>

2. 接着添加JavaScript代码，处理点击并调用Android暴露的接口：

// 监听按钮点击
document.getElementById('freeLifeBtn').addEventListener('click', function() {
    // 先判断Android接口是否存在，避免在非WebView环境下报错
    if (typeof AndroidInterface !== 'undefined') {
        // 调用Android原生的方法启动奖励视频
        AndroidInterface.showRewardVideo();
    } else {
        alert('当前环境不支持领取免费生命，请在APP内操作');
    }
});

3. 额外准备两个JS函数，用来接收Android端的回调（比如视频播放成功/失败）：

// 视频播放完成，给用户添加生命
function addFreeLife() {
    // 发送请求到你的PHP后端，更新用户生命数
    fetch('/api/add-free-life', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: 'user_id=当前用户ID' // 这里替换成实际的用户标识
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            alert('恭喜！获得1次免费生命');
            // 更新页面上的生命显示
            document.getElementById('lifeCount').textContent = data.new_life;
        }
    });
}

// 视频播放失败的提示
function showVideoFailed() {
    alert('奖励视频加载失败，请稍后重试');
}

二、Android端（WebView配置与交互） #

接下来要在Android项目里配置WebView，暴露JS调用的接口，并且实现奖励视频的启动逻辑：

1. 创建一个交互类，作为JS和原生的桥梁：

import android.content.Context;
import android.os.Handler;
import android.os.Looper;
import android.webkit.JavascriptInterface;
import android.widget.Toast;
import android.webkit.WebView;
import android.app.Activity;

public class WebAppInterface {
    private Context mContext;
    private WebView mWebView; // 持有WebView引用，方便回调JS

    public WebAppInterface(Context context, WebView webView) {
        mContext = context;
        mWebView = webView;
    }

    // 这个方法会被JS调用，必须加@JavascriptInterface注解
    @JavascriptInterface
    public void showRewardVideo() {
        // 注意：UI操作必须在主线程执行
        new Handler(Looper.getMainLooper()).post(() -> {
            // 这里替换成你实际的奖励视频SDK调用逻辑
            // 比如用AdMob的RewardedAd示例：
            if (mRewardedAd != null) {
                mRewardedAd.show((Activity) mContext, rewardItem -> {
                    // 视频播放完成，给用户奖励，回调Web页面
                    mWebView.loadUrl("javascript:addFreeLife()");
                });
            } else {
                Toast.makeText(mContext, "奖励视频未加载完成", Toast.LENGTH_SHORT).show();
                // 回调失败提示
                mWebView.loadUrl("javascript:showVideoFailed()");
            }
        });
    }
}

2. 配置WebView，启用JS并绑定交互接口：

import android.webkit.WebSettings;
import android.webkit.WebView;

// 在Activity或Fragment里初始化WebView
WebView webView = findViewById(R.id.game_webview);
WebSettings webSettings = webView.getSettings();

// 启用JavaScript
webSettings.setJavaScriptEnabled(true);
// 绑定交互接口，JS里的AndroidInterface就是这个类的实例
webView.addJavascriptInterface(new WebAppInterface(this, webView), "AndroidInterface");

// 加载你的远程PHP站点
webView.loadUrl("https://你的游戏站点地址");

三、安全与注意事项 #

• 权限问题：确保AndroidManifest.xml里添加了必要的网络权限（<uses-permission android:name="android.permission.INTERNET" />），以及广告SDK需要的权限。
• 安全防护：不要在WebAppInterface里暴露敏感方法，只保留showRewardVideo这类必要的接口；另外可以通过webView.setWebViewClient验证网页域名，防止恶意页面调用接口。
• 线程处理：所有UI操作（比如显示视频、Toast提示）必须在主线程执行，所以上面用了Handler切换到主线程。
• 测试验证：尽量用真实设备测试，部分广告SDK在模拟器上可能无法正常加载视频。

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