java微信jssdk开发

微信开发对于新手来说是非常头痛的，鉴于各种反人类的设计和体验接口，笔者在开发完整个微信公众号后觉得有必要做下笔记，便于日后查阅。

1. 设置完appid，appsecret等基础设置，直接说说jssdk所需的主要配置。

如下图：

由于咱们只需要使用到微信的js接口，所以只用设置图中“JS接口安全域名”即可。

点击“设置”，如图：

下载文件后，将文件放在项目根目录下，比如:我的域名是cbj.yunli88.com（不能加www），项目名是jfinal-weixin-demo，那么应该把该文件放在如图所示的位置：

注意：文件放好后，启动服务器才能保存，不然回微信服务器验证时找不到该文件会报错。

2. jssdk开发

jssdk开发开发步骤，微信开发文档写的很详细，具体可查看https://mp.weixin.qq.com/wiki。

主要需要我们传入几个参数，如下：

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

关键在于签名！签名代码类如下：

package com.cbj.util;

import java.util.Formatter;

import javax.servlet.http.HttpServletRequest;

import com.jfinal.kit.HashKit;
import com.jfinal.weixin.sdk.api.JsTicket;
import com.jfinal.weixin.sdk.api.JsTicketApi;
import com.jfinal.weixin.sdk.api.JsTicketApi.JsApiType;


public class SignUtil {
	
	
	/**
	 * 
	 * @param jsapi_ticket
	 * @param url
	 * @param timestamp
	 * @param nonce
	 * @return
	 */
    public static String getSignature(HttpServletRequest request,String nonce_str,String timestamp) {
    	JsTicket jsApiTicket = JsTicketApi.getTicket(JsApiType.jsapi);
		String jsapi_ticket = jsApiTicket.getTicket();
		// 注意 URL 一定要动态获取，不能 hardcode
		String url = "http://" + request.getServerName() // 服务器地址
				// + ":"
				// + getRequest().getServerPort() //端口号
				+ request.getContextPath() // 项目名称
				+ request.getServletPath();// 请求页面或其他地址
		String qs = request.getQueryString(); // 参数
		if (qs != null) {
			url = url + "?" + (request.getQueryString());
		}
		System.out.println("url>>>>" + url);
		// 这里参数的顺序要按照 key 值 ASCII 码升序排序
		//注意这里参数名必须全部小写，且必须有序
		String  str = "jsapi_ticket=" + jsapi_ticket +
        "&noncestr=" + nonce_str +
        "×tamp=" + timestamp +
        "&url=" + url;
       return HashKit.sha1(str);
    }
    
    /**
     * 
     * @return
     */
    public static String getTimeStamp(){
		return Long.toString(System.currentTimeMillis() / 1000);
    }
    
    /**
	 * 获取随机字符串
	 * @return
	 */
	public static String getNonceStr() {
		// 随机数
		String currTime = TenpayUtil.getCurrTime();
		// 8位日期
		String strTime = currTime.substring(8, currTime.length());
		// 四位随机数
		String strRandom = TenpayUtil.buildRandom(4) + "";
		// 10位序列号,可以自行调整。
		return strTime + strRandom;
	}
    

    /**
     * @param mByte
     * @return
     */
    private static String byteToHexStr(final byte[] hash) {
    	 Formatter formatter = new Formatter();
         for (byte b : hash)
         {
             formatter.format("%02x", b);
         }
         String result = formatter.toString();
         formatter.close();
         return result;
    }

}

下面贴出打开相册，选择照片，拍照，上传照片等部分js代码仅供参考：

wx.config({
	debug: true,
    appId:'${appId}',
    timestamp: '${timestamp}',
    nonceStr: '${nonceStr}',
    signature: '${signature}',
    jsApiList: [
      'chooseImage',
      'uploadImage',
      'downloadImage',
    ]
});
var images = {
	    localId: [],
	    serverId: []
	  };
wx.ready(function () {
	//选择相片
	 $("#choose").click(function(){
		 wx.chooseImage({
			 sourceType: ['album'], 
		      success: function (res) {
		    	images.localId = res.localIds;
		        //$("img").attr("src",images.localId[0]);
		        uploadImg();
		      }
		 });
	 });
	//照相
	$("#take").click(function(){
		wx.chooseImage({
			 sourceType: ['camera'], 
		      success: function (res) {
		    	  images.localId = res.localIds;
		    	  //$("img").attr("src",images.localId[0]);
		    	  uploadImg();
		      }
		 }); 
	});
	
});
function uploadImg(){
	if (images.localId.length == 0) {
	      alert('请先使用 chooseImage 接口选择图片');
	      return;
	    }
	 images.serverId = [];
	 function upload() {
		 wx.uploadImage({
		    localId: images.localId[0],
		    isShowProgressTips: 0,
		    success: function (res) {
		       images.serverId.push(res.serverId);
		    },
		    fail: function (res) {
		      alert(JSON.stringify(res));
		    }
		});
	}   
	upload();	    
}