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 自动化部署，优势就是可…...
ES6从入门到精通：前言
ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解：由来、作用与意义**一、知识点核心内容****二、知识点的由来：从生活实践到数学抽象****三、知识的作用：解决实际问题的工具****四、学习的意义：培养核心素养…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？
在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...