html公众号页面实现点击按钮跳转到导航

时间：2024-04-20 07:20:31

实现效果：

点击导航自动跳转到：

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~-90
            address:'一年一度鉴赏大会',// 地址详情说明
            name:"天坛公园",// 地址名称
            scale:15,//地图缩放级别,整形值,范围从1~28。默认为最大infourl:'·//! 在查看位置界面底部显示的超链接,可点击跳转

        });
         wx.error(function(res){
             console.log(res.errMsg)// 这里可以打印错误信息
        
         });
    })
</script>
</body>
</html>

上面有个接口地址，我用的后端是php接口，返回内容如：

接口文件内容如下：

<?php


namespace 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.'&timestamp='.$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'];
       
}

 注意：经纬度不要写反了，我之前遇到的问题就是经纬度写反了，苹果手机点击没反应，安卓手机可以点击，但是导航错误。

相关文章