java微信jssdk开发

Posted 2022-12-05 jiangzhongwei_

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

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();