vue 编写H5页面在公众号外部获取手机本地坐标经纬度

1、必须先注册个公众号，且认证后去下面这个地方配置好您的域名这仨地方都得设置，目前我试了下用域名还是用具体项目所在的文件夹目录没什么明显差异

譬如你是用shuzhiqiang.com或者shuzhiqiang.com/path貌似都差不多，不知道各位小伙伴遇到过什么差异没

2、上代码


// import wx from "weixin-jsapi"; //这个快要被废弃了1.0.0
import wx from "weixin-js-sdk"; //要用微信的屌方法必须要引入这个玩意儿！！！// 在created(){}里面就要先调用getWeixinSDK() {this.$sgData.weixin_mp_config({url: encodeURIComponent(location.href.split("#")[0]) //最好不要包含哈希，据说包含"#"的兄弟们都阵亡了~},{success: d => {// ↓↓↓这句话是用来给马化腾打个招呼，告诉小马哥我要用你的微信内置方法了哟，么么哒~↓↓↓wx.config({debug: true, //非调试模式(如果为true，在手机端会弹出alert窗口)appId: d.appId, // 必填，公众号的唯一标识timestamp: d.timestamp, // 必填，生成签名的时间戳nonceStr: d.nonceStr, // 必填，生成签名的随机串signature: d.signature, // 必填，签名              jsApiList: ["getLocation","updateAppMessageShareData"] // 必填，需要使用的JS接口列表（如：要使用定位获取坐标、分享好友）});},fail: d => {this.dialog("获取微信SDK权限失败，请点击右上角‘…’→刷新一下，谢谢配合！");} /*,error:d=> {console.log("报错了", d);}*/});},// 通过微信获取手机本地坐标经纬度getLocationByWx(callback) {// ↓↓↓ 这句话才是正儿八经开始获取微信经纬度坐标了 ↓↓↓wx.ready(() => {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。wx.getLocation({type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: d => {var latitude = d.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = d.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = d.speed; // 速度，以米/每秒计var accuracy = d.accuracy; // 位置精度this.errorLocationText =`您目前的地理坐标偏差范围大约是${accuracy}米，您刚刚瞬时速度为${speed}米/每秒` +(accuracy > 500 ? ",因个人设备差异，可能存在较大距离误差" : "") +(speed > 0? ",可能您刚刚是乘坐汽车或者自驾，目前获取的还是您前一刻的坐标位置，请稍微等待一会儿再尝试": "") +"。"; //这句话是为了后面定位失败做铺垫用的var zb = latitude + "," + longitude; //拼接“维度,经度”callback && callback(zb);},fail: d => {this.dialog("获取微信坐标位置失败，请点击右上角‘…’→刷新一下，谢谢配合！");}});});},

vue 编写H5页面在公众号外部获取手机本地坐标经纬度相关推荐

springboot+h5页面+微信公众号获取微信用户信息
springboot项目,h5页面通过微信公众号获取微信用户信息最近本人有一个项目需求,微信公众号里点击一个菜单进入一个商城购物系统. 对于在微信公众号还是小白的我来说难度有点大,但是做完后发现也就 ...
vue代码怎么变成小程序_使用vue编写h5公众号跳转小程序的实现代码
前言:我使用vue编写的h5公众号,实现点击小程序入口,打开小程序,微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_App ...
vue h5微信公众号授权获取用户信息
vue h5微信公众号授权获取用户信息 1.申请测试账号 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 2.修改网页授权 ...
uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...
微信公众号如何获取手机号，H5调用小程序，小程序调用H5
都知道微信公众号获取不到手机号,但是小程序可以. 今天大早晨老大死磕非要我公众号授权获取到手机号.没办法我还是有其他方法解决. 第一步:服务号添加一个小程序,网上有很多小程序授权的代码.确定小程序可以 ...
vue 微信公众号支付接口_总结vue项目中使用微信公众号支付的方法
本篇文章给大家带来的内容是总结vue项目中使用微信公众号支付的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档 ...
骏飞H5幸运刮刮乐源码多级分佣+upupw直接架设+H5微信登陆公众号接入管理员
简介: 骏飞H5幸运刮刮乐源码多级分佣+upupw直接架设+H5微信登陆公众号接入管理员网盘下载地址: http://kekewl.net/pWg5xjUEhkm0 图片:
2021最新外卖霸王餐小程序、H5、微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩源码下载
2021年了,你还在用淘宝客吗?赶紧跟上互联网的大势吧,外卖cps就是cps人群趋势! 个人.个体.企业均可使用外卖霸王餐小程序.H5.微信公众号版外系统源码|霸王餐美团/饿了么系统粉丝裂变玩 2 ...
vue支付宝html,Vue的H5页面唤起支付宝支付功能
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...

vue 编写H5页面在公众号外部获取手机本地坐标经纬度

vue 编写H5页面在公众号外部获取手机本地坐标经纬度相关推荐

最新文章

热门文章