尝试用kotlin做一个app（九）

把新闻详情页的界面做得漂亮一些。

1.新闻的内容，它的字体格式，或许不应该在后台控制，而应该在前端使用样式来控制。我考虑要不要把后台kindeditor去掉了

2.我开始是想着在原来前端html不改变的情况下，直接读取其页面，但是里面调用了kotlin函数之后，原来的html就不能正常显示了。那似乎需要为webview定制一个html页面

3.假设原来html页面没有调用kotlin函数，那么是不是可以在webview加载完页面之后，对原html页面做一些修改，修改成适应手机屏幕的美观的页面。这貌似太复杂。

4.如果是为webview定制的页面，那就比较方便了。去掉一些左右边距，居中等样式，字体尺寸也修改一下，为<p>标签设置word-break:break-all;再这把图片缩放成适应手机屏幕，参考android webview加载html图片自适应手机屏幕大小

inner class myWebViewClient:WebViewClient(){
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
            var js:String="javascript:(function(){" +
                    "var obJs=document.getElementsByTagName('img');"+
                    "for(var i=0;i<obJs.length;i++){"+
                    "var img=obJs[i];"+
                    "img.style.maxWidth='90%';img.style.height='auto';"+
                    "}"+
                    "})()";
            wv_newsPage.loadUrl(js)
        }

    }

5.手机新闻页面貌似越简单越好。有个细节文章p标签css首行缩进text-indent后，图片img设置不缩进

6.创建日期,(JavaScript) 时间转为几天前、几小时前、几分钟前

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新闻标题</title>
<style type="text/css">
    body{
        /*margin:0;
        padding:0;*/
    }
    .newsheader{
    }
    h1,h2{
        margin:0;
        padding:0;
    }
    .newsheadtitle{
        
    }
    .headappend{
        color:#666;
    }
    .headappend a{
        text-decoration:none;
        color:#666;
    }
    
    .headappend a:hover{
        text-decoration:underline;
    }
    .headpubdate{
        display:inline-block;
        
    }
    
    .headorigin{
        color:#6993c5;
        margin-right:10px;
        display:inline-block;
    }
    .newscontent{
        
    }
    .newscontent p{
        font-size:18px;
        color:#333;
        line-height:1.4em;
        text-indent:2em;
        margin:0;
        padding:0;
        word-break:break-all;
    }
    .newstext{
        padding:20px 0px 30px 0px;
    }
    
    .newsediter{
        color:#666;
        font-size:14px !important;
        display:inline-block;
        float:right;
    }
    img{    
        /*display:block;*/
        margin-top:20px;
        margin-bottom:20px;
    }
    
</style>
<script type="text/javascript">
    window.onload=function(){
        
        loadData();
        
    }
    
    function loadData(){
        if(window.XMLHttpRequest){
            var xmlhttp=new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        xmlhttp.onreadystatechange=function(){
            var result=xmlhttp.responseText;
            var data=eval("("+result+")")
            var content=data.result.content;
            var pubdate=data.result.pubdate;
            var author=data.result.author;
            var href=data.result.href;
            var origin=data.result.origin;
            var maintitle=data.result.title;
            document.getElementById("maintitle").innerHTML=maintitle;
            document.getElementById("newstext").innerHTML=content;
            document.getElementById("newsediter").innerHTML="作者：&nbsp;&nbsp"+author;
            document.getElementById("headorigin").innerHTML=origin
            //document.getElementById("pubdate").innerHTML=(new Date(parseInt(pubdate))).toLocaleString();
            document.getElementById("pubdate").innerHTML=getDateDiff(parseInt(pubdate));
            
        };
        title=window.jsInterface.getTitle();
        var str="/clientapi/api?title="+title;
        xmlhttp.open("get",str,false);
        xmlhttp.send(null);
        
    }
    
    function getDateDiff(dateTimeStamp) {
        var timestamp = new Date(dateTimeStamp).getTime();
    
        var minute = 1000 * 60;
        var hour = minute * 60;
        var day = hour * 24;
        var halfamonth = day * 15;
        var month = day * 30;
        var year = day * 365;
        var now = new Date().getTime();
        var diffValue = now - timestamp;
        var result;
        if (diffValue < 0) {
            return;
        }
        var yearC = diffValue / year;
        var monthC = diffValue / month;
        var weekC = diffValue / (7 * day);
        var dayC = diffValue / day;
        var hourC = diffValue / hour;
        var minC = diffValue / minute;
        if (yearC >= 1) {
            result = "" + parseInt(yearC) + "年前";
        } else if (monthC >= 1) {
            result = "" + parseInt(monthC) + "月前";
        } else if (weekC >= 1) {
            result = "" + parseInt(weekC) + "周前";
        } else if (dayC >= 1) {
            result = "" + parseInt(dayC) + "天前";
        } else if (hourC >= 1) {
            result = "" + parseInt(hourC) + "小时前";
        } else if (minC >= 1) {
            result = "" + parseInt(minC) + "分钟前";
        } else
            result = "刚刚";
        return result;
    }
</script>
</head>
<body>
<div class="newsheader">
    <div class="newsheadtitle">
    
        <h1 id="maintitle"></h2>
        <h2 id="subtitle"></h3>
        <div class="headappend">
            <span class="headorigin" id="headorigin"><a href="#">来源：JustTest</a></span>
            <span id="pubdate" class="headpubdate"></span>        
        </div>
    </div>
</div>
　
<div class="newscontent">
    <div class="newstext" id="newstext">
    </div>
    <p class="newsediter" id="newsediter"></p>
    
</div>

<div class="newscomment">
    <div class="shape"></div>
    
</div>

</body>
</html>
View Code

现在效果应该可以接受了

 7.页面加载有些延时，那可以在页面加载完之前做一个正在加载的动画。这个暂时没做了

8.其他需要完善的细节。有时间再来弄。

posted @ 2020-03-04 21:27  vocus  阅读(339)  评论(0)    收藏  举报