了解Android微信里的WebView是如何实现分享的功能

本文是通过一些技巧，使用javascript与android webview之间的通讯，去获得微信公众号文章的分享标题与图片链接等信息。目的是模仿微信的浏览器是如何获取内容去进行分享，从而将这种技术引入到自己的项目中。而微信浏览器里，读取分享内容有两种方式，一种是通过读取网页的标题与首张图片链接作为分享的内容；另一种是公众号后台生成的文章与授权第三方网站使用js-sdk的去自定义分享内容。

先对比两种分享的效果

区别还是挺大的，要做更好的用户体验，就需要有耐心去突破。

普通网页抓取的分享内容

换取标题，这个比较简单，webview.getTitle()

而读取首张图片地址，简单方式可以在WebViewClient里覆写onLoadResource方法，然后判断是否为图片的链接，如下

@Overridepublic void onLoadResource(WebView view, String url) {    super.onLoadResource(view, url);    //读取加载中的资源里的图片    if(cacheFirstLoadImageUrl == null && !TextUtils.isEmpty(url)) {        if(url.contains(".png") || url.contains(".jpg")) {            cacheFirstLoadImageUrl = url;        }    }}

当然，如果网页没有图片，则可以用网页的favicon，webview.getFavicon()

抓取微信公众号文章的分享内容

在微信公众号的后台，有一个素材管理，可以通过它里面的文章编辑器来编写或修改文章，然后保存发布后，会固定生成一个链接。而文章链接是会以固定的host地址mp.weixin.qq.com进行发布，如下:

http://mp.weixin.qq.com/s?__biz=MzA5MTA2MzkyOQ==&mid=257050763&idx=1&sn=6984b946e5fd618a5f42e071d1729a7a&scene=0#rd

然后分析网页源码，在底部可以发现如下javascript代码:

<script type="text/javascript">      var not_in_mm_css = "http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/not_in_mm2637ae.css";      var windowwx_css = "http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/style/page/appmsg/page_mp_article_improve_pc2637ae.css";      var tid = "";      var aid = "";      var appuin = "MzA5MTA2MzkyOQ==";      var source = "0";      var scene = 75;      var itemidx = "";      var nickname = "CodeBoy助手";      var ct = "1438614177";      var user_name = "gh_7809f2e62230";      var user_name_new = "";      var fakeid   = "";      var version   = "";      var is_limit_user   = "0";      var msg_title = "CodeBoy微信抢红包外挂";      var msg_desc = "Android微信抢红包外挂实现源码与详解";      var msg_cdn_url = "http://mmbiz.qpic.cn/mmbiz/mdBqiaB1jx3ATKrHYu0rg7tTIWEVLqz5nQuMNlvgianJDD7G33iao85IUVgQpjO11icJsmojlCY2XFAapyXiaMiafW5g/0?wx_fmt=jpeg";      var msg_link = "http://mp.weixin.qq.com/s?__biz=MzA5MTA2MzkyOQ==&amp;mid=257050763&amp;idx=1&amp;sn=6984b946e5fd618a5f42e071d1729a7a#rd";      var user_uin = "0"*1;      var msg_source_url = 'http://www.happycodeboy.com/index.php/archives/10/#rd';      var img_format = 'jpeg';      var networkType;      var appmsgid = '' || '257050763';      var comment_id = "0" * 1;      var svr_time = "1438966394" * 1;      var comment_enabled = "" * 1;      var is_need_reward = "0" * 1;      var is_https_res = ("" * 1) && (location.protocol == "https:");      var devicetype = "";      var source_username = "";      var show_comment = "";      var __appmsgCgiData = {            can_use_page : "0"*1,            card_pos : "",            copyright_stat : "0",            hd_head_img : "http://wx.qlogo.cn/mmhead/Q3auHgzwzM54RqtxygzEE174cxI2BWaTDiaTtjWNaTObpib5bCnlGl4A/0"||(window.location.protocol+"//"+window.location.host + "http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/pic/appmsg/pic_rumor_link.2x264e76.jpg")      };      var _empty_v = "http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/images/pic/pages/voice/empty26f1f1.mp3";      seajs.use("appmsg/index.js");  </script>

通过以上代码，我们就可以知道其中一些变量的对应关系

字段 含义 msg_title 标题 msg_desc 描述 msg_cdn_url 图片链接 msg_link 分享链接

通过WebView读取javascript全局变量

通过上述分析，我们已经知道分享文章里的标题、描述、图片、链接是从哪里得到的，那接下来，我们就通过编码方式，去读取。

首先，我们要添加一个javascrtip访问到java层代码的入口，目的是为了回调javascript的全局变量到java层，webView.addJavascriptInterface(new CodeBoyJsInterface(), "codeboy");而CodeBoyJsInterface里有一个callme方法。

接下来，在加载一个页面成功后，我们就要调用javascript的方法去读到全局变量。如:webview.loadUrl("javascript:window.codeboy.callme(msg_title)"); 这样就在CodeBoyJsInterface.callme的方法里回接收到msg_title这个变量的值。就这样，可以实现一个获取javascript页面里变量，从而有更多进一步的操作。

以下是示例的完整代码:

package com.codeboy.android;import android.annotation.SuppressLint;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Parcel;import android.os.Parcelable;import android.support.v7.app.AppCompatActivity;import android.text.Html;import android.text.TextUtils;import android.util.Log;import android.webkit.JavascriptInterface;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;import org.json.JSONException;import org.json.JSONObject;public class MainActivity extends AppCompatActivity {    private static final String TAG = "MainActivity";    //缓存第一个加载的图片链接    private String cacheFirstLoadImageUrl = null;    private WebView webView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        webView = (WebView) findViewById(R.id.webview);        webView.setWebViewClient(new CBWebViewClient());        WebSettings settings = webView.getSettings();        //允许javascript的功能        settings.setJavaScriptEnabled(true);        //自适应屏幕        settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS);        settings.setUseWideViewPort(true);        settings.setLoadWithOverviewMode(true);        //添加一个允许javascript访问方法，如 window.codeboy.callme("hello codeboy");        webView.addJavascriptInterface(new CodeBoyJsInterface(), "codeboy");        //加载测试的地址        webView.loadUrl("http://mp.weixin.qq.com/s?__biz=MzA5MTA2MzkyOQ==&mid=257050763&idx=1&sn=6984b946e5fd618a5f42e071d1729a7a&scene=0#rd");    }    /*    * tips    * 实现Parcelable接口，主要是避免因为混淆而导致方法名变更    * */    @SuppressLint("JavascriptInterface")    public class CodeBoyJsInterface implements Parcelable {        public CodeBoyJsInterface() {        }        //解决throws Uncaught Error: Error calling method on NPObject on Android        @JavascriptInterface        public void callme(final String str) {            //这里是javascript里回调的，注意回调是通过非UI线程            try {                JSONObject json = new JSONObject(str);                String msg_title = getJsonStr(json, "msg_title");                String msg_desc = getJsonStr(json, "msg_desc");                String msg_link = getJsonStr(json, "msg_link");                String msg_cdn_url = getJsonStr(json, "msg_cdn_url");                Log.d(TAG, "msg_title:" + msg_title + " msg_desc:" + msg_desc                        + " msg_link:" + msg_link + " msg_cdn_url:" + msg_cdn_url);            } catch (JSONException e) {                e.printStackTrace();            }        }        private String getJsonStr(JSONObject json, String key) {            try {                String value = json.getString(key);                //对数据进行转义                return Html.fromHtml(value).toString();            } catch (JSONException e) {                e.printStackTrace();            }            return null;        }        @Override        public int describeContents() {            //ignore            return 0;        }        @Override        public void writeToParcel(Parcel dest, int flags) {            //ignore        }    }    class CBWebViewClient extends WebViewClient {        @Override        public void onPageFinished(WebView view, String url) {            super.onPageFinished(view, url);            Log.v(TAG, "onPageFinished 加载完成：" + url);            //页面加载完毕后，判断是否为微信的公众平台文章            if (url.startsWith("http://mp.weixin.qq.com") || url.startsWith("https://mp.weixin.qq.com")) {                //读取分享的信息，将数据以json的格式返回,方便日后扩展                view.loadUrl("javascript:window.codeboy.callme(JSON.stringify({" +                        "\"msg_title\":msg_title.toString()," +                        "\"msg_desc\":msg_desc.toString()," +                        "\"msg_link\":msg_link.toString()," +                        "\"msg_cdn_url\":msg_cdn_url.toString()" +                        "}))");            }        }        @Override        public boolean shouldOverrideUrlLoading(WebView view, String url) {            view.loadUrl(url);            return true;        }        @Override        public void onPageStarted(WebView view, String url, Bitmap favicon) {            super.onPageStarted(view, url, favicon);            cacheFirstLoadImageUrl = null;        }        @Override        public void onLoadResource(WebView view, String url) {            super.onLoadResource(view, url);            //读取加载中的资源里的图片            if (cacheFirstLoadImageUrl == null && !TextUtils.isEmpty(url)) {                if (url.contains(".png") || url.contains(".jpg")) {                    cacheFirstLoadImageUrl = url;                }            }        }    }}

以下是运行的打印结果:

08-08 02:01:54.728  17198-17352/com.codeboy.android D/MainActivity﹕ msg_title:CodeBoy微信抢红包外挂 msg_desc:Android微信抢红包外挂实现源码与详解 msg_link:http://mp.weixin.qq.com/s?__biz=MzA5MTA2MzkyOQ==&mid=257050763&idx=1&sn=6984b946e5fd618a5f42e071d1729a7a#rd msg_cdn_url:http://mmbiz.qpic.cn/mmbiz/mdBqiaB1jx3ATKrHYu0rg7tTIWEVLqz5nQuMNlvgianJDD7G33iao85IUVgQpjO11icJsmojlCY2XFAapyXiaMiafW5g/0?wx_fmt=jpeg

版权声明：

文章为原创，CodeBoy版权所有，如需转载请注明出处。

本文来自:http://www.happycodeboy.com/index.php/archives/13/

关注微信订阅号：CodeBoy助手