一、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'], // 必填，企业微信的corpIDtimestamp: 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_tokenString access_token=wxService.getToken();//获取企业ticketString 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);//构造参数集合mapMap<String,String> map=new HashMap<String,String>();map.put("appId", "#");//#替换为企业IDmap.put("noncestr", noncestr);map.put("timestamp", timestamp);map.put("signature", signature);//生成返回值JSONObject jo=JSONObject.fromObject(map);String result=jo.toString();return result;}//签名字符串生成函数public String signature(String jsapi_ticket,String noncestr,String timestamp,String url) {String str="jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;//sha1加密String signature=getSha1(str);  return signature;}

Service层

WxService.java接口

public String getToken();public String getCorpTicket(String access_token);

WxServiceImpl.java（实现WxService.java接口）

    @Overridepublic String getToken() {String ID="##";//##为企业IDString SECRET="##";//##为企业微信中应用的SecretString param="corpid="+ID+"&corpsecret="+SECRET;String getTokenUrl="https://qyapi.weixin.qq.com/cgi-bin/gettoken";return wxDao.getToken(getTokenUrl,param);}@Overridepublic String getCorpTicket(String access_token) {String getCorpTicketUrl="https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket";JSONObject jsStr = JSONObject.fromObject(access_token); String tokenStr=(String)jsStr.get("access_token");String param="access_token="+tokenStr;String corpTicket=wxDao.getCorpTicket(getCorpTicketUrl, param);return corpTicket;}

Dao层

WxDao.java接口

 public String getToken(String url, String param);public String getCorpTicket(String getCorpTicketUrl,String param);

WxDaoImpl.java（实现WxDao.java接口）我这里采用的是数据库保存的方式，将sccess_token保存在StaticParam表里，查询时看距离上次存储是否超过了7200s，如果过期则重新请求获取后保存。

     /*** 获得access_token*    param："corpid=ID&corpsecret=SECRET"*/@Overridepublic String getToken(String getTokenUrl,String param) {String result="";//包含access_token的字符串//查找数据表staticParam,看是否已有token且未过期String sql="SELECT * FROM STATICPARAM where key='access_token'";Query query=sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(StaticParam.class);ArrayList<StaticParam> rt=(ArrayList<StaticParam>)query.list();if(rt.size()==0) {//未保存access_token,请求新token并写入String data=sendGet(getTokenUrl,param);StaticParam staticParam=new StaticParam();staticParam.setKey("access_token");staticParam.setValue(data);staticParam.setTime(new Date().getTime());Session session=sessionFactory.openSession();Transaction tx = session.beginTransaction();String newId=(String)session.save(staticParam);tx.commit();session.close();result=data;}else {//已有token,检查是否过期,当前时间戳-保存时间戳   7200slong interval=new Date().getTime()-rt.get(0).getTime();if(interval>=7200000) {//重新获取并写入String data=sendGet(getTokenUrl,param);StaticParam staticParam=new StaticParam();staticParam.setId(rt.get(0).getId());staticParam.setKey("access_token");staticParam.setValue(data);staticParam.setTime(new Date().getTime());Session session=sessionFactory.openSession();Transaction tx = session.beginTransaction();session.update(staticParam);tx.commit();session.close();result=data;}else {//直接数据库中取值result=rt.get(0).getValue();}}return result;}/*** 获取企业ticket* @param getCorpTicketUrl 请求URL：https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN* @return*/public String getCorpTicket(String getCorpTicketUrl,String param) {String result="";//包含corpTicket的字符串//查找数据表staticParam,看是否已有corpTicket且未过期String sql="SELECT * FROM STATICPARAM where key='corpTicket'";Query query=sessionFactory.getCurrentSession().createSQLQuery(sql).addEntity(StaticParam.class);ArrayList<StaticParam> rt=(ArrayList<StaticParam>)query.list();if(rt.size()==0) {//未保存corpTicket,请求新corpTicket并写入String data=sendGet(getCorpTicketUrl,param);StaticParam staticParam=new StaticParam();staticParam.setKey("corpTicket");staticParam.setValue(data);staticParam.setTime(new Date().getTime());Session session=sessionFactory.openSession();Transaction tx = session.beginTransaction();String newId=(String)session.save(staticParam);tx.commit();session.close();result=data;}else {//已有corpTicket,检查是否过期,当前时间戳-保存时间戳   7200slong interval=new Date().getTime()-rt.get(0).getTime();if(interval>=7200000) {//重新获取并写入String data=sendGet(getCorpTicketUrl,param);StaticParam staticParam=new StaticParam();staticParam.setId(rt.get(0).getId());staticParam.setKey("corpTicket");staticParam.setValue(data);staticParam.setTime(new Date().getTime());Session session=sessionFactory.openSession();Transaction tx = session.beginTransaction();session.update(staticParam);tx.commit();session.close();result=data;}else {//直接数据库中取值result=rt.get(0).getValue();}}return result;}

二、高德地图API集成

test.jsp

准备工作：在高德后台注册成个人开发者，然后在【我的应用】中新建一个应用，获取Key，后面会用到。

1、引入高德地图js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=#"></script>//#处为准备工作中获取的高德应用的Key值

2、在<head>中加入以下语句

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

3、js调用示例

//初始化地图
var map = new AMap.Map('container', {center: [116.397428, 39.90923],layers: [//只显示默认图层的时候，layers可以缺省new AMap.TileLayer()//高德默认标准图层],zoom: 13
});
wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度//console.log(latitude);}
});

4、完整的test.jsp页面代码如下，供测试参考。

最全的调用说明还是要看官网的文档的哈~，此处附上官方调用示例 https://developer.amap.com/demo/javascript-api/example/layers/default

<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=f0c096320bf008abe63967af3f10cf1e"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<style>
#container {width:100%; height: 80%; }
</style>
<body style="width:100%;height:300px;">
<div align="center"><h1>地图测试页面</h1></div><div id="container">放置地图的容器</div> </body>
<script type="text/javascript">
var configData="";
//获取微信初始化参数
$.ajax({url:"#",//#号处替换为后端生成微信js-sdk初始化参数的接口地址type:"post",data:{url:"#"},//#号处替换为test.jsp的访问路径dataType:'text',success:function(res){//console.log(res);var rt=eval('('+res+')');configData=rt;//console.log(configData);//微信初始化wx.config({beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: configData['appId'], // 必填，企业微信的corpIDtimestamp: configData['timestamp'], // 必填，生成签名的时间戳nonceStr: configData['noncestr'], // 必填，生成签名的随机串signature: configData['signature'],// 必填，签名，见 附录-JS-SDK使用权限签名算法jsApiList: ['getLocation'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来});wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度//console.log(latitude);}});},error:function(){console.log("出错了");}
})
//图层参数
var layer = new AMap.TileLayer({zooms:[3,20],    //可见级别visible:true,    //是否可见opacity:1,       //透明度zIndex:0,         //叠加层级detectRetina:true //是否在高清屏下适配，true为是})//初始化地图
var map = new AMap.Map('container', {center: [116.397428, 39.90923],layers: [//只显示默认图层的时候，layers可以缺省new AMap.TileLayer()//高德默认标准图层],zoom: 13
});
//地图点标记
marker = new AMap.Marker({icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",//可替换自己的图片地址position: [116.406315,39.908775],offset: new AMap.Pixel(-13, -30)
});
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
marker.setMap(map);
</script>
</html>

浏览器访问本项目test.jsp页面，就可以在页面上看到地图了（具体访问路径因项目而异，大家根据自己项目写喽~）

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

前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
微信公众号网页开发——实用真机调试
前言微信公众号网页开发的真机调试一直是很头疼的事情. 原因一微信公众号配置的JS安全域名只有三个,一个大中型的公众号这三个JS安全域名都是生产的域名,不可能预留域名用于开发和调试. 原因二在微信 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...
解决微信公众号网页a链接来回点击失效
在微信公众号网页开发的时候我在一个页面设置了多个a链接来回切换页面发现了一个问题就是来回切换页面的时候切换几次就会卡死,不让页面进行跳转后来发现在页面加上一个随机参数即可解决这个问题可能是微信对 ...

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