La page H5 de WeChat appelle la navigation de localisation tierce

Cette fois, je vais vous présenter la navigation d'une page WeChat H5 qui appelle un emplacement tiers. Quelles sont les précautions lorsqu'une page WeChat H5 appelle un tiers. navigation par localisation ? Ce qui suit est un cas pratique.

La page WeChat h5 lance une application de navigation tierce

Besoin de préparer :

1. Compte public certifié par WeChat

2. Un nom de domaine enregistré

Contexte : le compte officiel WeChat clique sur la barre de menu pour accéder à la page h5, vous devez utiliser la fonction de navigation

Exigence : Lorsqu'un utilisateur Lorsque vous cliquez sur le bouton de navigation, accédez à l'application tierce pour la navigation

Référence : Documentation de développement de compte public WeChat

Étapes :

Présentez les éléments suivants JS dans la page qui doit appeler le fichier d'interface JS, (prend en charge https) : http://res.wx.qq.com/cgi-bin/index?lang=zh_CN

L'autorisation de signature de jssdk , cette autorisation est fournie par le backend, le front-end n'a besoin que d'injecter les autorisations de signature dans wx.config. Je pense que cette étape peut être omise si vous avez utilisé d'autres API WeChat

       "
       wx.config({
           debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
           appId: '', // 必填，公众号的唯一标识
           timestamp: , // 必填，生成签名的时间戳
           nonceStr: '', // 必填，生成签名的随机串
           signature: '',// 必填，签名
           jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
       });
       "

Quels sont les besoins. à noter ici est que debug doit être modifié en false après la mise en ligne. jsApiList Vous devez renseigner l'interface que vous souhaitez utiliser, sinon cela n'aura aucun effet

Enregistrez l'événement click pour l'événement. bouton de navigation et appelez la méthode wx.openLocation

$('.btn2').click(function () {
            wx.openLocation({
                latitude: 22.545538, // 纬度，浮点数，范围为90 ~ -90
                longitude: 114.054565, // 经度，浮点数，范围为180 ~ -180。
                name: '这里填写位置名', // 位置名
                address: '位置名的详情说明', // 地址详情说明
                scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
            });
        })

Il sautera après avoir cliqué sur Accédez à la page de localisation WeChat et cliquez sur la navigation dans le coin inférieur droit pour afficher la navigation tierce !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

La technologie frontale réalise la superposition de textures de texte

h5 réalise le téléchargement d'un aperçu de plusieurs images et le clic -to-glisser Faites glisser le contrôle

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!