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

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

微信企业号开发(八) -jssdk的使用(调用微信拍照)_第1张图片



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


      拍照或从手机相册中选图接口
      
      预览图片接口
      
      上传图片接口
      
      下载图片接口
      

     
     
	

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


  




同时需要在需要用到拍照的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、其中代表引用微信js文件。debug: true,代表开启调试模式,这样你将可以看到当你调用微信jssdk时,微信服务器返回的响应信息。 

微信企业号开发(八) -jssdk的使用(调用微信拍照)_第2张图片



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

public static Map sign(String jsapi_ticket, String url) {
        Map ret = new HashMap();
        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、工程结构

微信企业号开发(八) -jssdk的使用(调用微信拍照)_第3张图片



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

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

11、效果图

微信企业号开发(八) -jssdk的使用(调用微信拍照)_第4张图片微信企业号开发(八) -jssdk的使用(调用微信拍照)_第5张图片微信企业号开发(八) -jssdk的使用(调用微信拍照)_第6张图片



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

微信企业号开发(八) -jssdk的使用(调用微信拍照)_第7张图片


13、有什么问题欢迎邮件:[email protected]


你可能感兴趣的:(微信企业号开发(八) -jssdk的使用(调用微信拍照))