您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息
三六零分类信息网 > 锦州分类信息网,免费分类信息发布

微信的H5页面调用第三方位置导航

2024/3/23 17:36:12发布36次查看
这次给大家带来微信的h5页面调用第三方位置导航,微信h5页面调用第三方位置导航的注意事项有哪些,下面就是实战案例,一起来看一下。
微信h5页面拉起第三方导航应用
需要准备的:
通过微信认证的公众号
有备案过的域名
背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能
需求:当用户点击导航按钮时,跳转到第三方app进行导航
参考:微信公众号开发文档
步骤:
在需要调用js接口的页面引入如下js文件,(支持https):http://res.wx.qq.com/cgi-bin/index?lang=zh_cn
jssdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了,相信用过微信其他api的这一步都可以省了
wx.config({            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。            appid: '', // 必填,公众号的唯一标识            timestamp: , // 必填,生成签名的时间戳            noncestr: '', // 必填,生成签名的随机串            signature: '',// 必填,签名            jsapilist: ['openlocation'] // 必填,需要使用的js接口列表 这里填写需要用到的微信api openlocation为使用微信内置地图查看位置接口        });
这里需要注意的地方debug在上线后要改为false,jsapilist里要填你要使用的接口,不然没有作用
给导航按钮注册点击事件,调用wx.openlocation方法
$('.btn2').click(function () {             wx.openlocation({                 latitude: 22.545538, // 纬度,浮点数,范围为90 ~ -90                 longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。                 name: '这里填写位置名', // 位置名                 address: '位置名的详情说明', // 地址详情说明                 scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大             });         })
点击后会跳转到微信的位置页面,点击右下角的导航就能拉起第三方的导航拉!
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
前端技术实现文本文字纹理叠加
h5实现多图片预览上传及点击可拖拽控件
以上就是微信的h5页面调用第三方位置导航的详细内容。
锦州分类信息网,免费分类信息发布

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录