上代碼！！！
后端:
@RequestMapping(value = "/lyzz", method = RequestMethod.GET)
public String lyzz(ModelMap model, HttpServletRequest request) throws Exception {
Map<String, String> ret = WechatUtil.getMap(request);
model.addAttribute("retMap", ret);
return "指定頁面";
}
/**
* 裝配map對象.
* @param request 請求.
* @return map對象.
*/
public static Map<String, String> getMap(HttpServletRequest request) {
String accessToken = getAccessToken(request);
//TODO 刪除
String jsApiTicket = getJsTicket(accessToken, request);
String nonceStr = createNonceString();
String timestamp = createTimestamp();
Map<String, String> ret = new HashMap<String, String>();
String url = request.getRequestURL().toString() + (request.getQueryString() != null && !"".equals(request.getQueryString()) ? "?" + request.getQueryString() : "");
ret.put("url", url);
ret.put("jsapi_ticket", jsApiTicket);
ret.put("nonceStr", nonceStr);
ret.put("timestamp", timestamp);
ret.put("appid", appId);//appId公眾號指定id
ret.put("accessToken", accessToken);
String signature = "";
try {
// 注意這里參數名必須全部小寫，且必須有序
String string1 = "jsapi_ticket=" + jsApiTicket + "&noncestr=" + nonceStr + "×tamp=" + timestamp + "&url=" + url;
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes(CHARSET_NAME));//** 字符集定義.*/private static final String CHARSET_NAME = "UTF-8";
signature = byteToHex(crypt.digest()).toUpperCase();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
ret.put("signature", signature);
return ret;
}
前端
<img class="" id="imgsrc" src="" style="" onclick="previewImage(this.src);">
導入：
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
js:
<script type="text/javascript">
$().ready(function(){
wx.config({
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '${retMap.get('appid')}', // 必填，公眾號的唯一標識
timestamp: "${retMap.get('timestamp')}", // 必填，生成簽名的時間戳
nonceStr: "${retMap.get('nonceStr')}", // 必填，生成簽名的隨機串
signature: "${retMap.get('signature')}",// 必填，簽名，見附錄1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
});
function previewImage(src){
//保存本地圖片地址,服務器圖片id,url
images = {
localId: [],
serverId: [],
urls:[]
};
wx.previewImage({
current: ''+src, // 當前顯示圖片的http鏈接 （必傳）
urls: images.urls // 需要預覽的圖片http鏈接列表（必傳）
});
}</script>