哈喽，你听过微信H5页面能接入第三方导航没？听起来高大上？其实就是让你的公众号变得更实用。比如说，你可以在公众号里放个餐厅推荐图，一点就能直接跳转到导航应用，轻松找到想去的餐馆，是不是很方便？那我们赶快来看看怎么做！
准备工作：不打无准备之仗
首先得注册个微信公众号并完成认证哩，否则没法玩转。接着是要备好网站域名，这样大家会更放心使用。当然，如果你想让公众号里的菜单展示出H5页面的话，就需要加上导航功能了！这些就是咱们最初阶段所需做的事！
需求分析：用户需要什么？
搞定这事儿就差不多！只要加上个跳转链接到导航按键就成。虽然看似简单，但我们也得多了解下。举个例子，像在微信H5页面搞这些调用接口之类的事情，我们总是得跟技术大神们交流交流~
技术实现：一步步教你如何操作
OK，先给网页加个支持https的JS文件，这样就安全多了！然后，要获取jssdk的签名权限，就需要后台的帮忙。咱们只需要把这个权限塞进wx.config就行咯。看起来有点复杂？其实和咱们平时搞微信API差不多哈。
调试与上线：从开发到实际使用
开发时记得开调试模式可是上线后得赶紧关了，别让用户摸不着头脑。再者，要用啥接口就加到jsApiList里不然就瞎忙活虽然这是小事儿一桩，但细节决定成败，不是吗？
事件注册：让按钮动起来
"
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口
});
"
我们现在开始搞导航按钮的点按操作，让它激活那个wx.openLocation的功能。这个步骤挺关键的，弄完了就能马上跳转到微信里面的定位页面！然后你再轻轻点一下右下角的设置，就能把你手机上的其他导航软件给找出来了。是不是超级简单？
注意事项：避免踩坑的小贴士
记住要记得定期更新你的JS文件，以防止可能出现的问题。再确认下签名权限，否则可能会导致调用失败。这是咱们踩了好多雷后得出的经验，希望能帮到你哟~
实战案例：看别人是怎么做的
看看这个实战案例呗，教你怎么用微信里的H5页面呼唤第三方定位导航。这个学会以后，不仅可以明明白白地看到流程，还能get到很多实用小技巧！
$('.btn2').click(function () {
wx.openLocation({
latitude: 22.545538, // 纬度，浮点数，范围为90 ~ -90
longitude: 114.054565, // 经度，浮点数，范围为180 ~ -180。
name: '这里填写位置名', // 位置名
address: '位置名的详情说明', // 地址详情说明
scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
});
})
总结：掌握方法，轻松实现导航功能
看完上面的讲解，相信大家都理解怎么利用微信H5页面实现第三方定位了！按照步骤操作其实很容易，轻轻一点就可以完成导航设置！这下子，你的微信订阅号变得更加实用了。
评论0