腾讯ISUX网页前端代码分析

.post-area-frame {
    margin: 40px auto 0;
    /*    width: 1720px;*/
}

#post-area {
    width: 100%;
    overflow: hidden;
}

#post-area .masonry-post {
    position: relative;
    z-index: 2;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0 15px 30px;
    width: 100%;
    background: #fff;
    float: left;
    width:calc(25% - 30px);
    width:-webkit-calc(25% - 30px);
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
}

#post-area .masonry-post .type-post {
    overflow: hidden;
}

#post-area .masonry-post .entry-subtitle {
    display: none;
}

#post-area .masonry-post:hover {
    -webkit-box-shadow: 0px 0px 15px #ccc;
    -moz-box-shadow: 0px 0px 15px #ccc;
    box-shadow: 0px 0px 15px #ccc;
}

#post-area .masonry-post .isux-image {
    overflow: hidden;
    /*height: 217px;*/
    background: #aaa;
}

#post-area .masonry-post .isux-image .open-single-frame {
    display: block;
    padding-top: 53%;
    position: relative;
}

#post-area .masonry-post .isux-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#post-area .masonry-post .isux-category,.latestone .post-cate {
    position: relative;
    float: right;
}

#post-area .masonry-post .isux-category {
    height: 40px;
    margin-bottom: -8px;
    margin-right: 12px;
}

#post-area .masonry-post .isux-category span,.latestone .post-cate span {
    float: left;
    overflow: hidden;
    margin: 0 3px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    border: 1px solid #e6e6e6;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    color: #ccc;
    text-align: center;
    font-size: 16px;
    font-weight: 100;
}

/*#post-area .masonry-post .isux-category span:hover {
    opacity: 0.7;
}
*/
#post-area .masonry-post .isux-category .navlist-sub:before {
    padding-right: 20px;
}

/*#post-area .masonry-post .isux-category .cate-vd,.latestone .post-cate .cate-vd:before {
    border-color: #ff4085;
    color: #ff4085;
}*/

#post-area .masonry-post .isux-category span:before,.latestone .post-cate span:before {
    display: block;
    width: 40px;
}

#post-area .masonry-post .isux-category .cate-vd:before,.latestone .post-cate .cate-vd:before {
    content: "D";
}

/*#post-area .masonry-post .isux-category .cate-id，.latestone .post-cate .cate-id {
    border-color: #ffa900;
    color: #ffa900;
}*/

#post-area .masonry-post .isux-category .cate-id:before,.latestone .post-cate .cate-id:before {
    content: "D";
}

/*#post-area .masonry-post .isux-category .cate-fd,.latestone .post-cate .cate-fd {
    border-color: #32b5d7;
    color: #32b5d7;
}*/

#post-area .masonry-post .isux-category .cate-fd:before,.latestone .post-cate .cate-fd:before {
    content: "E";
}

/*#post-area .masonry-post .isux-category .cate-ur,.latestone .post-cate .cate-ur {
    border-color: #9abc1c;
    color: #9abc1c;
}*/

#post-area .masonry-post .isux-category .cate-ur:before,.latestone .post-cate .cate-ur:before {
    content: "R";
}

/*#post-area .masonry-post .isux-category .cate-ux,.latestone .post-cate .cate-ux {
    border-color: #a866ae;
    color: #a866ae;
}*/

#post-area .masonry-post .isux-category .cate-ux:before,.latestone .post-cate .cate-ux:before{
    content: "T";
}

#post-area .masonry-post .isux-category:after {
    clear: both;
    display: table;
    height: 0;
    content: "";
    line-height: 0;
}

#post-area .masonry-post h2 {
    height: 50px;
    font-size: 30px;
    padding: 0 20px;
}

#post-area .masonry-post h2 a {
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    color: #000;
    vertical-align: top;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.20rem;
    line-height: 50px;
}

#post-area .masonry-post h2 a:hover {
    color: #626262;
}

#post-area .masonry-post .info {
    position: relative;
    padding: 0 20px;
    /*height: 60px;*/
    overflow: hidden;
}

#post-area .masonry-post .author,#post-area .masonry-post .isux-date {
    height: 40px;
    line-height: 40px;
}

#post-area .masonry-post .author:after,#post-area .masonry-post .isux-date:after {
    clear: both;
    display: table;
    height: 0;
    content: "";
    line-height: 0;
}

#post-area .masonry-post .author {
    float: left;
    display: block;
    text-align: left;
}

#post-area .masonry-post .author img {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

#post-area .masonry-post .author .username {
    float: left;
    overflow: hidden;
    margin-left:10px;
    height: 40px;
    max-width: 87px;
    color: #737373;
    vertical-align: top;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    line-height: 40px;
}

#post-area .masonry-post .isux-date {
    float: left;
    overflow: hidden;
    margin-left: 10px;
    color: #a3a3a3;
    text-align: left;
    white-space: nowrap;
    font-size: 14px;
}

#post-area .type_photo_double {
    width: 100%;
}

@media only screen and (max-width: 768px) {

    #post-area .masonry-post {
        width: calc(50% - 30px);
        width: -webkit-calc(50% - 30px);
    }


    #post-area .masonry-post .author img  {
        width: 28px;
        height: 28px;
    }

    #post-area .masonry-post .isux-category a,.latestone .post-cate a {
        margin:0 3px;
    }

    #post-area .masonry-post .author, #post-area .masonry-post .isux-date, #post-area .masonry-post .author .username {
        height: 28px;
        line-height: 28px;
    }
}

<!-- 使用微信JSSDK -->
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        jQuery(function($){
            // 代码高亮配置
            $("pre").addClass("prettyprint linenums");
            // prettyPrint();
            // 检测wx分享配置数据
//            alert("url="+encodeURIComponent(location.href.split('#')[0]));
            function wxShareData() {
                $.ajax({
                    type: "GET",
                    url: "http://www.weichuanghome.com/wx/get.html",
                    dataType: "text",
                    data: "url="+encodeURIComponent(location.href.split('#')[0]),
                    success: function(data) {

                        var obj = JSON.parse(data);



                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: obj.appId, // 必填，公众号的唯一标识
                            timestamp: obj.timestamp, // 必填，生成签名的时间戳
                            nonceStr: obj.nonceStr, // 必填，生成签名的随机串
                            signature: obj.signature,// 必填，签名，见附录1
                            jsApiList: [
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                'onMenuShareQQ',
                                'onMenuShareQZone',
                                'chooseImage',
                            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });


                        wx.ready(function(){
                            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，
                            //所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
                            //则可以直接调用，不需要放在ready函数中。


//                            var config = {
//                                title: '搞点新意思－QQiPad主题带你飞-腾讯ISUX', // 分享标题
//                                desc:  '搞点新意思－QQiPad主题带你飞', // 分享描述
//                                link: 'https://isux.tencent.com/do-something-different-rocking-with-new-qqipad-theme.html?variant=zh-hans', // 分享链接
//                                imgUrl: 'https://isux.tencent.com/wp-content/uploads/2017/01/080018-42716-500x300.png', // 分享图标
//                                success: function(){
//                                    console.log('wx config success');
//                                },
//                                cancel: function(){
//                                    console.log('wx config cancel');
//                                }
//                            };
//                            wx.onMenuShareTimeline(config);
//                            wx.onMenuShareAppMessage(config);
//                            wx.onMenuShareQQ(config);
//                            wx.onMenuShareQZone(config);

//                            wx.chooseImage({
//                                count: 1, // 默认9
//                                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
//                                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
//                                success: function (res) {
//                                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//                                }
//                            });
                        });

                    },
                    error: function(jqXHR,textStatus,errorThrown) {
                        console.log(jqXHR)
                        console.log(textStatus)
                        console.log(errorThrown)
                    }
                });
            }

            wxShareData();

        });

    </script>

package com.yrcn.my.sys.common;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;
/**
 * Servlet implementation class WxServlet
 * 如果想使用JSSDK，必须获取微信认证的签名
 */
//@WebServlet(name = "WxServlet1", urlPatterns = { "/WxServlet1" })
public class WxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public WxServlet() {
        super();
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String appId = "aaaaaaaaaaaa";
        //######1 获取access_token
        //AppID  
        //AppSecret 
        Object access_tokenObject = request.getServletContext().getAttribute("access_token");
        Object ticketObject = request.getServletContext().getAttribute("ticket");
        Object timestampObject = request.getServletContext().getAttribute("timestamp");
        String access_token = "";
        String ticket = "";
        if (access_tokenObject != null) {
            long timestamp = Long.parseLong(timestampObject.toString());
            boolean isExpires = new Date().getTime() - timestamp*1000 < 7000*1000;
            if(isExpires){
                access_token = access_tokenObject.toString();
                ticket = ticketObject.toString();
            }
        }        
        if ("".equals(access_token)) {
            String access_tokenResult = HttpRequest.sendGet("https://api.weixin.qq.com/cgi-bin/token", "grant_type=client_credential&appid="+appId+"&secret=aaaaaaaaaaaaaaaaaaaaaa");
            //{"access_token":"Rd8SiZEaW2SRSZKFVxsh_ZS1adNwWP7zRAGG44HFA9lSNQbxOS-2hySxsJKKzUfEqkTJUsN9l_25po9qtoSJUCquad9C-KBh5vFLWdheL4omiICDMsTXBMIho271Cz-qMHAgADAVQJ","expires_in":7200}
//            System.out.println(access_tokenResult);
            JsonParser jsonParser =new JsonParser();  //创建json解析器
            JsonObject jsonObject = (JsonObject)jsonParser.parse(access_tokenResult);
            access_token = jsonObject.get("access_token").getAsString();
            
            //######2 使用access_token获取jsapi_ticket
            //https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
            String jsapi_ticketResult = HttpRequest.sendGet("https://api.weixin.qq.com/cgi-bin/ticket/getticket", "access_token="+access_token+"&type=jsapi");
            //{"errcode":0,"errmsg":"ok","ticket":"kgt8ON7yVITDhtdwci0qefyIxUzYwFqAaiwhEj1TfdJZcuWSLVXoVHUC7V0qEq-tgWJ0OtvFCU5pzpOHylkW-Q","expires_in":7200}
            System.out.println(jsapi_ticketResult);
            jsonObject = (JsonObject)jsonParser.parse(jsapi_ticketResult);
            ticket = jsonObject.get("ticket").getAsString();
            //
            request.getServletContext().setAttribute("access_token", access_token);
            request.getServletContext().setAttribute("ticket", ticket);
            request.getServletContext().setAttribute("timestamp", new Date().getTime());
        }
        //
        System.out.println("access_token="+access_token);
        System.out.println("ticket="+ticket);
        //######3 签名算法
        //签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。
        //对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。
        //这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
        String nonceStr = getRandomString(20);
        long timestamp = new Date().getTime()/1000;
        String urlStr = request.getParameter("url");
        if(urlStr == null){
            urlStr = "";
        }
        String url = URLDecoder.decode(urlStr.trim(), "UTF-8");
//        String url = "http://www.weichuanghome.com/mobile.html";
        String string1 = "jsapi_ticket="+ticket+"&noncestr="+nonceStr+"&timestamp="+timestamp+"&url="+url;
        System.out.println(string1);
        String signature = getSha1(string1);
        //
//        appId: obj.appId, // 必填，公众号的唯一标识
//        timestamp: obj.timestamp, // 必填，生成签名的时间戳
//        nonceStr: obj.nonceStr, // 必填，生成签名的随机串
//        signature: obj.signature,// 必填，签名，见附录1
        RetObject retObject = new RetObject(appId, timestamp+"", nonceStr, signature);
        System.out.println(new Gson().toJson(retObject, RetObject.class));
        
        response.getWriter().append(new Gson().toJson(retObject, RetObject.class));
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
    private static int getRandom(int count) {
        return (int) Math.round(Math.random() * (count));
    }
     
    private static String string = "abcdefghijklmnopqrstuvwxyz";   
     
    private static String getRandomString(int length){
        StringBuffer sb = new StringBuffer();
        int len = string.length();
        for (int i = 0; i < length; i++) {
            sb.append(string.charAt(getRandom(len-1)));
        }
        return sb.toString();
    }
    
    public static String getSha1(String str){
        if (null == str || 0 == str.length()){
            return null;
        }
        char[] hexDigits = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 
                'a', 'b', 'c', 'd', 'e', 'f'};
        try {
            MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
            mdTemp.update(str.getBytes("UTF-8"));
             
            byte[] md = mdTemp.digest();
            int j = md.length;
            char[] buf = new char[j * 2];
            int k = 0;
            for (int i = 0; i < j; i++) {
                byte byte0 = md[i];
                buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
                buf[k++] = hexDigits[byte0 & 0xf];
            }
            return new String(buf);
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        return "";
    }
}

class RetObject{
    private String appId;
    private String timestamp;
    private String nonceStr;
    private String signature;
    
    public RetObject(String appId, String timestamp, String nonceStr, String signature) {
        super();
        this.appId = appId;
        this.timestamp = timestamp;
        this.nonceStr = nonceStr;
        this.signature = signature;
    }
    public String getAppId() {
        return appId;
    }
    public void setAppId(String appId) {
        this.appId = appId;
    }
    public String getTimestamp() {
        return timestamp;
    }
    public void setTimestamp(String timestamp) {
        this.timestamp = timestamp;
    }
    public String getNonceStr() {
        return nonceStr;
    }
    public void setNonceStr(String nonceStr) {
        this.nonceStr = nonceStr;
    }
    public String getSignature() {
        return signature;
    }
    public void setSignature(String signature) {
        this.signature = signature;
    }
}