仿微信android客户端分享网页内容解决方案

最新推荐文章于 2022-01-20 12:38:55 发布

原创最新推荐文章于 2022-01-20 12:38:55 发布 · 813 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #html #微信

android开发专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在Android应用中，如何通过WebView实现与微信客户端的集成，以便在网页加载完成后，通过JavaScript交互获取网页内容并进行分享。关键步骤包括设置URL拦截规则，自定义WebViewClient，编写JS接口，配置WebView以及实现分享状态的回调通知。

1.android端和web端协议好拦截规则
这里假设分享渠道是微信，规则是url末尾带上”sharechannel=weixin”
2.在WebViewClient类的shouldOverriderUrlLoading方法中拦截，在网页加载完时调用读取Html的document中相应标签的Javascript代码（分享内容定义在相应的标签中）

/**
     * 读取网页分享内容，成功后再回调方法onSuccess中发送分享
     *
     * @param type         分享平台
     * @param functionType 功能类型  1:分享 2:复制链接
     */

    public boolean readShareFromHtml(int type, int functionType) {
    //在网页加载完时调用
        if (!isLoaded) {
            ToastUtil.getInstance(mActivity).showShort("操作太快咯，请稍后再试");
        }else {
            if (currentWebView != null) {
currentWebView.loadUrl("javascript:try{window.DOCUMENT.setShare(document.getElementById(\"sharecontent\").content || '',document.getElementById(\"shareimg\").src || '',document.getElementById(\"shareurl\").href || '',document.getElementById(\"sharetitle\").content || ''," + type + "," + functionType + ");}" +"catch(e){window.DOCUMENT.setShare('','','',''," + type + "," + functionType + ")}");
            }
        }
        return true;
    }

3.写一个类，提供一个方法setShare给js调用

public class ParseHtmlContent {

    public static final String DOCUMENT = "DOCUMENT";
    private String shareImg;
    private String shareUrl;
    private String shareContent;
    private String shareTitle;
    private IShareContent iShareContent;
    private Share specialShare;

       /**
     * 网页中js读取分享后调用该方法传值到安卓原生方法
     * @param shareContent 分享内容
     * @param shareImg 分享图片
     * @param shareUrl 分享链接
     * @param shareTitle 分享标题
     * @param type 分享平台
     * @param functionType 功能类型  1：分享  2：复制链接
     */
    @JavascriptInterface
    @SuppressWarnings("unused")
    public void setShare(String shareContent,String shareImg,String shareUrl,String shareTitle,String type,String functionType) {
        this.shareContent = shareContent;
        this.shareImg = shareImg;
        this.shareUrl = shareUrl;
        this.shareTitle = shareTitle;
        boolean mIsNeedShare;
        int mFunctionType = 0;
        if(TextUtil.isValidate(functionType)){
            mFunctionType = Integer.valueOf(functionType);
        }
        iShareContent.onSuccess(shareContent, shareImg, shareUrl, shareTitle, type, specialShare,mFunctionType);
    }

    interface IShareContent{
        /**
         * 从网页中读取分享成功后回调该方法
         * @param shareContent 分享内容
         * @param shareImg 分享图片
         * @param shareUrl 分享链接
         * @param shareTitle 分享标题
         * @param type 分享平台
         * @param specialShare 特殊分享
         * @param functionType 功能类型  1：分享  2：复制链接
         */
        void onSuccess(String shareContent,String shareImg,String shareUrl,String shareTitle,String type,Share specialShare,int functionType);
    }

    /**
     * @param iShareContent
     * @param specialShare 若页面不存在特殊分享传null
     */
    public void setIShareContent(IShareContent iShareContent,Share specialShare){
        this.iShareContent = iShareContent;
        this.specialShare = specialShare;
    }
}

4.在webview中做好相应的配置

parseHtmlContent = new ParseHtmlContent();
        parseHtmlContent.setIShareContent(iShareContent,specialShare);
mWebView.addJavascriptInterface(parseHtmlContent,parseHtmlContent.DOCUMENT);

/**
 * 从网页中获取分享内容后回调
 */
    protected ParseHtmlContent.IShareContent iShareContent = new ParseHtmlContent.IShareContent() {
        @Override
        public void onSuccess(String shareContent, String shareImg, String shareUrl, String shareTitle,String type,Share specialShare,int functionType) {
        //在这里调用分享操作
        }
};

5.分享状态回调给web端
在分享回调方法里调用loadJsMethod方法，把状态传给web端

public class LoadJSControl {
    /**
     * 结果状态 1:成功；2:失败；3:取消
     * @param webView
     * @param status
     */
    public static void loadJsMethod(WebView webView, int status){
        if(webView!= null){
            webView.loadUrl("javascript:alertMessage(" + status + ")");
        }
    }
}