企业微信公众号网页开发之引入高德地图API

test.jsp 页面文件

WxController.java 后端Controller层代码

WxService.java 后端Service层代码

WxDao.java 后端Dao层代码

一、JS-SDK集成及验证

1.前端引入js文件

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.为JS-SDK注入配置信息

wx.config({
			beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: configData['appId'], // 必填，企业微信的corpID
			timestamp: configData['timestamp'], // 必填，生成签名的时间戳
			nonceStr: configData['noncestr'], // 必填，生成签名的随机串
			signature: configData['signature'],// 必填，签名，见 附录-JS-SDK使用权限签名算法
			jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来，这里我们调用地理位置接口
		});

以上需要配置的信息中，beta和debug为固定值，其余项产生方式如下：

appId：企业微信管理员后台企业ID

timestamp、nonceStr、signature：后台生成。后端代码调用逻辑为WxController->调用WxService接口（WxServiceImpl为实现类）->调用WxDao接口（WxDaoImpl为实现类）,代码如下：

Controller层

WxController.java

     /**
	 * 微信初始化参数获取接口
	 * @param url
	 * @param req
	 * @param res
	 * @return
	 */
	@ResponseBody
	@RequestMapping(value="/getConfigParam",produces="text/html;charset=UTF-8")
	public String getConfigParam(String url,HttpServletRequest req,HttpServletResponse res) {
		//获取access_token
		String access_token=wxService.getToken();
		//获取企业ticket
		String corpTicket=wxService.getCorpTicket(access_token);
		JSONObject jsStr = JSONObject.fromObject(corpTicket); 
		String jsapi_ticket=(String)jsStr.get("ticket");
		//随机字符串
		String noncestr=getRandomString(10);
		//时间戳
		String timestamp=String.valueOf(System.currentTimeMillis());
		//String timestamp=String.valueOf(new Date().getTime());
		//获取签名字符串
		String signature=signature(jsapi_ticket,noncestr,timestamp,url);
		//构造参数集合map
		Map<String,String> map=new HashMap<String,String>();
		map.put("appId", "#");//#替换为企业ID
		map.put("noncestr", noncestr);