JAVA微信开发总结

  最近研究了一下微信,感觉不是很难,借鉴了marker(www.yl-blog.com)的开源代码,修改了几处小BUG(在作者的开源网站上留了言,详见其开源网站),很快就实现关键的逻辑:
  1、开发者验证
  2、通过程序接口自定义菜单
  3、用户关注后,发送欢迎消息
  4、根据用户输入为其选择感兴趣的话题
  5、发送文件消息、发送图文消息
  6、使用静态网页模拟了微信网站的简单模板

  公众号,daydayup_it,正在紧张的策划开发中,近期上线,计划主要提供一些优质的教育资源,敬请大家关注。

  准备有空把关键技术整理一下,贴出来跟大家交流。

  一、开发者验证,其实主要是写个Servlet,有点Web开发经验就很容易搞定
Java代码   收藏代码
  1. package org.marker.weixin.test;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.InputStream;  
  5. import java.io.OutputStream;  
  6. import java.io.Writer;  
  7. import java.util.ArrayList;  
  8. import java.util.Collections;  
  9. import java.util.Date;  
  10. import java.util.List;  
  11.   
  12. import javax.servlet.ServletException;  
  13. import javax.servlet.http.HttpServlet;  
  14. import javax.servlet.http.HttpServletRequest;  
  15. import javax.servlet.http.HttpServletResponse;  
  16.   
  17. import org.apache.commons.logging.Log;  
  18. import org.apache.commons.logging.LogFactory;  
  19.   
  20. /** 
  21.  * 处理微信服务器请求的Servlet URL地址:http://xxx/weixin/dealwith.do 
  22.  *  
  23.  * @author marker 
  24.  * @blog www.yl-blog.com 
  25.  * @weibo http://t.qq.com/wuweiit 
  26.  */  
  27. public class WinXinServlet extends HttpServlet {  
  28.     private static final long serialVersionUID = 1L;  
  29.     private static Log log = LogFactory.getLog(WinXinServlet.class);  
  30.   
  31.     // TOKEN 是你在微信平台开发模式中设置的字符串  
  32.     public static final String TOKEN = "YourToken";  
  33.   
  34.     /** 
  35.      * 处理微信服务器验证 
  36.      * http://wallimn.iteye.com, 2014-09-11 
  37.      */  
  38.     protected void doGet(HttpServletRequest request,  
  39.             HttpServletResponse response) throws ServletException, IOException {  
  40.         String signature = request.getParameter("signature");// 微信加密签名  
  41.         String timestamp = request.getParameter("timestamp");// 时间戳  
  42.         String nonce = request.getParameter("nonce");// 随机数  
  43.         String echostr = request.getParameter("echostr");// 随机字符串  
  44.         Writer out = response.getWriter();  
  45.         System.out.println("收到验证请求:");  
  46.         System.out.println("  signature="+signature);  
  47.         System.out.println("  timestamp="+timestamp);  
  48.         System.out.println("  nonce="+nonce);  
  49.         System.out.println("  echostr="+echostr);  
  50.         if(signature==null || timestamp==null || nonce==null || echostr==null){  
  51.             //这几个参数为空时,排序会报错。  
  52.             out.write("parameter is null!");  
  53.         }  
  54.         else{  
  55.             // 重写totring方法,得到三个参数的拼接字符串  
  56.             List<String> list = new ArrayList<String>(3) {  
  57.                 private static final long serialVersionUID = 2621444383666420433L;  
  58.                 public String toString() {  
  59.                     return this.get(0) + this.get(1) + this.get(2);  
  60.                 }  
  61.             };  
  62.             list.add(TOKEN);  
  63.             list.add(timestamp);  
  64.             list.add(nonce);  
  65.             Collections.sort(list);// 排序  
  66.             String tmpStr = new MySecurity().encode(list.toString(),  
  67.                     MySecurity.SHA_1);// SHA-1加密  
  68.             if (signature.equals(tmpStr)) {  
  69.                 out.write(echostr);// 请求验证成功,返回随机码  
  70.             } else {  
  71.                 out.write("check error!");  
  72.             }  
  73.         }  
  74.         out.flush();  
  75.         out.close();  
  76.     }  
  77.   
  78.       
  79.     /** 
  80.      * 处理微信服务器发过来的各种消息,包括:文本、图片、地理位置、音乐等等 
  81.      * http://wallimn.iteye.com, 2014-09-11 
  82.      */  
  83.     protected void doPost(HttpServletRequest request,  
  84.             HttpServletResponse response) throws ServletException, IOException {  
  85.         log.info("收到POST请求:"+(new Date()));  
  86.         request.setCharacterEncoding("utf-8");  
  87.         response.setContentType("text/html; charset=utf-8");  
  88.         InputStream is = request.getInputStream();  
  89.         OutputStream os = response.getOutputStream();  
  90.         //TODO:写微信平台推送过来的各种信息的处理逻辑  
  91.     }  
  92. }  


  二、微信网站的测试主页效果及代码,借助bootstrap,支持媒体查询,当手机水平看时,栏目会变成2*2布局,index.jsp,需要JSTL的支持,也可以自行去掉,不影响效果,注意连接文件的路径即可




Html代码   收藏代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
  3. <!DOCTYPE html>  
  4. <html lang="zh-cn">  
  5.   <head>  
  6.     <meta charset="UTF-8">  
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>  
  10.     <title>DayDayUp网站</title>  
  11.   
  12.     <!-- Bootstrap -->  
  13.     <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">  
  14.   
  15.     <style type="text/css">  
  16.         body,th,td{  
  17.             font-size:1.5em;  
  18.             font-family:宋体;  
  19.         }  
  20.         body{  
  21.             margin:1px;  
  22.         }  
  23.         a{  
  24.             text-decoration:none;    
  25.         }  
  26.         a:link,a:visited,a:hover,a:active{    
  27.             text-decoration:none;    
  28.         }    
  29.             
  30.         a:focus{    
  31.             outline:0;     
  32.         }   
  33.         .wxc a{  
  34.             display:block;  
  35.             overflow:hidden;  
  36.             text-decoration:none;    
  37.             line-height:1.5em;  
  38.             padding:0 10px;  
  39.             border-bottom:1px dotted #a0a0a0;     
  40.             margin:0 5px;     
  41.         }  
  42.         .wxc a:last-child{  
  43.             border-width:0 !important;  
  44.         }  
  45.         .topbar,.bottombar{  
  46.             padding:0 2px;  
  47.             line-height:2em;  
  48.             background-color:#980404;  
  49.             color:white;  
  50.         }  
  51.         .topbar{  
  52.             font-weight:bold;  
  53.             font-size:150%;  
  54.         }  
  55.         .item img{  
  56.             margin:0 auto;  
  57.         }  
  58.         #search_panel{  
  59.             margin:5px 0;  
  60.         }  
  61.         .panel{  
  62.             margin:5px 2px;  
  63.         }  
  64.         .nopadding{  
  65.             padding:0;  
  66.         }  
  67.     </style>  
  68.   </head>  
  69.   <body>  
  70.     <div class="topbar">欢迎访问DayDayUp(建设中...)</div>  
  71.     
  72.     <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  
  73.       <!-- Indicators -->  
  74.     <ol class="carousel-indicators">  
  75.       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>  
  76.       <li data-target="#carousel-example-generic" data-slide-to="1"></li>  
  77.       <li data-target="#carousel-example-generic" data-slide-to="2"></li>  
  78.     </ol>  
  79.       
  80.     <!-- Wrapper for slides -->  
  81.     <div class="carousel-inner" role="listbox">  
  82.       <div class="item active">  
  83.         <img src="./images/p1.jpg" alt="图片1">  
  84.         <div class="carousel-caption">  
  85.             <h4>Word办会全解决</h4>  
  86.             <p>您办过会吗?您被各种各样的文件、表格折磨过吗?那请您花几分钟时间来看一下本站提供的解决方案,包您受益匪浅!</p>  
  87.         </div>  
  88.       </div>  
  89.       <div class="item">  
  90.         <img src="./images/p2.jpg" alt="图片2">  
  91.         <div class="carousel-caption">  
  92.             <h4>Excel财务规划</h4>  
  93.             <p>您用Excel做过家庭财务规划吗?这里提供给您一个完整的案例,非常方便,您一学就会,一看就会。</p>  
  94.         </div>  
  95.       </div>  
  96.       <div class="item">  
  97.         <img src="./images/p3.jpg" alt="图片3">  
  98.         <div class="carousel-caption">  
  99.             <h4>PPT秀出别样的精彩</h4>  
  100.             <p>您用Excel做过家庭财务规划吗?这里提供给您一个完整的案例,非常方便,您一学就会,一看就会。</p>  
  101.         </div>  
  102.       </div>  
  103.     </div>  
  104.       
  105.       <!-- Controls -->  
  106.       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">  
  107.         <span class="glyphicon glyphicon-chevron-left"></span>  
  108.         <span class="sr-only">前一个</span>  
  109.       </a>  
  110.       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">  
  111.         <span class="glyphicon glyphicon-chevron-right"></span>  
  112.         <span class="sr-only">下一个</span>  
  113.       </a>  
  114.     </div>  
  115.   
  116.     <div id="search_panel">  
  117.       <div class="input-group">  
  118.         <input type="text" class="form-control" placeholder="请输入关键字">  
  119.         <span class="input-group-btn">  
  120.           <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>  
  121.         </span>  
  122.       </div><!-- /input-group -->  
  123.     </div>  
  124.     
  125.     <div class="col-xs-12 col-sm-6 nopadding">  
  126.         <div class="panel panel-default wxc">  
  127.           <div class="panel-heading">最近发表</div>  
  128.           <a href="#">问题1</a>  
  129.           <a href="#">问题1</a>  
  130.           <a href="#">问题1</a>  
  131.           <a href="#">问题1</a>  
  132.           <a href="#">问题1</a>  
  133.           <a href="#">问题1</a>  
  134.           <a href="#">问题1</a>  
  135.         </div>    
  136.     </div>    
  137.     <div class="col-xs-12 col-sm-6 nopadding">  
  138.         <div class="panel panel-default wxc">  
  139.           <div class="panel-heading">热门问题</div>  
  140.           <a href="#">问题1</a>  
  141.           <a href="#">问题1</a>  
  142.           <a href="#">问题1</a>  
  143.           <a href="#">问题1</a>  
  144.           <a href="#">问题1</a>  
  145.           <a href="#">问题1</a>  
  146.           <a href="#">问题1</a>  
  147.         </div>    
  148.     </div>    
  149.     <div class="col-xs-12 col-sm-6 nopadding">  
  150.         <div class="panel panel-default wxc">  
  151.           <div class="panel-heading">劳模排行</div>  
  152.           <a href="#">问题1</a>  
  153.           <a href="#">问题1</a>  
  154.           <a href="#">问题1</a>  
  155.           <a href="#">问题1</a>  
  156.           <a href="#">问题1</a>  
  157.           <a href="#">问题1</a>  
  158.           <a href="#">问题1</a>  
  159.         </div>    
  160.     </div>    
  161.     <div class="col-xs-12 col-sm-6 nopadding">  
  162.         <div class="panel panel-default wxc">  
  163.           <div class="panel-heading">赞率最高</div>  
  164.           <a href="#">问题1</a>  
  165.           <a href="#">问题1</a>  
  166.           <a href="#">问题1</a>  
  167.           <a href="#">问题1</a>  
  168.           <a href="#">问题1</a>  
  169.           <a href="#">问题1</a>  
  170.           <a href="#">问题1</a>  
  171.         </div>    
  172.     </div>    
  173.       
  174.     <div class="text-center">  
  175.         <a href="">首页</a>&nbsp;|&nbsp;<a href="">文章</a>&nbsp;|&nbsp;<a href="">视频</a>&nbsp;|&nbsp;<a href="">留言</a>  
  176.     </div>  
  177.     <div class="bottombar">浙ICP备######号</div>  
  178.     
  179.     <script src="${ctx}/js/jquery-1.11.1.min.js"></script>  
  180.     <script src="${ctx}/js/bootstrap.min.js"></script>  
  181.   </body>  
  182. </html>  


三、微信模板美化
  发现一个网站,效果不错。http://xiumi.us/,提供大量的模板。

四、使用JQuery Mobile开发心理测评网站
  JQuery Mobile用起来还挺方便。体验地址: http://www.day2up.com/post1.htm
分享到:
| 几个CSS重置默认样式reset.css代码




######################################################################################################




社区版块
存档分类
最新评论







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值