JAVA微信开发总结

清疚 2022-04-12 02:46 142阅读 0赞

最近研究了一下微信，感觉不是很难，借鉴了marker(www.yl-blog.com)的开源代码，修改了几处小BUG（在作者的开源网站上留了言，详见其开源网站），很快就实现关键的逻辑：  
　　1、开发者验证  
　　2、通过程序接口自定义菜单  
　　3、用户关注后，发送欢迎消息  
　　4、根据用户输入为其选择感兴趣的话题  
　　5、发送文件消息、发送图文消息  
　　6、使用静态网页模拟了微信网站的简单模板  
  
　　公众号，daydayup\_it，正在紧张的策划开发中，近期上线，计划主要提供一些优质的教育资源，敬请大家关注。  
  
　　准备有空把关键技术整理一下，贴出来跟大家交流。  
  
　　一、开发者验证，其实主要是写个Servlet，有点Web开发经验就很容易搞定

package org.marker.weixin.test;
    
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.OutputStream;
    import java.io.Writer;
    import java.util.ArrayList;
    import java.util.Collections;
    import java.util.Date;
    import java.util.List;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import org.apache.commons.logging.Log;
    import org.apache.commons.logging.LogFactory;
    
    /**
     * 处理微信服务器请求的Servlet URL地址：http://xxx/weixin/dealwith.do
     * 
     * @author marker
     * @blog www.yl-blog.com
     * @weibo http://t.qq.com/wuweiit
     */
    public class WinXinServlet extends HttpServlet {
       
    	private static final long serialVersionUID = 1L;
    	private static Log log = LogFactory.getLog(WinXinServlet.class);
    
    	// TOKEN 是你在微信平台开发模式中设置的字符串
    	public static final String TOKEN = "YourToken";
    
    	/**
    	 * 处理微信服务器验证
    	 * http://wallimn.iteye.com, 2014-09-11
    	 */
    	protected void doGet(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
       
    		String signature = request.getParameter("signature");// 微信加密签名
    		String timestamp = request.getParameter("timestamp");// 时间戳
    		String nonce = request.getParameter("nonce");// 随机数
    		String echostr = request.getParameter("echostr");// 随机字符串
    		Writer out = response.getWriter();
    		System.out.println("收到验证请求：");
    		System.out.println("　　signature="+signature);
    		System.out.println("　　timestamp="+timestamp);
    		System.out.println("　　nonce="+nonce);
    		System.out.println("　　echostr="+echostr);
    		if(signature==null || timestamp==null || nonce==null || echostr==null){
       
    			//这几个参数为空时，排序会报错。
    			out.write("parameter is null!");
    		}
    		else{
       
    			// 重写totring方法，得到三个参数的拼接字符串
    			List<String> list = new ArrayList<String>(3) {
       
    				private static final long serialVersionUID = 2621444383666420433L;
    				public String toString() {
       
    					return this.get(0) + this.get(1) + this.get(2);
    				}
    			};
    			list.add(TOKEN);
    			list.add(timestamp);
    			list.add(nonce);
    			Collections.sort(list);// 排序
    			String tmpStr = new MySecurity().encode(list.toString(),
    					MySecurity.SHA_1);// SHA-1加密
    			if (signature.equals(tmpStr)) {
       
    				out.write(echostr);// 请求验证成功，返回随机码
    			} else {
       
    				out.write("check error!");
    			}
    		}
    		out.flush();
    		out.close();
    	}
    
    
    	/**
    	 * 处理微信服务器发过来的各种消息，包括：文本、图片、地理位置、音乐等等
    	 * http://wallimn.iteye.com, 2014-09-11
    	 */
    	protected void doPost(HttpServletRequest request,
    			HttpServletResponse response) throws ServletException, IOException {
       
    		log.info("收到POST请求："+(new Date()));
    		request.setCharacterEncoding("utf-8");
    		response.setContentType("text/html; charset=utf-8");
    		InputStream is = request.getInputStream();
    		OutputStream os = response.getOutputStream();
    		//TODO:写微信平台推送过来的各种信息的处理逻辑
    	}
    }

二、微信网站的测试主页效果及代码，借助bootstrap，支持媒体查询，当手机水平看时，栏目会变成2\*2布局，index.jsp，需要JSTL的支持，也可以自行去掉，不影响效果，注意连接文件的路径即可  
\[align=center\]  
\[img\]http://dl2.iteye.com/upload/attachment/0101/0626/cda1e4ba-c075-3b83-9c9c-d7b6cf976757.png\[/img\]  
\[img\]http://dl2.iteye.com/upload/attachment/0101/0628/1a7ee8b6-88ed-3346-a1d8-a445c2e474fe.png\[/img\]  
\[/align\]

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <!DOCTYPE html>
    <html lang="zh-cn">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    	<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
        <title>DayDayUp网站</title>
    
        
        <link href="${ctx}/css/bootstrap.min.css" rel="stylesheet">
    
        <style type="text/css">
        	body,th,td{
       
        		font-size:1.5em;
        		font-family:宋体;
        	}
        	body{
       
        		margin:1px;
        	}
        	a{
       
        		text-decoration:none;  
        	}
    		a:link,a:visited,a:hover,a:active{  
    		    text-decoration:none;  
    		}  
    
    		a:focus{  
    		    outline:0;   
    		} 
        	.wxc a{
       
        		display:block;
        		overflow:hidden;
        		text-decoration:none;  
        		line-height:1.5em;
        		padding:0 10px;
        		border-bottom:1px dotted #a0a0a0;  	
        		margin:0 5px;	
        	}
        	.wxc a:last-child{
       
        		border-width:0 !important;
        	}
        	.topbar,.bottombar{
       
        		padding:0 2px;
        		line-height:2em;
        		background-color:#980404;
        		color:white;
        	}
        	.topbar{
       
        		font-weight:bold;
        		font-size:150%;
        	}
        	.item img{
       
        		margin:0 auto;
        	}
        	#search_panel{
       
        		margin:5px 0;
        	}
        	.panel{
       
        		margin:5px 2px;
        	}
        	.nopadding{
       
        		padding:0;
        	}
        </style>
      </head>
      <body>
    	<div class="topbar">欢迎访问DayDayUp(建设中...)</div>
    
    	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    	  
    	<ol class="carousel-indicators">
    	  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    	  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    	  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    	</ol>
    
    	
    	<div class="carousel-inner" role="listbox">
    	  <div class="item active">
    	    <img src="./images/p1.jpg" alt="图片1">
    	    <div class="carousel-caption">
    	    	<h4>Word办会全解决</h4>
    	    	<p>您办过会吗？您被各种各样的文件、表格折磨过吗？那请您花几分钟时间来看一下本站提供的解决方案，包您受益匪浅！</p>
    	    </div>
    	  </div>
    	  <div class="item">
    	    <img src="./images/p2.jpg" alt="图片2">
    	    <div class="carousel-caption">
    	    	<h4>Excel财务规划</h4>
    	    	<p>您用Excel做过家庭财务规划吗？这里提供给您一个完整的案例，非常方便，您一学就会，一看就会。</p>
    	    </div>
    	  </div>
    	  <div class="item">
    	    <img src="./images/p3.jpg" alt="图片3">
    	    <div class="carousel-caption">
    	    	<h4>PPT秀出别样的精彩</h4>
    	    	<p>您用Excel做过家庭财务规划吗？这里提供给您一个完整的案例，非常方便，您一学就会，一看就会。</p>
    	    </div>
    	  </div>
    	</div>
    
    	  
    	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    	    <span class="glyphicon glyphicon-chevron-left"></span>
    	    <span class="sr-only">前一个</span>
    	  </a>
    	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    	    <span class="glyphicon glyphicon-chevron-right"></span>
    	    <span class="sr-only">下一个</span>
    	  </a>
    	</div>
    
    	<div id="search_panel">
    	  <div class="input-group">
    	    <input type="text" class="form-control" placeholder="请输入关键字">
    	    <span class="input-group-btn">
    	      <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
    	    </span>
    	  </div>
    	</div>
    
    	<div class="col-xs-12 col-sm-6 nopadding">
    		<div class="panel panel-default wxc">
    		  <div class="panel-heading">最近发表</div>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		</div>  
    	</div>  
    	<div class="col-xs-12 col-sm-6 nopadding">
    		<div class="panel panel-default wxc">
    		  <div class="panel-heading">热门问题</div>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		</div>  
    	</div>  
    	<div class="col-xs-12 col-sm-6 nopadding">
    		<div class="panel panel-default wxc">
    		  <div class="panel-heading">劳模排行</div>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		</div>  
    	</div>  
    	<div class="col-xs-12 col-sm-6 nopadding">
    		<div class="panel panel-default wxc">
    		  <div class="panel-heading">赞率最高</div>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		  <a href="#">问题1</a>
    		</div>  
    	</div>  
    
    	<div class="text-center">
    	  	<a href="">首页</a> | <a href="">文章</a> | <a href="">视频</a> | <a href="">留言</a>
    	</div>
    	<div class="bottombar">浙ICP备######号</div>
    
        <script src="${ctx}/js/jquery-1.11.1.min.js"></script>
        <script src="${ctx}/js/bootstrap.min.js"></script>
      </body>
    </html>

三、微信模板美化  
　　发现一个网站，效果不错。http://xiumi.us/,提供大量的模板。  
  
四、使用JQuery Mobile开发心理测评网站  
　　JQuery Mobile用起来还挺方便。体验地址：\[url\]http://www.day2up.com/post1.htm\[/url\]