微信企业号开发(八) -jssdk的使用（调用微信拍照）

1、首先需要配置可信域名，可信域名可以使用花生壳来配置。http://blog.csdn.net/u014520797/article/details/49667217

2、在jsp页面中准备点击拍照的按钮。

<h3 id="menu-image">图像接口</h3>
      <span class="desc">拍照或从手机相册中选图接口</span>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button>
      <span class="desc">预览图片接口</span>
      <button class="btn btn_primary" id="previewImage">previewImage</button>
      <span class="desc">上传图片接口</span>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button>
      <span class="desc">下载图片接口</span>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button>

     <img style="width: 130px;height: 180px;" src="/image/primary.png" id="imgcert"/>
     <input name="mediaId" id="mediaId" type="hidden" value=""/>
	

3、在jsp页面中</body>元素前加入这样一段js。

<script type="text/javascript">
define = null;
require = null;
</script>  
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
<script>

wx.config({
    debug: true,
    appId: '${appId}',
    timestamp:'${timestamp}',
    nonceStr: '${nonceStr}',
    signature: '${signature}',
    jsApiList: [
       'chooseImage',
       'previewImage',
       'uploadImage',
       'downloadImage'
    ]
});
</script>
<script src="${pageContext.request.contextPath}/js/image.js" type="text/javascript" charset="utf-8"></script>

同时需要在需要用到拍照的jsp页面引入一个自定义的外部js文件：

wx.ready(function () {
	 
	// 5 图片接口
	  // 5.1 拍照、本地选图
	  var images = {
	    localId: [],
	    serverId: []
	  };
	  document.querySelector('#chooseImage').onclick = function () {
	    wx.chooseImage({
	      success: function (res) {
	        images.localId = res.localIds;
	        alert('已选择 ' + res.localIds.length + ' 张图片');
	      }
	    });
	  };

	  // 5.2 图片预览
	  document.querySelector('#previewImage').onclick = function () {
	    wx.previewImage({
	      current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
	      urls: [
	        'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
	        'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
	        'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
	      ]
	    });
	  };

	  // 5.3 上传图片
	  document.querySelector('#uploadImage').onclick = function () {
	    if (images.localId.length == 0) {
	      alert('请先使用 chooseImage 接口选择图片');
	      return;
	    }
	    var i = 0, length = images.localId.length;
	    images.serverId = [];
	    function upload() {
	      wx.uploadImage({
	        localId: images.localId[i],
	        success: function (res) {
	          i++;
	          //alert('已上传：' + i + '/' + length);
	          images.serverId.push(res.serverId);
	          if (i < length) {
	            upload();
	          }
	        },
	        fail: function (res) {
	          alert(JSON.stringify(res));
	        }
	      });
	    }
	    upload();
	  };

	  // 5.4 下载图片
	  document.querySelector('#downloadImage').onclick = function () {
	    if (images.serverId.length === 0) {
	      alert('请先使用 uploadImage 上传图片');
	      return;
	    }
	    var i = 0, length = images.serverId.length;
	    images.localId = [];
	    function download() {
	      wx.downloadImage({
	        serverId: images.serverId[i],
	        success: function (res) {
	          i++;
	          alert('已下载：' + i + '/' + length);
	          images.localId.push(res.localId);
	          if (i < length) {
	            download();
	          }
	        }
	      });
	    }
	    download();
	  };
	  
  });

4、其中<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>代表引用微信js文件。debug: true,代表开启调试模式，这样你将可以看到当你调用微信jssdk时，微信服务器返回的响应信息。 

5、 appId: '${appId}', timestamp:'${timestamp}', nonceStr: '${nonceStr}',signature: '${signature}',四个值的获取

public static Map<String, String> sign(String jsapi_ticket, String url) {
        Map<String, String> ret = new HashMap<String, String>();
        String nonce_str = create_nonce_str();
        String timestamp = create_timestamp();
        String string1;
        String signature = "";

        //注意这里参数名必须全部小写，且必须有序
        string1 = "jsapi_ticket=" + jsapi_ticket +
                  "&noncestr=" + nonce_str +
                  "×tamp=" + timestamp +
                  "&url=" + url;
        System.out.println("Sign string1:"+string1);

        try
        {
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(string1.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
            System.out.println("Sign signature:"+signature);
            
        }
        catch (NoSuchAlgorithmException e)
        {
            e.printStackTrace();
        }
        catch (UnsupportedEncodingException e)
        {
            e.printStackTrace();
        }

        ret.put("url", url);
        ret.put("jsapi_ticket", jsapi_ticket);
        ret.put("nonceStr", nonce_str);
        ret.put("timestamp", timestamp);
        ret.put("signature", signature);

        return ret;
    }

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

    private static String create_nonce_str() {
        return UUID.randomUUID().toString();
    }

    private static String create_timestamp() {
        return Long.toString(System.currentTimeMillis() / 1000);
    }

6、获得微信jssdk签名 jsapi_ticket 

public static WXjsTicket getWXjsTicket(String accessToken) {
		WXjsTicket wXjsTicket = null;
		String requestUrl= WXURLUtil.JSAPIURL.replace("ACCESS_TOKEN", accessToken);
		// 发起GET请求获取凭证
		JSONObject jsonObject = HttpRequestUtil.httpRequest(requestUrl, "GET", null);
		System.out.println("CommonUtil.java 调用了一次getWXjsTicket接口");
		if (null != jsonObject) {
			try {
				wXjsTicket = new WXjsTicket();
				wXjsTicket.setJsTicket(jsonObject.getString("ticket"));
				wXjsTicket.setJsTicketExpiresIn(jsonObject.getInt("expires_in"));
			} catch (JSONException e) {
				wXjsTicket = null;
				// 获取wXjsTicket失败
				log.error("获取wXjsTicket失败 errcode:{} errmsg:{}", jsonObject.getInt("errcode"), jsonObject.getString("errmsg"));
			}
		}
		return wXjsTicket;
	}

public static String JSAPIURL = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN";	
		

public class WXjsTicket {
	// 接口访问凭证
		private String jsTicket;
		// 凭证有效期，单位：秒
		private int jsTicketExpiresIn;
		public String getJsTicket() {
			return jsTicket;
		}
		public void setJsTicket(String jsTicket) {
			this.jsTicket = jsTicket;
		}
		public int getJsTicketExpiresIn() {
			return jsTicketExpiresIn;
		}
		public void setJsTicketExpiresIn(int jsTicketExpiresIn) {
			this.jsTicketExpiresIn = jsTicketExpiresIn;
		}
		
		
}

7、url的获取，由request获取

StringBuffer requestURL = request.getRequestURL();
		System.out.println(requestURL.toString() + "==");
		String queryString = request.getQueryString();
		String url2 = "http://" + request.getServerName() // 服务器地址
				+ request.getContextPath() // 项目名称
				+ request.getServletPath(); // 请求页面或其他地址
		if (queryString != null) {
			url2 += "?" + queryString;
		}

8、在企业号自定义菜单配置菜单路径

9、工程结构

10、代码地址：http://download.csdn.net/detail/u014520797/9469842

免费下载  http://download.csdn.net/detail/u014520797/9814764

11、效果图

12、拿到代码后需要修改常量类，更改为自己的数值

13、有什么问题欢迎邮件：n22_py@163.com