android之WebView与h5交互

项目中有这么一个需求：

点击邀请好友按钮，跳转到邀请的h5页面，然后点击h5页面的”立即赚钱”按钮，调起本地分享。

图1

可以看到，h5页面中有数据，这个是需要根据token 和 userId去请求获取的，当然，这个请求需要web端发送，所以app端需要将两个参数传给web端。

怎么传呢？

这里记录一种我们这边使用的方式：就是android本地定义方法，并通过addJavascriptInterface(SharedWebViewActivity.this,"seven")方法将定义了回调方法的对象注入到WebView中，而且定义了的对象的引用名称。

这样web端就可以使用这个名称调用android本地的方法。

具体是android端使用WebView加载邀请的h5页面的url(web端提前给到客户端), web端页面开始加载的时候调用定义好的本地方法，用于获取到需要的参数。

/**
 * 获取用户token
 *
 * @return
 */
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public String getUserToken() {
    return SPUtils.getString(SPConstantUtils.ACCESS_TOKEN, "");
}

/**
 * 传递加密后的userId
 */
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public String getUserId() {
    return encodeUserId;
}

web端拿到这两个必须的请求参数后，会去请求后台，最终将一个完整的h5页面呈现给客户端。

然后点击h5页面的立即赚钱按钮，将分享链接传给客户端，同时调起客户端分享方法。

图2

接着就可以将分享链接分享到目的地,实现分享。

Web端部分代码：

$(document).ready(function () {
    var userId = "";
    var Token = "";
    var size = 20;
    // 获取userId方法
    function getUserId() {
        Token = ssxj.getUserToken();
        userId = encodeURIComponent(ssxj. getUserId());
    }
    /*
        分享好友方法
    */
    function shareFriends(){
        seven.shareResult(anyCashUrl.shareResultUrl+userId);
    }
 
    // 规则点击弹出层显示隐藏
    $(".share-detail-rules").click(function () {
        $(".share-layer").addClass("active");
        $(".share-detail-warp").addClass("overflow-hidden");
    });
    $(".close-btn").click(function () {
        $(".share-layer").removeClass("active");
        $(".share-detail-warp").removeClass("overflow-hidden");
    });
    //点击”立即赚钱”
    $(".share-btn").click(function () {
        shareFriends();
    });

});

在android端：

/**
 * 邀请分享
 *
 * @param shareUrl 分享地址
 */
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public void shareResult(String shareUrl) {
    Message shareMsg = new Message();
    shareMsg.what = SHARESUCCESS;
    Bundle mBundle = new Bundle();
    mBundle.putString("shareUrl", shareUrl);
    shareMsg.setData(mBundle);
    shareHandle.sendMessage(shareMsg);

}

接收h5传递过来的分享链接。