html公众号页面实现点击按钮跳转到导航
实现效果：
点击导航自动跳转到：
html页面代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>跳转导航</title><meta name="keywords" content=""/><meta name="description" content=""/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><style>.oneMsg{display: flex;align-items: flex-start;}</style>
</head>
<body>
<div class="oneMsg"><span>地址：天坛公园<img src="./img/baiduMap.png" class="baiduMap" style="width: 40px;height: 40px;vertical-align: middle;margin-left: 40px;"/></span>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js?ver=5"></script>
<script src="./js/jquery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">fetch("你的后端接口地址?url=" + location.href).then(function (res) {return res.json()}).then(function (res) {wx.config({debug: false,appId: res.appId,timestamp: res.timestamp,nonceStr: res.nonceStr,signature: res.signature,jsApiList: [// 所有要调用的 API 都要加到这个列表中'checkJsApi','openLocation','getLocation',],})})$('.baiduMap').on("click",function () {wx.openLocation({longitude:Number("116.410891"),// 经度，浮点数，范围为180 ~-180。latitude:Number("39.881951"),//纬度，浮点数，范围为90~-90address:'一年一度鉴赏大会',// 地址详情说明name:"天坛公园",// 地址名称scale:15,//地图缩放级别,整形值,范围从1~28。默认为最大infourl:'·//! 在查看位置界面底部显示的超链接,可点击跳转});wx.error(function(res){console.log(res.errMsg)// 这里可以打印错误信息});})
</script>
</body>
</html>上面有个接口地址，我用的后端是php接口，返回内容如：
接口文件内容如下：
<?phpnamespace app\index\controller;use think\Controller;
use think\Db;
use think\validate\ValidateRule;
use think\facade\Log;class Share extends Controller
{// 接口入口public function share_form(){$appid='你的公众号appid';$appsecret='公众号秘钥';$this->cache = new \Memcached();$this->cache->addServer('127.0.0.1', 11211);$data = $this->cache->get('access_token');$data = json_decode($data);if(!$data){$data=(object)[];$data->expire_time = time() - 10;}if ($data->expire_time < time()) {$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret";$ret_json = $this->curl_get_contents($url);$ret = json_decode($ret_json,true);$access_token=$ret['access_token'];$url_ticket = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $access_token .'&type=jsapi';$ret_json_ticket = $this->curl_get_contents($url_ticket);$ret_ticket = json_decode($ret_json_ticket,true);$ticket = $ret_ticket['ticket'];$data->expire_time = time() + 7000;$data->jsapi_ticket = $ticket;$token = json_encode($data);$this->cache->set('access_token', $token, 7000);}else {$ticket = $data->jsapi_ticket;}$noncestr = $this->getRandStr(15);$timestamp = time();$strvalue = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.input('url');$signature = sha1($strvalue);return json(['timestamp'=>$timestamp,'nonceStr'=>$noncestr,'signature'=>$signature,'appId'=>$appid,]);}public function getRandStr($length){$str = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';$randString = '';$len = strlen($str)-1;for($i = 0;$i < $length;$i ++){$num = mt_rand(0, $len);$randString .= $str[$num];}return $randString;}function curl_get_contents($url){$ch = curl_init();curl_setopt($ch, CURLOPT_URL, $url);curl_setopt($ch, CURLOPT_TIMEOUT, 1);curl_setopt($ch, CURLOPT_MAXREDIRS, 200);
// curl_setopt($ch, CURLOPT_USERAGENT, _USERAGENT_);
// curl_setopt($ch, CURLOPT_REFERER, _REFERER_);@curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);$r = curl_exec($ch);curl_close($ch);return $r;}public function get_token($appid,$appsecret){$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret";$ret_json = $this->curl_get_contents($url);$ret = json_decode($ret_json,true);if(!empty($ret['access_token'])){$redis->set('toupiao_share_access_token',$ret['access_token'],7000);}return $ret['access_token'];}注意：经纬度不要写反了，我之前遇到的问题就是经纬度写反了，苹果手机点击没反应，安卓手机可以点击，但是导航错误。
相关文章：
html公众号页面实现点击按钮跳转到导航
实现效果： 点击导航自动跳转到： html页面代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>跳转导航</title><meta name"keywords" conten…...
【算法】快速排序的基本思想、优化 | 挖坑填补法和区间分割法
创作不易，本篇文章如果帮助到了你，还请点赞 关注支持一下♡>𖥦<)!! 主页专栏有更多知识，如有疑问欢迎大家指正讨论，共同进步！ 更多算法分析与设计知识专栏：算法分析🔥 给大家跳…...
OSPF动态路由实验（华为）
思科设备参考：OSPF动态路由实验（思科） 一，技术简介 OSPF（Open Shortest Path First）是一种内部网关协议，主要用于在单一自治系统内决策路由。它是一种基于链路状态的路由协议，通过…...
EasyRecovery2024专业免费的电脑数据恢复软件
EasyRecovery数据恢复软件是一款功能强大的数据恢复工具，广泛应用于各种数据丢失场景，帮助用户从不同类型的存储介质中恢复丢失或删除的文件。 该软件支持恢复的数据类型非常广泛，包括但不限于办公文档、图片、音频、视频、电子邮件以及各种…...
Vue集成PageOffice实现在线编辑word、excel(前端配置)
一、什么是PageOffice PageOffice是一款在线的office编辑软件，帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转，领导批阅，盖章。可以给文件添加水印，在线安全预览防止用户下载…...
IBM SPSS Statistics for Mac：数据分析的卓越工具
IBM SPSS Statistics for Mac是一款功能强大的数据分析软件，专为Mac用户设计，提供了一系列专业的统计分析和数据管理功能。无论是科研人员、数据分析师还是学生，都能从中获得高效、准确的数据分析支持。 IBM SPSS Statistics for Mac v27.0.1…...
python爬虫------- Selenium下篇（二十三天）
🎈🎈作者主页： 喔的嘛呀🎈🎈 🎈🎈所属专栏：python爬虫学习🎈🎈 ✨✨谢谢大家捧场，祝屏幕前的小伙伴们每天都有好运相伴左右，一定要天天…...
获取字符串的全排列（去除字符串中2个字符相同时造成的重复）
一、概念 现有一个字符串，要打印出该字符串中字符的全排列。 以字符串abc为例，输出的结果为：abc、acb、bac、bca、cab、cba。 以字符串aab为例，输出的结果为：aab、aba、baa。 二、代码 public class Permutation {pub…...
HTML5新增的多媒体标签
在网页中加入音乐 <audio></audio> src 设置音乐文件名以及路径,<audio>标记支持MP3、WAV及OGG 3种音乐格式 autoplay：是否自动播放,加入autopaly属性表示自动播放 controls： 是否显示播放面板,加入controls属性表示显示播放面板 …...
温湿度传感器（DHT11）以及光照强度传感器（BH1750）的使用
前言 对于一些单片机类的环境检测或者智能家居小项目中，温湿度传感器（DHT11）以及光照强度传感器（BH1750）往往是必不可少的两个外设，下面我们来剖析这两个外设的原理，以及使用。 1. 温湿度传感…...
ActiveMQ 04 Linux下安装
Active MQ 04 Linux下安装 下载 解压 在init.d下建立软连接 ln -s /usr/local/activemq/bin/activemq ./设置开启启动 chkconfig activemq on 服务管理 service activemq start service activemq status service activemq stopNIO配置 默认配置为tcp，使用的…...
.pyc 文件是什么？是否有必要同步到 GitHub 远程仓库？
git status 时发现有很多 .pyc 的没有被 add (env) username:~/path/to/project$ git status On branch main Your branch is up to date with origin/main.Changes to be committed:(use "git restore --staged <file>..." to unstage)new file: xxx.pyCha…...
Zookeeper的集群搭建和ZAB协议详解
Zookeeper的集群搭建 1）zk集群中的角色 Zookeeper集群中的节点有三个角色： Leader：处理集群的所有事务请求，集群中只有一个LeaderFollwoer：只能处理读请求，参与Leader选举Observer：只能处理读…...
STM32 MPU配置参数
TXE LEVEL一般只用MPU_TEX_LEVEL0 1 - 1 - 1 -0性能最强（TEX - C - B- S）. #define MPU_TEX_LEVEL0 ((uint8_t)0x00) #define MPU_TEX_LEVEL1 ((uint8_t)0x01) #define MPU_TEX_LEVEL2 ((uint8_t)0x02) 基于上表进行常用配置 ÿ…...
Kafka概述
目录 1、为什么需要消息队列（MQ） 2、使用消息队列的好处 3、消息队列的两种模式 4、Kafka 定义 5、Kafka 简介 6、Kafka 的特性 7、Kafka 系统架构 8、Partation 数据路由规则 9、分区的原因 1、为什么需要消息队列（MQ） …...
OpenHarmony编译构建系统
这篇来聊聊OpenHarmony的编译构建，经过前面的实践，再来看编译构建。 编译构建概述 在官网中提到了，OpenHarmony编译子系统是以GN和Ninja构建为基座，对构建和配置粒度进行部件化抽象、对内建模块进行功能增强、对业务模块进行功能…...
Qt5 编译oracle数据库驱动
库文件 1、Qt源码目录：D:\Qt5\5.15.2\Src\qtbase\src\plugins\sqldrivers\oci 2、oracle客户端SDK: https://www.oracle.com/database/technologies/instant-client/winx64-64-downloads.html 下载各版本中的如下压缩包，一定要版本相同的 将两个压缩包…...
UE5学习日记——实现自定义输入及监听输入，组合出不同的按键输入~
UE5的自定义按键和UE4有所不同，在这里记录一下。 本文主要是记录如何设置UE5的自定义按键，重点是学会原理，实际开发时结合实际情况操作。 输入映射 1. 创建输入操作 输入操作并不是具体的按键映射，而是按键的激活方式࿰…...
为什么把script标签放在div下面？
放在底部可以优先加载页面的内容结构,提升页面渲染速度。只有等到HTML解析完成后,才会开始执行main.js,避免JS阻塞页面解析， 同时main.js里可能会操作DOM,如果放头部,可能会找不到节点而报错 <body><div id"root"><App></App>&l…...
Git 自定义命令
前言 在使用 hexo 搭建个人博客时，共两种部署的方法。分别为： 本地利用 hexo 的插件 hexo-deployer-git 来实现部署，缺点是需要多敲几个命令行且不方便对源码进行云端备份使用 Github Action 的 workflow 自动化部署，优势就是可…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？
🧠 智能合约中的数据是如何在区块链中保持一致的？ 为什么所有区块链节点都能得出相同结果？合约调用这么复杂，状态真能保持一致吗？本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，百货中心供应链管理系统被用户普遍使用，为方…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？
Otsu 是一种自动阈值化方法，用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理，能够自动确定一个阈值，将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结： 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析： 实际业务去理解体会统一注…...
学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕，#AI 监考一度冲上热搜。当AI深度融入高考，#时间同步 不再是辅助功能，而是决定AI监考系统成败的“生命线”。 AI亮相2025高考，40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕，江西、…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...