基于html5晒照片项目的设计

       现在有很多商家会在APP中或微信中做一些晒照片的活动，用户可以上传照片，然后邀请亲戚朋友来点赞，点赞数量的前几名能够获得商家的奖品。这是目前线上做推广、吸粉的很重要的方法之一。

下面介绍我做的基于html5晒照片的项目。先给出链接地址：基于html5的晒照片项目。

一.图片排布方式

由于我们公司的晒照片项目已开发有IOS版本和安卓版本，我做的web版本主要是能让用户分享到微信或者QQ，因此整个页面的设计要尽量能够和IOS或者安卓保持一致，图片的排布方式在app中使用的是等高等宽方式，我这里也是如此，如图1。

图1

如图1所示，图片采用等宽等高、两列、带边框的设计，为了实现这个效果，js代码如下：

/**
 * 图片排布使用等高等宽，图片自动向左浮动，不用考虑翻页重叠加载的问题
 */
function addPlayer(playerList, listMethod){
    var template = "";
    var html = "";
    for (var i = 0; i < playerList.length; i++){
        template =  '<div class="listBox">';
        template += '   <div class="innerBox1">';
        template += '       <div class="innerBox2">';
        template += '           <div class="listHead">';
        template += '               <div class="pic">';
        template += '                   <img class="headPic{resourceNo}">';          // 用户头像
        template += '               </div>';
        template += '               <div class="info">';
        template += '                   <div class="publishName">{fullName}</div>';
        template += '                   <div class="publishNum">NO:{resourceNo}</div>';
        template += '               </div>';
        template += '           </div>';
        template += '           <div>';
        template += '               <a href="/vote/html5/detailedPage.html?ver=0.01&id={id}">';
        template += '                   <img class="picImg" src="http://images.v2gogo.com/{resourceUrl}">';   // json中的img内容替换{img}
        template += '               </a>';
        template += '           </div>';
        template += '           <div class="vote">';
        template += '               <div class="praiseBtn" οnclick="vote({resourceNo})">';
        template += '                   <img class="praiseImg praiseImg{resourceNo}">';
        template += '               </div>';
        template += '               <span class="votesNum votesNum{resourceNo}">{praiseNum}</span>';
        template += '           </div>';
        template += '       </div>';
        template += '   </div>';
        template += '</div>';

        var resourceNo = playerList[i].resourceNo;

        html = template.formatString(playerList[i]);
        if (listMethod == 0){
            $(".newestPlayers").append(html);
        }
        else{
            $(".rankingPlayers").append(html);
        }

        var headImg = playerList[i].headImg;
        if (headImg == null){
            $(".headPic" + resourceNo).attr('src', imagesPrefix + "headPortrait/default_head_img.png");
        }
        else{
            $(".headPic" + resourceNo).attr('src', imagesPrefix + headImg);
        }

        var praise = playerList[i].praise;
        if (praise == false){
            $(".praiseImg" + resourceNo).attr('src', "/vote/imgs/sourceImgs/photo_commend_unselect@2x.png");
        }
        else{
            $(".praiseImg" + resourceNo).attr('src', "/vote/imgs/sourceImgs/photo_commend@2x.png");
            $(".votesNum" + resourceNo).css('color', '#EA8010');
        }
    };
}

CSS样式如下所示：

#scroller .listBox {
    float: left;
    width: 50%;
    background-color: #FFF;
}

.innerBox1 {
    border: 3px solid rgb(238, 238, 238);
    height: 242px;
}

.innerBox2 {
    height: 100%;
    text-align: center;
    position: relative;
}

二.取图片方法

取图片的方法请参照我blog里面的另外一篇文章：html5上划实现分页加载。

三.下拉刷新方法

下拉刷新的方法请参照我blog里面的另外一篇文章：html5上划实现分页加载。

四.点击按钮弹出对话框方法

点击按钮弹出对话框也是在网页开发中一个很常用的功能。一般比较简单的直接使用alert"Hello World!")就可以了。交互较复杂的就需要另外的对话框了，我在晒照片项目中使用的是colorbox这个开源的插件。对话框的效果图如下：

这个插件的使用比较简单，和别的插件一样，首先需要在html页面中引入相关文件。如下：

<link rel="stylesheet" type="text/css" media="all" href="/vote/css/colorbox.css?ver=0.0.5">
<script type="text/javascript" src="/vote/js/jquery.colorbox.js?ver=0.0.5"></script>

html代码如下：

<!--提示下载APP对话框-->
		<div style="display: none">
			<div id="downloadAPPBox">
				<p id="tip">提示信息</p>
				<div class="line"></div>
				<div id="voteResultTxt">
					<a href="http://www.v2gogo.com/down.html">点击下载微兔GOGO APP</a>
				</div>
			</div>
		</div>

js代码如下：

function showDownloadAPPDialogBox(){
    $.colorbox({
        reposition: false,      // ?
        //top: "20px",
        width: "80%",
        height: "auto",
        inline: true,
        href: "#downloadAPPBox"
    });
}

五.解决“最新图片”和“最热图片”切换卡顿的问题

最开始我在开发这个项目时，为了编程简单，当用户在“最新图片”和“最热图片”之间切换时，都是把之前的图片列表全部清空，然后再加载新的图片列表。后来调试时发现切换有卡顿。后来采用初始化时“最新图片”和“最热图片”均加载一页数据，“最新图片”默认显示，“最热图片”默认隐藏。用户切换到哪一栏，就显示那栏，另外一栏隐藏，由于数据在页面初始化时就加载好了，实际测试切换数据顺畅多了。

html代码如下：

<!--选手列表，使用js动态加载-->
		<div id="wrapper">
			<div id="scroller">
				<div class="newest">
					<div class="newestPlayers"></div>
					<img id="newest-loading-gif" class="loading-gif" src="/vote/imgs/sourceImgs/loading_1shi.gif">
					<div id="newest_scroller-pullUp" class="scroller-pullUp">
						<span class="pull-up-msg">加载中...</span>
					</div>
				</div>
				<div  class="ranking" style="display: none;">
					<div class="rankingPlayers"></div>
					<img id="ranking-loading-gif" class="loading-gif" src="/vote/imgs/sourceImgs/loading_1shi.gif">
					<div id="ranking_scroller-pullUp" class="scroller-pullUp">
						<span class="pull-up-msg">加载中...</span>
					</div>
				</div>
			</div>
		</div>

js代码如下：

$(".newestList").click(function(){
        if (position != 1) {
            position = 1;
            $(".newestList").addClass("on");
            $(".rankingList").removeClass("on");
            listMethod = 0;
            $(".ranking").hide();
            $(".newest").show();
            myScroll.scrollTo(0, 0);                // 切换时默认显示顶部
            myScroll.refresh();
        }
    });

    $(".rankingList").click(function(){
        if (position != 2) {
            position = 2;
            $(".newestList").removeClass("on");
            $(".rankingList").addClass("on");
            listMethod = 1;
            $(".newest").hide();
            $(".ranking").show();
            myScroll.scrollTo(0, 0);                // 切换时默认显示顶部
            myScroll.refresh();
        }
    });

六.页面代码是服务端返回的json数据，该怎么处理？

在这个项目中，活动规则是在服务端可编辑的页面，IOS或者安卓客户端需要这个页面时，可以使用webview实现。那么在hmt5中该如何实现呢？通过实验，可以使用document.write()函数实现。

        首先，需要新建一个html页面，html代码如下：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="/vote/js/jquery.min.js"></script>
    <script type="text/javascript" src="/vote/js/public.js"></script>
    <script>
        //从带有键值对的URL地址中获取tId对应的key值
        function getTidFromUrl()
        {
            var str = window.location.href.split("?");		// 将URL地址以“？”分割成数组
            var parameters = str[1];
            var parameterArrays = parameters.split('&');
            var tIdKey;
            $.each(parameterArrays, function(i){
                var parameter = parameterArrays[i].split('=');
                if (parameter[0] == "tId"){
                    tIdKey = parameter[1];
                    return false;
                }
            });
            return tIdKey;
        }

        function getActivityRules(tId){
            var url = serverPrefix + "/topic/getPhotoTopic";
            var policy;
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                async: false,
                data: {
                    tId: tId
                },
                success: function(data){
                    if (data.code == 0){
                        policy = data.result.topic.policy;
                    }
                }
            });
            return policy;
        };

        var html = getActivityRules(getTidFromUrl());
        document.write(html);
    </script>
<head>
<body>
</body>
</html>