报纸等电子报刊的客户端的实现原理解密

已入深夜，不过忽然想起来之前倒腾过的一个关于电子报刊的客户端的demo时候，就写出来给大家分享一下。

我以android客户端的作为例子（IOS大家自己一样的做法）

1 先说HTML怎么玩，Look

看见蓝色的方框区域没有，其实我们看到的报纸没有想象中的那么复杂，他只是个背景图片而已，真正起作用的是html中map跟area标签空间，正如我们看到的蓝色线框，那块局域就是一个area，他的画法就是跟coords这个属性有关，不知道怎么画，不要紧，请看http://www.w3school.com.cn/tags/att_area_coords.asp,后面的href就是超链接，他的实际作用请接着看。

2 再看webView跟android内部代码怎么玩

mytywebview2.loadUrl("http://xxx.xxx.xx:88/epaper/index.php?r=article/paper&date=20150917&pageNo=01");

//启用支持javascript
WebSettings settings3 = mytywebview2.getSettings();
settings3.setJavaScriptEnabled(true);//设置支持JavaScript脚本
settings3.setBuiltInZoomControls(true); // 设置显示缩放按钮
settings3.setSupportZoom(true); // 支持缩放
settings3.setLoadWithOverviewMode(true);

mytywebview2.setWebViewClient(new WebViewClient() {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        Intent intent = new Intent(context, NewsDetailActivity.class);
        intent.putExtra("url", url);
        context.startActivity(intent);

        Log.i("testView", "the URL I open is:"+url);
        return true;
    }

});

大家请留意上述代码中putExtra里面的url就是html里面的area标签中href里面的内容。当我们点击电子报刊的对应area区域的时候，我们会将url传给NewsDetailActivity这个界面。至此webview的工作已经结束了，让我们接着看android 的Activity里面处理

3 android Activity的内部处理
我将完整的NewsDetailActivity代码贴出，然后细节稍微分析一下，代码如下：

import android.os.Bundle;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import android.os.Handler;
import android.widget.TextView;

/**
 * Created by chenqiang on 2015/9/16.
 */
public class NewsDetailActivity extends AppCompatActivity {

    private String TAG = "NewsDetailActivity";

    private String url;

    private TextView tvTitle;
    private TextView tvContent;


    private Handler handler = new Handler() {
        public void handleMessage(Message msg) {


            String title = "新闻标题:"+msg.getData().getString("title");
            String content = msg.getData().getString("content");

            content = content.replace("<br />","");

            tvTitle.setText(title);
            tvContent.setText(content);

            Log.i(TAG, "11新闻标题结果:" + title);

            Log.i(TAG,"11新闻内容结果:"+content);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.new_detail);

        tvTitle = (TextView)findViewById(R.id.newsTitle);
        tvContent = (TextView)findViewById(R.id.newsContent);

        this.url = this.getIntent().getStringExtra("url");

        this.getNewsDetais();
    }


    private void getNewsDetais() {
        (new Thread(new Runnable() {
            public void run() {
                NewsDetailActivity.this.showNewsDetails(url);
            }
        })).start();
    }

    public void showNewsDetails(String url){

        String result = commonServer(url,"");
        JSONObject myjObject =null;
        JSONObject myContentObject =null;


        try {
            myjObject = new JSONObject(result);

            myContentObject = new JSONObject(myjObject.getString("article").toString());

//            Log.i(TAG,"新闻标题结果:"+myContentObject.getString("title").toString());
//
//            Log.i(TAG,"新闻内容结果:"+myContentObject.getString("content").toString());

//            Log.i(TAG,"结果:"+myjObject.getString("article").toString());



            Message message=new Message();
            Bundle bundle=new Bundle();
            bundle.putString("title",myContentObject.getString("title").toString()); //用户名
            bundle.putString("content",myContentObject.getString("content").toString()); //用户所属组织名称
            message.setData(bundle);//bundle传值，耗时，效率低
            message.what=1;//标志是哪个线程传数据
            handler.sendMessage(message);//发送message信息


        }catch (JSONException e) {
            e.printStackTrace();
        }



    }

    public String commonServer(String serverUrl,String sendParam){
        String  strUrl=serverUrl;
        URL url=null;
        try{
            url = new URL(strUrl);
            HttpURLConnection urlConn=(HttpURLConnection)url.openConnection();
            urlConn.setDoInput(true);
            urlConn.setDoOutput(true);
            urlConn.setRequestMethod("POST");
            urlConn.setUseCaches(false);
            urlConn.setRequestProperty("Content-type", "application/x-www-form-urlencoded");
            urlConn.setRequestProperty("Charset","UTF-8");

            urlConn.connect();
            DataOutputStream dop = new DataOutputStream(urlConn.getOutputStream());
            dop.writeBytes(sendParam);
            dop.flush();
            dop.close();

            //下面是接受服务端的数据
            BufferedReader bufferReader =new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
            String result="";
            String readLine=null;
            while((readLine=bufferReader.readLine())!=null){
                result+=readLine;
            }
            bufferReader.close();
            urlConn.disconnect();
            return result;
        }catch(MalformedURLException e){
            e.printStackTrace();
        }catch(IOException e){
            e.printStackTrace();
        }
        return "";
    }
}

上述代码中url的http网络请求获取的结果为：

{"article":{"id":"24317","create_time":"2015\u5e7409\u670817\u65e5","pageNo":"01","pageName":"\u8981\u95fb","title":"\u7b2c\u4e94\u5c4a\u4e2d\u56fd\uff08\u592a\u539f\uff09\u56fd\u9645\u80fd\u6e90\u4ea7\u4e1a\u535a\u89c8\u4f1a2015\u4f4e\u78b3\u53d1\u5c55\u9ad8\u5cf0\u8bba\u575b\u5f00\u5e55","content":" \u672c\u62a5\u8baf 9\u670816\u65e5\u4e0a\u5348\uff0c\u7b2c\u4e94\u5c4a\u4e2d\u56fd\uff08\u592a\u539f\uff09\u56fd\u9645\u80fd\u6e90\u4ea7\u4e1a\u535a\u89c8\u4f1a2015\u4f4e\u78b3\u53d1\u5c55\u9ad8\u5cf0\u8bba\u575b\u5f00\u5e55\u3002\u7701\u59d4\u526f\u4e66\u8bb0\u3001\u7701\u957f\u674e\u5c0f\u9e4f\u4f5c\u4e86\u9898\u4e3a\u300a\u4f4e\u78b3\u5f15\u9886\u521b\u65b0\u9a71\u52a8\u7eff\u8272\u53d1\u5c55\u300b\u7684\u4e3b\u65e8\u6f14\u8bb2\uff08\u89c1\u7b2c2\u7248\uff09\u3002\u79d1\u6280\u90e8\u526f\u90e8\u957f\u674e\u840c\u81f4\u8f9e\u3002\u526f\u7701\u957f\u5f20\u590d\u660e\u4e3b\u6301\u3002\u5e02\u59d4\u526f\u4e66\u8bb0\u3001\u5e02\u957f\u803f\u5f66\u6ce2\u53ca\u79d1\u6280\u90e8\u3001\u5546\u52a1\u90e8\u3001\u56fd\u5bb6\u80fd\u6e90\u5c40\u7b49\u4e3b\u529e\u5355\u4f4d\u76f8\u5173\u8d1f\u8d23\u4eba\u51fa\u5e2d\u3002\u6765\u81ea\u7f8e\u56fd\u3001\u6cf0\u56fd\u3001\u5fb7\u56fd\u3001\u97e9\u56fd\u3001\u745e\u5178\u3001\u4fc4\u7f57\u65af\u3001\u52a0\u62ff\u5927\u7b4919\u4e2a\u56fd\u5bb6\u548c\u5730\u533a\u7684\u5609\u5bbe\uff0c\u56fd\u5185\u6e05\u534e\u5927\u5b66\u7b4922\u6240\u9ad8\u6821\u3001\u4e2d\u56fd\u79d1\u5b66\u9662\u7b49155\u4e2a\u79d1\u7814\u9662\u6240\u548c\u77e5\u540d\u4f01\u4e1a\u7684\u4e13\u5bb6\u3001\u5b66\u8005800\u4f59\u4eba\u53c2\u52a0\u9ad8\u5cf0\u8bba\u575b\u5f00\u5e55\u5f0f\u53ca\u4e3b\u8bba\u575b\u3002\u6cf0\u56fd\u524d\u526f\u603b\u7406\u3001\u4e16\u754c\u8d38\u6613\u7ec4\u7ec7\u524d\u603b\u5e72\u4e8b\u7d20\u5e15\u731c\u00b7\u5df4\u5c3c\u5df4\u6ef4\uff0c\u56fd\u52a1\u9662\u53d1\u5c55\u7814\u7a76\u4e2d\u5fc3\u539f\u526f\u4e3b\u4efb\u5362\u4e2d\u539f\uff0c\u4e2d\u56fd\u5de5\u7a0b\u9662\u9662\u58eb\u3001\u6e05\u534e\u5927\u5b66\u6559\u6388\u91d1\u6d8c\uff0c\u7f8e\u56fd\u6000\u4fc4\u660e\u5927\u5b66\u80fd\u6e90\u5b66\u9662\u9662\u957f\u9a6c\u514b\u00b7\u8bfa\u745f\u59c6\uff0c\u4e2d\u56fd\u7164\u70ad\u79d1\u5de5\u96c6\u56e2\u8463\u4e8b\u957f\u738b\u91d1\u534e\uff0c\u7f8e\u56fd\u80fd\u6e90\u90e8\u5316\u77f3\u80fd\u6e90\u4e2d\u56fd\u4e8b\u52a1\u9996\u5e2d\u4ee3\u8868\u8c2d\u5146\u94ee\u53d1\u8868\u6f14\u8bb2\u3002\uff08\u6f14\u8bb2\u5185\u5bb9\u5747\u89c1\u7b2c2\u7248\uff09\r\r
\n \u674e\u5c0f\u9e4f\u5728\u4e3b\u65e8\u6f14\u8bb2\u4e2d\u7cfb\u7edf\u4ecb\u7ecd\u4e86\u6211\u7701\u5728\u63a8\u52a8\u7eff\u8272\u4f4e\u78b3\u53d1\u5c55\u65b9\u9762\u8fdb\u884c\u7684\u52aa\u529b\u548c\u63a2\u7d22\u3002\u4ed6\u8bf4\uff0c\u5f53\u524d\uff0c\u5c71\u897f\u6b63\u5728\u79ef\u6781\u6784\u5efa\u4f4e\u78b3\u53d1\u5c55\u7684\u7ec4\u7ec7\u4f53\u7cfb\uff0c\u52a0\u5feb\u5efa\u8bbe\u4f4e\u78b3\u53d1\u5c55\u7684\u79d1\u7814\u9ad8\u5730\uff0c\u52aa\u529b\u5b9e\u73b0\u4f4e\u78b3\u53d1\u5c55\u7684\u6280\u672f\u7a81\u7834\uff1b\u5927\u529b\u52a0\u5feb\u4ea7\u4e1a\u8f6c\u578b\u6b65\u4f10\uff0c\u79ef\u6781\u7a33\u59a5\u63a8\u8fdb\u4ee5\u7164\u70ad\u4e3a\u4e3b\u7684\u80fd\u6e90\u4f53\u5236\u6539\u9769\uff1b\u5efa\u7acb\u5b8c\u5584\u79d1\u5b66\u51cf\u6392\u3001\u8282\u80fd\u964d\u8017\u7684\u957f\u6548\u673a\u5236\uff1b\u72e0\u6293\u5faa\u73af\u7ecf\u6d4e\u3001\u9020\u6797\u7eff\u5316\u3001\u751f\u6001\u73af\u5883\u6cbb\u7406\u4fee\u590d\u3001\u91cd\u70b9\u57ce\u5e02\u73af\u5883\u7efc\u5408\u6cbb\u7406\u7b49\u5de5\u4f5c\u3002\u63a8\u8fdb\u7eff\u8272\u53d1\u5c55\u3001\u4f4e\u78b3\u53d1\u5c55\u5df2\u6210\u4e3a\u5c71\u897f\u5404\u7ea7\u515a\u59d4\u3001\u653f\u5e9c\u3001\u4f01\u4e1a\u548c\u4eba\u6c11\u7fa4\u4f17\u7684\u5171\u540c\u884c\u52a8\u3002\u5728\u9610\u8ff0\u6211\u7701\u4e0b\u4e00\u6b65\u63a8\u52a8\u7eff\u8272\u4f4e\u78b3\u53d1\u5c55\u7684\u601d\u8def\u548c\u4e3e\u63aa\u65f6\uff0c\u674e\u5c0f\u9e4f\u8bf4\uff0c\u7eff\u8272\u4f4e\u78b3\u53d1\u5c55\uff0c\u4e0d\u4ec5\u662f\u7ecf\u6d4e\u793e\u4f1a\u53d1\u5c55\u65b9\u5f0f\u7684\u6df1\u523b\u53d8\u9769\uff0c\u800c\u4e14\u662f\u4eba\u7c7b\u53d1\u5c55\u6a21\u5f0f\u7684\u6df1\u523b\u53d8\u9769\u3002\u5f53\u524d\uff0c\u7eff\u8272\u4f4e\u78b3\u53d1\u5c55\uff0c\u65e2\u9762\u4e34\u4e25\u5cfb\u6311\u6218\uff0c\u4e5f\u5b58\u5728\u96be\u5f97\u673a\u9047\u3002\u5c71\u897f\u5c06\u7d27\u7d27\u56f4\u7ed5\u201c\u56db\u4e2a\u5168\u9762\u201d\u6218\u7565\u5e03\u5c40\uff0c\u6309\u7167\u52a0\u5feb\u201c\u516d\u5927\u53d1\u5c55\u201d\u7684\u603b\u4f53\u90e8\u7f72\uff0c\u575a\u6301\u5411\u521b\u65b0\u8981\u52a8\u529b\uff0c\u5411\u6539\u9769\u8981\u6d3b\u529b\uff0c\u5411\u5f00\u653e\u8981\u7a7a\u95f4\uff0c\u7740\u529b\u63a8\u8fdb\u53d1\u5c55\u7406\u5ff5\u521b\u65b0\u3001\u79d1\u5b66\u6280\u672f\u521b\u65b0\u3001\u4f53\u5236\u673a\u5236\u521b\u65b0\u3001\u54c1\u724c\u548c\u5546\u4e1a\u6a21\u5f0f\u53ca\u4f01\u4e1a\u7ba1\u7406\u521b\u65b0\u3001\u5bf9\u5916\u5408\u4f5c\u65b9\u5f0f\u521b\u65b0\uff0c\u4ee5\u5168\u9762\u521b\u65b0\u63a8\u52a8\u7eff\u8272\u53d1\u5c55\u3001\u4f4e\u78b3\u53d1\u5c55\uff0c\u548c\u7701\u5185\u5916\u3001\u56fd\u5185\u5916\u7684\u670b\u53cb\u4eec\u4e00\u9053\uff0c\u5171\u540c\u4e3a\u4e2d\u56fd\u4e43\u81f3\u5168\u7403\u7684\u80fd\u6e90\u9769\u547d\u548c\u4f4e\u78b3\u7eff\u8272\u53d1\u5c55\u4f5c\u51fa\u65b0\u7684\u8d21\u732e\u3002\r\r
\n \u9ad8\u5cf0\u8bba\u575b\u4e0a\uff0c\u56f4\u7ed5\u201c\u9ed1\u8272\u7164\u70ad\u7eff\u8272\u53d1\u5c55\u3001\u9ad8\u78b3\u8d44\u6e90\u4f4e\u78b3\u53d1\u5c55\u201d\u7684\u4e3b\u9898\uff0c\u7d20\u5e15\u731c\u00b7\u5df4\u5c3c\u5df4\u6ef4\u3001\u5362\u4e2d\u539f\u3001\u91d1\u6d8c\u3001\u9a6c\u514b\u00b7\u8bfa\u745f\u59c6\u3001\u738b\u91d1\u534e\u3001\u8c2d\u5146\u94ee\u5206\u522b\u4f5c\u4e86\u9898\u4e3a\u300a\u4f4e\u78b3\u7ecf\u6d4e\uff1a\u672a\u6765\u5168\u7403\u7ecf\u6d4e\u53d1\u5c55\u7684\u57fa\u77f3\u300b\u300a\u4f4e\u78b3\u53d1\u5c55\u4e0e\u7ecf\u6d4e\u8f6c\u578b\u300b\u300a\u91cd\u65b0\u805a\u7126\u7164\u5316\u5de5\u300b\u300a\u8d44\u6e90\u578b\u5730\u533a\u7684\u6311\u6218\u4e0e\u673a\u9047\u300b\u300a\u7164\u70ad\u8d44\u6e90\u6e05\u6d01\u9ad8\u6548\u5229\u7528\u6280\u672f\u53d1\u5c55\u300b\u300a\u6d01\u51c0\u7a7a\u6c14\u7684\u6210\u672c\u4e0e\u6548\u76ca\u300b\u7684\u6f14\u8bb2\u30026\u4f4d\u5609\u5bbe\u7684\u6f14\u8bb2\uff0c\u7d27\u7d27\u56f4\u7ed5\u8bba\u575b\u4e3b\u9898\uff0c\u6709\u7684\u653e\u773c\u5168\u7403\u7ecf\u6d4e\u53d1\u5c55\uff0c\u6709\u7684\u7acb\u8db3\u5168\u56fd\u7ecf\u6d4e\u8f6c\u578b\u53d1\u5c55\uff0c\u6709\u7684\u7740\u773c\u5730\u533a\u53ef\u6301\u7eed\u53d1\u5c55\uff0c\u6709\u7684\u805a\u7126\u884c\u4e1a\u79d1\u6280\u521b\u65b0\uff0c\u6709\u7684\u4e13\u6ce8\u4e8e\u4f4e\u78b3\u7eff\u8272\u53d1\u5c55\u7684\u6280\u672f\u7ecf\u6d4e\u5206\u6790\uff0c\u89c2\u70b9\u65b0\u9896\uff0c\u5185\u5bb9\u4e30\u5bcc\uff0c\u8bba\u8ff0\u6709\u529b\uff0c\u6f14\u8bb2\u73b0\u573a\u4e0d\u65f6\u54cd\u8d77\u9635\u9635\u638c\u58f0\u3002\r\r
\n \u4f4e\u78b3\u53d1\u5c55\u9ad8\u5cf0\u8bba\u575b\u662f\u4e2d\u56fd\uff08\u592a\u539f\uff09\u56fd\u9645\u80fd\u6e90\u4ea7\u4e1a\u535a\u89c8\u4f1a\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\uff0c\u7d27\u6263\u4f4e\u78b3\u53ef\u6301\u7eed\u53d1\u5c55\u7684\u4e3b\u7ebf\uff0c\u4ee5\u201c\u9ed1\u8272\u7164\u70ad\u7eff\u8272\u53d1\u5c55\u3001\u9ad8\u78b3\u8d44\u6e90\u4f4e\u78b3\u53d1\u5c55\u201d\u4e3a\u6c38\u6052\u4e3b\u9898\uff0c\u662f\u4e00\u4e2a\u5b9a\u671f\u5316\u3001\u56fd\u9645\u5316\u3001\u9ad8\u7aef\u5316\u3001\u4e13\u4e1a\u5316\u7684\u8bba\u575b\uff0c\u5df2\u6210\u4e3a\u4fc3\u8fdb\u4f4e\u78b3\u7eff\u8272\u53d1\u5c55\u7684\u91cd\u8981\u56fd\u9645\u4ea4\u6d41\u5408\u4f5c\u5e73\u53f0\u3002\u672c\u5c4a\u9ad8\u5cf0\u8bba\u575b\u75311\u4e2a\u4e3b\u8bba\u575b\u30011\u4e2a\u5206\u8bba\u575b\u548c6\u573a\u4f4e\u78b3\u53d1\u5c55\u8bb2\u5ea7\u6784\u6210\u3002\u671f\u95f4\uff0c\u8fd8\u5c06\u53ec\u5f00\u5c71\u897f\u7701\u4f4e\u78b3\u53d1\u5c55\u4e13\u5bb6\u54a8\u8be2\u59d4\u5458\u4f1a2015\u5e74\u5e74\u4f1a\u3002\u4e3b\u8bba\u575b\u4ee5\u201c\u79d1\u5b66\u51cf\u6392\u3001\u4f4e\u78b3\u521b\u65b0\u201d\u4e3a\u4e3b\u8981\u5185\u5bb9\uff0c\u5206\u8bba\u575b\u4ee5\u201c\u71c3\u7164\u7535\u5382\u8d85\u4f4e\u6392\u653e\u7684\u6280\u672f\u8fdb\u5c55\u53ca\u672a\u6765\u5c55\u671b\u201d\u4e3a\u4e3b\u8981\u5185\u5bb9\u3002\u6765\u81ea\u56fd\u5185\u5916\u653f\u5e9c\u90e8\u95e8\u3001\u5de5\u5546\u754c\u3001\u79d1\u5b66\u7814\u7a76\u9886\u57df\u7684\u4e13\u5bb6\u3001\u5b66\u8005\u548c\u4f01\u4e1a\u9ad8\u7ba1\uff0c\u5171\u8bdd\u4f4e\u78b3\u53d1\u5c55\u65b0\u601d\u7ef4\u3001\u65b0\u6280\u672f\u3001\u65b0\u8d8b\u52bf\uff0c\u8be0\u91ca\u4e16\u754c\u4f4e\u78b3\u53d1\u5c55\u7684\u7406\u5ff5\u548c\u65b9\u5411\u3002\uff08\u5f20\u6d77\u745e\u3001\u9f50\u5411\u771f\uff09\u56fe\u4e3a\u7b2c\u4e94\u5c4a\u4e2d\u56fd\uff08\u592a\u539f\uff09\u56fd\u9645\u80fd\u6e90\u4ea7\u4e1a\u535a\u89c8\u4f1a2015\u4f4e\u78b3\u53d1\u5c55\u9ad8\u5cf0\u8bba\u575b\u73b0\u573a\u3002\u7c73\u56fd\u4f1f\u6444","src":"\u6765\u6e90\uff1a\u592a\u539f\u65e5\u62a5","subTitle":" \u674e\u5c0f\u9e4f\u4f5c\u4e3b\u65e8\u6f14\u8bb2 \u674e\u840c\u81f4\u8f9e \u5f20\u590d\u660e\u4e3b\u6301 \u803f\u5f66\u6ce2\u7b49\u51fa\u5e2d ","imageCount":"1"},"imgs":[{"url":"http:\/\/tyrbw.com:88\/admin\/assets\/article_img\/20150917\/b_51c460645634596f785b4e46c984f856.jpg"}],"comment":{"content":"","create_time":"","nick":""},"ccount":"0","share":"http:\/\/tyrbw.com:88\/epaper\/index.php?r=share\/share&i=24317&t=0&n=Article"}

然后我们做的事情就是把json数据中新闻中的标题，详情，图片，还有分享地址取出来放到对应的显示位置即可。
大功告成！
这篇文章主要是便于开发电子报刊应用的时候做服务端，前端，客户端三类开发人员互相了解对方需要做的事情，希望对大家有帮助，求支持。