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 自动化部署，优势就是可…...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
跨链模式：多链互操作架构与性能扩展方案
跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）
安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
Golang——7、包与接口详解
包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...