最新文档:微信、企业号+地理位置定位+地图展示

news2025/1/11 21:36:46

概述

公司有需求,通过企业号打卡项目,需要用到企业微信定位

详细

前言

     demo是基于微信、企业号平台的一个定位,地图展示项目

    后台使用springboot架构搭建的与微信交互的服务,使用httpclient连接池,调用微信接口,并且使用到Sha-1加密签名。

    客户端使用微信提供的js-sdk,遵守微信认证规则,授权使用微信开放接口

    

    使用微信、企业号定位并展示效果图:

20190717191206.jpg

        前期准备:

image.png

image.png

一、项目结构

image.png

二、服务端实现步骤

    1、项目初始化获取access_token(access_token作为企业号与微信交互的令牌,项目初始化时可通过调用微信接口,换取access_token,并在本地缓存,有效期两小时)

    代码示例:

public static void refreshAccessToken() {
if(access_token_time  !=0 && System.currentTimeMillis() < access_token_time ) return; 
Map<String, String> params = new HashMap<String, String>();
params.put("corpid", CORPID);
params.put("corpsecret",CORPSECRET);
String resJson = HttpClientUtil.doGet(
"https://qyapi.weixin.qq.com/cgi-bin/gettoken", params);
WeChatAccessTokenResres = JSONObject.toJavaObject(JSONObject.parseObject(resJson), WeChatAccessTokenRes.class);
access_token = res.getAccess_token();
access_token_time = System.currentTimeMillis()+6900;
}

  2、换取jsapi_ticket(使用微信的sdk,需要使用access_token换取jsapi_ticket作为票据,有效期也是两小时)

代码示例:

public static void getJsapiTicket() {
if(jsapi_ticket_time !=0 &&  jsapi_ticket_time > System.currentTimeMillis()) return;
String resJson = HttpClientUtil.doGet(
"https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token="
+ access_token, null);
JSONObject jsonRes = JSONObject.parseObject(resJson);
jsapi_ticket = (String) jsonRes.get("ticket");
jsapi_ticket_time = System.currentTimeMillis()+6900;
}

3、生成签名:  signature(拿到了jsapi_ticket,后需要访问的url,时间戳,jsapi_ticket,拼成字符串使用sha-1加密算法生成签名)

代码示例:

public static String getSignature(String noncestr, String timestamp,
String url) throws NoSuchAlgorithmException,
UnsupportedEncodingException {
String item = "jsapi_ticket="+jsapi_ticket + "&noncestr=" + noncestr + "&timestamp="
+ timestamp + "&url=" + url;
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(item.getBytes("UTF-8"));
String signature = byteToHex(crypt.digest());
return signature;
}

4、拿到签名后,需要将 时间戳,签名回调 给前端

    代码示例:

@RequestMapping("getSignature")
@ResponseBody
public Map<String,String> getSignature(String url){
WechatConfigs.refreshAccessToken();
WechatConfigs.getJsapiTicket();
String noncestr = WechatConfigs.creatNoncestr();
String timestamp = WechatConfigs.getTimeStamp();
String signature ="";
try {
signature = WechatConfigs.getSignature(noncestr, timestamp, url);
} catch (NoSuchAlgorithmException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Map<String,String> result = new HashMap<String, String>();
result.put("noncestr", noncestr);
result.put("timestamp", timestamp);
result.put("signature", signature);
return result;
}
三、前端实现步骤

    1、类库引用

<script type="text/javascript" src="./js/jweixin-1.2.0.js"></script>

   2、初始化获取签名,时间戳,随机字符串

    代码示例:

var url =window.location.href;
var noncestr = "";
var timestamp = "";
var signature = "";
debugger;
$.ajax({
url:"../demo/getSignature",
type:"post",
data:{url:url},
dataType:"json",
async:false,
success:function(res){
noncestr = res.noncestr;
timestamp = res.timestamp;
signature = res.signature;
}
});

 3、微信初始化配置

    代码示例:

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

4、调用微信js-sdk接口

代码示例:

wx.getLocation({
    type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
    success: function (res) {
    debugger;
        var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
        var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
        var speed = res.speed; // 速度,以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        
        wx.openLocation({
            latitude: latitude, // 纬度,浮点数,范围为90 ~ -90
            longitude: longitude, // 经度,浮点数,范围为180 ~ -180。
            name: '武汉', // 位置名
            address: '', // 地址详情说明
            scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为16
        });
         
    }
});
四、运行项目,在微信,企业号,访问url

 

image.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1037383.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

小黑子—MyBatis:第二章

MyBatis入门2.0 四 小黑子诉说Mybatis核心配置文件详情4.1 多环境4.2 Mybatis的事务管理器 - transactionManager4.3 dataSource&#xff08;数据源&#xff09;4.3.1 不同类型下的数据源有不同的属性4.3.2 pool 和 unpooled 的区别4.3.3 配置具体的数据库连接池对象 4.4 prope…

【操作系统笔记三】内存寻址

物理寻址 主存&#xff08;内存&#xff09; 计算机主存也可以称为物理内存&#xff0c;内存可以看成由若干个连续字节大小的单元组成的数组每个字节都有一个唯一的物理地址&#xff08;Physical Address&#xff09;CPU访问内存前&#xff0c;先拿到内存地址&#xff0c;然后…

Django — 会话

目录 一、Cookie1、介绍2、作用3、工作原理4、结构5、用途6、设置7、获取 二、Session1、介绍2、作用3、工作原理3、类型4、用途5、设置6、获取7、清空信息 三、Cookie 和 Session 的区别1、存储位置2、安全性3、数据大小4、跨页面共享5、生命周期6、实现机制7、适用场景 四、P…

掌动智能浅析故障注入测试的好处与实践方法

在现代技术环境中&#xff0c;系统面临各种潜在的威胁和故障&#xff0c;如硬件故障、网络问题、软件错误等。为了应对这些挑战&#xff0c;开发团队需要确保系统在逆境中依然能够提供可靠的服务。故障注入测试是一种模拟现实故障和异常情况的方法&#xff0c;旨在提高系统的鲁…

vue3+ts+java使用WebSocket传输数据

一、环境 系统&#xff1a;win11 IDE&#xff1a;vscode 框架&#xff1a;electron22.0.0vite2vue3typescript4.8.4springboot2.2.5jdk1.8 二、websocket介绍 2.1 由来 WebSocket未出现之前&#xff0c;浏览器和服务器之间的通信是通过Web的poll技术进行通信&#xff0c;就…

牛客java训练题 day1

9.24 day1 Q 1. this 指针是用来干什么的&#xff1f; 2.基类和派生类分别是指什么&#xff1f; 3.为什么方法中不能写静态变量 4. 解释一下ASCII码和ANSI码和两者的区别 5.简述j ava.io java.sql java.awt java.rmi 分别是什么类型的包 6. 看下面一段代码&#xff1a;…

分类预测 | Matlab实现NGO-CNN-SVM北方苍鹰算法优化卷积支持向量机分类预测

分类预测 | Matlab实现NGO-CNN-SVM北方苍鹰算法优化卷积支持向量机分类预测 目录 分类预测 | Matlab实现NGO-CNN-SVM北方苍鹰算法优化卷积支持向量机分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现NGO-CNN-SVM北方苍鹰算法优化卷积支持向量机分类预…

安全防御第二次作业

1. 防火墙支持那些NAT技术&#xff0c;主要应用场景是什么&#xff1f; 防火墙支持几乎所有的NAT技术&#xff0c;包括源NAT、目标NAT、双向NAT等&#xff0c;主要应用场景是保护内部网络免受外部网络的攻击 NAT技术可以将IP数据报文头中的IP地址转换为另一个IP地址&#xff…

暴力递归转动态规划(七)

题目 LeetCode原题-最长回文子序列 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&a…

【【萌新的FPGA学习之按键控制LED实验】】

按键控制LED实验 在写这篇文章之前我必须对我的错误表示深刻的道歉 因为我之前的文章自己也是边看边学给大家带来了大的困扰 抱歉抱歉 我们这里讲述一下综合和仿真的关系 其实我们更多的是应该关注仿真下得到的波形情况 然后分析 对于综合&#xff0c;综合的最大的目的还是看功…

计算机等级考试—信息安全三级真题二

目录 一、单选题 二、填空题 三、综合题 一、单选题

数据结构的奇妙世界:实用算法与实际应用

文章目录 数据结构和算法的基本概念数据结构数组链表栈队列树图 算法 常见的数据结构和算法排序算法快速排序示例 数据结构的应用数据库管理系统图像处理网络路由 数据结构和算法的性能分析时间复杂度空间复杂度 如何更好地编写代码避免常见错误结论 &#x1f389;欢迎来到数据…

Qt地铁智慧换乘系统浅学( 三 )最少路径和最少换乘实现

本算法全都基于广度优先 概念最短路径实现所用容器算法思路 最少换乘实现所需容器算法思路 成果展示代码实现判断是最短路径还是最少换乘最短路径代码实现最少换乘代码实现根据所得List画出线路 ui界面的维护&#xff08;前提条件&#xff09;界面初始化combox控件建立槽函数 概…

把Eclipse整个文件夹添加到Microsoft Defender的排除项中

一.原因&#xff1a; Windows 10卫士显著降低了Eclipse的速度&#xff0c;原因是Windows 10卫士扫描JAR文件。这个问题已经报告给微软了。在此之前&#xff0c;解决此问题的一个方法是将Eclipse根目录添加到Windows 10 Defender的排除列表中&#xff0c;详细步骤在这里共享。 …

前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS基础(五)

接受自己原本的样子&#xff0c; 比努力扮演另一个轻松多了。 思维导图 对象 什么是对象 对象使用 遍历对象 索引号是字符串型&#xff0c;不推荐遍历数组。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><me…

docker实现mysql主从复制(巨详细!!!)

docker实现mysql主从复制&#xff08;巨详细&#xff01;&#xff01;&#xff01;&#xff09; 新建主机服务容器实例3307进入/mydata/mysql-master/conf目录下新建my.cnf修改完配置后重启master实例进入mysql-master容器master容器实例内创建数据同步用户新建 服务器容器实例…

【论文阅读】内存数据库并发控制算法的实验研究

内存数据库并发控制算法的实验研究 原文链接jos.org.cn/jos/article/pdf/6454 摘要 并发控制算法的基本思想归纳为"先定序后检验”&#xff0c;基于该思想对现有各类并发控制算法进行 了重新描述和分类总结&#xff0c;于在开源内存型分布式事务测试床 3TS 上的实际对比实…

Tune-A-Video论文阅读

论文链接&#xff1a;Tune-A-Video: One-Shot Tuning of Image Diffusion Models for Text-to-Video Generation 文章目录 摘要引言相关工作文生图扩散模型文本到视频生成模型文本驱动的视频编辑从单个视频生成 方法前提DDPMsLDMs 网络膨胀微调和推理模型微调基于DDIM inversio…

动手学深度学习(pytorch版)第二章-2.3线性代数Note-linear-algebra

类型 标量&#xff1a;仅包含一个数值被称为标量 向量&#xff1a;向量可以被视为标量值组成的列表 矩阵&#xff1a;正如向量将标量从零阶推广到一阶&#xff0c;矩阵将向量从一阶推广到二阶。 A torch.arange(20).reshape(5, 4) A.T //转置 张量&#xff1a;是描述具有…