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

摘要：已入深夜，不过忽然想起来之前倒腾过的一个关于电子报刊的客户端的时候，就写出来给大家分享一下。大功告成这篇文章主要是便于开发电子报刊应用的时候做服务端，前端，客户端三类开发人员互相了解对方需要做的事情，希望对大家有帮助，求支持。

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

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("
","");

            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":"2015u5e7409u670817u65e5","pageNo":"01","pageName":"u8981u95fb","title":"u7b2cu4e94u5c4au4e2du56fduff08u592au539fuff09u56fdu9645u80fdu6e90u4ea7u4e1au535au89c8u4f1a2015u4f4eu78b3u53d1u5c55u9ad8u5cf0u8bbau575bu5f00u5e55","content":" u672cu62a5u8baf 9u670816u65e5u4e0au5348uff0cu7b2cu4e94u5c4au4e2du56fduff08u592au539fuff09u56fdu9645u80fdu6e90u4ea7u4e1au535au89c8u4f1a2015u4f4eu78b3u53d1u5c55u9ad8u5cf0u8bbau575bu5f00u5e55u3002u7701u59d4u526fu4e66u8bb0u3001u7701u957fu674eu5c0fu9e4fu4f5cu4e86u9898u4e3au300au4f4eu78b3u5f15u9886u521bu65b0u9a71u52a8u7effu8272u53d1u5c55u300bu7684u4e3bu65e8u6f14u8bb2uff08u89c1u7b2c2u7248uff09u3002u79d1u6280u90e8u526fu90e8u957fu674eu840cu81f4u8f9eu3002u526fu7701u957fu5f20u590du660eu4e3bu6301u3002u5e02u59d4u526fu4e66u8bb0u3001u5e02u957fu803fu5f66u6ce2u53cau79d1u6280u90e8u3001u5546u52a1u90e8u3001u56fdu5bb6u80fdu6e90u5c40u7b49u4e3bu529eu5355u4f4du76f8u5173u8d1fu8d23u4ebau51fau5e2du3002u6765u81eau7f8eu56fdu3001u6cf0u56fdu3001u5fb7u56fdu3001u97e9u56fdu3001u745eu5178u3001u4fc4u7f57u65afu3001u52a0u62ffu5927u7b4919u4e2au56fdu5bb6u548cu5730u533au7684u5609u5bbeuff0cu56fdu5185u6e05u534eu5927u5b66u7b4922u6240u9ad8u6821u3001u4e2du56fdu79d1u5b66u9662u7b49155u4e2au79d1u7814u9662u6240u548cu77e5u540du4f01u4e1au7684u4e13u5bb6u3001u5b66u8005800u4f59u4ebau53c2u52a0u9ad8u5cf0u8bbau575bu5f00u5e55u5f0fu53cau4e3bu8bbau575bu3002u6cf0u56fdu524du526fu603bu7406u3001u4e16u754cu8d38u6613u7ec4u7ec7u524du603bu5e72u4e8bu7d20u5e15u731cu00b7u5df4u5c3cu5df4u6ef4uff0cu56fdu52a1u9662u53d1u5c55u7814u7a76u4e2du5fc3u539fu526fu4e3bu4efbu5362u4e2du539fuff0cu4e2du56fdu5de5u7a0bu9662u9662u58ebu3001u6e05u534eu5927u5b66u6559u6388u91d1u6d8cuff0cu7f8eu56fdu6000u4fc4u660eu5927u5b66u80fdu6e90u5b66u9662u9662u957fu9a6cu514bu00b7u8bfau745fu59c6uff0cu4e2du56fdu7164u70adu79d1u5de5u96c6u56e2u8463u4e8bu957fu738bu91d1u534euff0cu7f8eu56fdu80fdu6e90u90e8u5316u77f3u80fdu6e90u4e2du56fdu4e8bu52a1u9996u5e2du4ee3u8868u8c2du5146u94eeu53d1u8868u6f14u8bb2u3002uff08u6f14u8bb2u5185u5bb9u5747u89c1u7b2c2u7248uff09


 u674eu5c0fu9e4fu5728u4e3bu65e8u6f14u8bb2u4e2du7cfbu7edfu4ecbu7ecdu4e86u6211u7701u5728u63a8u52a8u7effu8272u4f4eu78b3u53d1u5c55u65b9u9762u8fdbu884cu7684u52aau529bu548cu63a2u7d22u3002u4ed6u8bf4uff0cu5f53u524duff0cu5c71u897fu6b63u5728u79efu6781u6784u5efau4f4eu78b3u53d1u5c55u7684u7ec4u7ec7u4f53u7cfbuff0cu52a0u5febu5efau8bbeu4f4eu78b3u53d1u5c55u7684u79d1u7814u9ad8u5730uff0cu52aau529bu5b9eu73b0u4f4eu78b3u53d1u5c55u7684u6280u672fu7a81u7834uff1bu5927u529bu52a0u5febu4ea7u4e1au8f6cu578bu6b65u4f10uff0cu79efu6781u7a33u59a5u63a8u8fdbu4ee5u7164u70adu4e3au4e3bu7684u80fdu6e90u4f53u5236u6539u9769uff1bu5efau7acbu5b8cu5584u79d1u5b66u51cfu6392u3001u8282u80fdu964du8017u7684u957fu6548u673au5236uff1bu72e0u6293u5faau73afu7ecfu6d4eu3001u9020u6797u7effu5316u3001u751fu6001u73afu5883u6cbbu7406u4feeu590du3001u91cdu70b9u57ceu5e02u73afu5883u7efcu5408u6cbbu7406u7b49u5de5u4f5cu3002u63a8u8fdbu7effu8272u53d1u5c55u3001u4f4eu78b3u53d1u5c55u5df2u6210u4e3au5c71u897fu5404u7ea7u515au59d4u3001u653fu5e9cu3001u4f01u4e1au548cu4ebau6c11u7fa4u4f17u7684u5171u540cu884cu52a8u3002u5728u9610u8ff0u6211u7701u4e0bu4e00u6b65u63a8u52a8u7effu8272u4f4eu78b3u53d1u5c55u7684u601du8defu548cu4e3eu63aau65f6uff0cu674eu5c0fu9e4fu8bf4uff0cu7effu8272u4f4eu78b3u53d1u5c55uff0cu4e0du4ec5u662fu7ecfu6d4eu793eu4f1au53d1u5c55u65b9u5f0fu7684u6df1u523bu53d8u9769uff0cu800cu4e14u662fu4ebau7c7bu53d1u5c55u6a21u5f0fu7684u6df1u523bu53d8u9769u3002u5f53u524duff0cu7effu8272u4f4eu78b3u53d1u5c55uff0cu65e2u9762u4e34u4e25u5cfbu6311u6218uff0cu4e5fu5b58u5728u96beu5f97u673au9047u3002u5c71u897fu5c06u7d27u7d27u56f4u7ed5u201cu56dbu4e2au5168u9762u201du6218u7565u5e03u5c40uff0cu6309u7167u52a0u5febu201cu516du5927u53d1u5c55u201du7684u603bu4f53u90e8u7f72uff0cu575au6301u5411u521bu65b0u8981u52a8u529buff0cu5411u6539u9769u8981u6d3bu529buff0cu5411u5f00u653eu8981u7a7au95f4uff0cu7740u529bu63a8u8fdbu53d1u5c55u7406u5ff5u521bu65b0u3001u79d1u5b66u6280u672fu521bu65b0u3001u4f53u5236u673au5236u521bu65b0u3001u54c1u724cu548cu5546u4e1au6a21u5f0fu53cau4f01u4e1au7ba1u7406u521bu65b0u3001u5bf9u5916u5408u4f5cu65b9u5f0fu521bu65b0uff0cu4ee5u5168u9762u521bu65b0u63a8u52a8u7effu8272u53d1u5c55u3001u4f4eu78b3u53d1u5c55uff0cu548cu7701u5185u5916u3001u56fdu5185u5916u7684u670bu53cbu4eecu4e00u9053uff0cu5171u540cu4e3au4e2du56fdu4e43u81f3u5168u7403u7684u80fdu6e90u9769u547du548cu4f4eu78b3u7effu8272u53d1u5c55u4f5cu51fau65b0u7684u8d21u732eu3002


 u9ad8u5cf0u8bbau575bu4e0auff0cu56f4u7ed5u201cu9ed1u8272u7164u70adu7effu8272u53d1u5c55u3001u9ad8u78b3u8d44u6e90u4f4eu78b3u53d1u5c55u201du7684u4e3bu9898uff0cu7d20u5e15u731cu00b7u5df4u5c3cu5df4u6ef4u3001u5362u4e2du539fu3001u91d1u6d8cu3001u9a6cu514bu00b7u8bfau745fu59c6u3001u738bu91d1u534eu3001u8c2du5146u94eeu5206u522bu4f5cu4e86u9898u4e3au300au4f4eu78b3u7ecfu6d4euff1au672au6765u5168u7403u7ecfu6d4eu53d1u5c55u7684u57fau77f3u300bu300au4f4eu78b3u53d1u5c55u4e0eu7ecfu6d4eu8f6cu578bu300bu300au91cdu65b0u805au7126u7164u5316u5de5u300bu300au8d44u6e90u578bu5730u533au7684u6311u6218u4e0eu673au9047u300bu300au7164u70adu8d44u6e90u6e05u6d01u9ad8u6548u5229u7528u6280u672fu53d1u5c55u300bu300au6d01u51c0u7a7au6c14u7684u6210u672cu4e0eu6548u76cau300bu7684u6f14u8bb2u30026u4f4du5609u5bbeu7684u6f14u8bb2uff0cu7d27u7d27u56f4u7ed5u8bbau575bu4e3bu9898uff0cu6709u7684u653eu773cu5168u7403u7ecfu6d4eu53d1u5c55uff0cu6709u7684u7acbu8db3u5168u56fdu7ecfu6d4eu8f6cu578bu53d1u5c55uff0cu6709u7684u7740u773cu5730u533au53efu6301u7eedu53d1u5c55uff0cu6709u7684u805au7126u884cu4e1au79d1u6280u521bu65b0uff0cu6709u7684u4e13u6ce8u4e8eu4f4eu78b3u7effu8272u53d1u5c55u7684u6280u672fu7ecfu6d4eu5206u6790uff0cu89c2u70b9u65b0u9896uff0cu5185u5bb9u4e30u5bccuff0cu8bbau8ff0u6709u529buff0cu6f14u8bb2u73b0u573au4e0du65f6u54cdu8d77u9635u9635u638cu58f0u3002


 u4f4eu78b3u53d1u5c55u9ad8u5cf0u8bbau575bu662fu4e2du56fduff08u592au539fuff09u56fdu9645u80fdu6e90u4ea7u4e1au535au89c8u4f1au7684u91cdu8981u7ec4u6210u90e8u5206uff0cu7d27u6263u4f4eu78b3u53efu6301u7eedu53d1u5c55u7684u4e3bu7ebfuff0cu4ee5u201cu9ed1u8272u7164u70adu7effu8272u53d1u5c55u3001u9ad8u78b3u8d44u6e90u4f4eu78b3u53d1u5c55u201du4e3au6c38u6052u4e3bu9898uff0cu662fu4e00u4e2au5b9au671fu5316u3001u56fdu9645u5316u3001u9ad8u7aefu5316u3001u4e13u4e1au5316u7684u8bbau575buff0cu5df2u6210u4e3au4fc3u8fdbu4f4eu78b3u7effu8272u53d1u5c55u7684u91cdu8981u56fdu9645u4ea4u6d41u5408u4f5cu5e73u53f0u3002u672cu5c4au9ad8u5cf0u8bbau575bu75311u4e2au4e3bu8bbau575bu30011u4e2au5206u8bbau575bu548c6u573au4f4eu78b3u53d1u5c55u8bb2u5ea7u6784u6210u3002u671fu95f4uff0cu8fd8u5c06u53ecu5f00u5c71u897fu7701u4f4eu78b3u53d1u5c55u4e13u5bb6u54a8u8be2u59d4u5458u4f1a2015u5e74u5e74u4f1au3002u4e3bu8bbau575bu4ee5u201cu79d1u5b66u51cfu6392u3001u4f4eu78b3u521bu65b0u201du4e3au4e3bu8981u5185u5bb9uff0cu5206u8bbau575bu4ee5u201cu71c3u7164u7535u5382u8d85u4f4eu6392u653eu7684u6280u672fu8fdbu5c55u53cau672au6765u5c55u671bu201du4e3au4e3bu8981u5185u5bb9u3002u6765u81eau56fdu5185u5916u653fu5e9cu90e8u95e8u3001u5de5u5546u754cu3001u79d1u5b66u7814u7a76u9886u57dfu7684u4e13u5bb6u3001u5b66u8005u548cu4f01u4e1au9ad8u7ba1uff0cu5171u8bddu4f4eu78b3u53d1u5c55u65b0u601du7ef4u3001u65b0u6280u672fu3001u65b0u8d8bu52bfuff0cu8be0u91cau4e16u754cu4f4eu78b3u53d1u5c55u7684u7406u5ff5u548cu65b9u5411u3002uff08u5f20u6d77u745eu3001u9f50u5411u771fuff09u56feu4e3au7b2cu4e94u5c4au4e2du56fduff08u592au539fuff09u56fdu9645u80fdu6e90u4ea7u4e1au535au89c8u4f1a2015u4f4eu78b3u53d1u5c55u9ad8u5cf0u8bbau575bu73b0u573au3002u7c73u56fdu4f1fu6444","src":"u6765u6e90uff1au592au539fu65e5u62a5","subTitle":" u674eu5c0fu9e4fu4f5cu4e3bu65e8u6f14u8bb2 u674eu840cu81f4u8f9e u5f20u590du660eu4e3bu6301 u803fu5f66u6ce2u7b49u51fau5e2d ","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数据中新闻中的标题，详情，图片，还有分享地址取出来放到对应的显示位置即可。
大功告成！
这篇文章主要是便于开发电子报刊应用的时候做服务端，前端，客户端三类开发人员互相了解对方需要做的事情，希望对大家有帮助，求支持。