了解Android微信里的WebView是如何实现分享的功能
2015-08-08 02:19
1571 查看
了解Android微信里的WebView是如何实现分享的功能
本文是通过一些技巧,使用javascript与
android webview之间的通讯,去获得微信公众号文章的分享标题与图片链接等信息。目的是模仿微信的浏览器是如何获取内容去进行分享,从而将这种技术引入到自己的项目中。而微信浏览器里,读取分享内容有两种方式,一种是通过读取网页的标题与首张图片链接作为分享的内容;另一种是公众号后台生成的文章与授权第三方网站使用js-sdk的去自定义分享内容。
先对比两种分享的效果
区别还是挺大的,要做更好的用户体验,就需要有耐心去突破。
普通网页抓取的分享内容
换取标题,这个比较简单,webview.getTitle()
而读取首张图片地址,简单方式可以在
WebViewClient里覆写
onLoadResource方法,然后判断是否为图片的链接,如下
[code]@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; } } }
当然,如果网页没有图片,则可以用网页的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代码:
[code]<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==&mid=257050763&idx=1&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页面里变量,从而有更多进一步的操作。
以下是示例的完整代码:
[code]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; } } } } }
以下是运行的打印结果:
[code] 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助手
![](http://www.happycodeboy.com/images/qrcode_258.jpg)
相关文章推荐
- 04. Android studio 发布APK
- Android中acyivity的生命周期
- Android自定义属性
- iOS之学习CoreData的笔记
- Swift学习笔记(二十三)——Swift泛型初识
- Android 图片加载库
- Swift学习笔记(二十二)——字典的基本操作
- Android使用xUtils方便地下载 / xUtils介绍
- 《Objective-C基础教程》第5章 复合
- adb install将app安装到eclipse Android sdk 模拟器上看效果
- iOS 枚举加位操作
- unity代码反混淆
- iOS开发中的objectForKey和valueForKey在NSDictionary中的区别
- android安卓开发之图片轮播器demo
- unity 反编译 step2 dll -->reflector
- 在android中画圆形图片的几种办法
- iOS欢迎界面Launch Screen动态加载广告
- Lala Land and Apple Trees
- unity 反编译 step1 disUnity
- android端Jackson解析json