JAVA微信开发总结

  最近研究了一下微信,感觉不是很难,借鉴了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的支持,也可以自行去掉,不影响效果,注意连接文件的路径即可

JAVA微信开发总结_第1张图片
JAVA微信开发总结_第2张图片

<%@ 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>

    <!-- Bootstrap -->
    <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">
	  <!-- Indicators -->
	<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>
	
	<!-- Wrapper for slides -->
	<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>
	
	  <!-- Controls -->
	  <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><!-- /input-group -->
	</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>&nbsp;|&nbsp;<a href="">文章</a>&nbsp;|&nbsp;<a href="">视频</a>&nbsp;|&nbsp;<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用起来还挺方便。体验地址: http://www.day2up.com/post1.htm

你可能感兴趣的:(java,微信)