VUE如何进行微信定位（使用微信JSSDK）

最新推荐文章于 2024-04-29 11:45:01 发布
最新推荐文章于 2024-04-29 11:45:01 发布
阅读量3.5k 收藏 23
点赞数 5
文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43331967/article/details/109640004
版权

VUE如何进行微信定位（使用微信JSSDK）

摘要

背景：在做高德地图的定位时，发现在微信浏览器中只要最开始把定位权限关闭后，就再也没有位置可以再次打开定位权限，导致在微信浏览器中再也无法定位（mmp，就离谱），所以本文要使用微信自带的定位接口，实现在微信浏览器里的定位，以防止定位权限再也无法打开的情况。
本文主要介绍两点：
1.使用微信JSSDK进行微信定位的开发流程（非原理）
2.VUE中具体实现，以及本地如何进行测试

一、使用微信JSSDK进行微信定位的开发流程

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，如下图
在这里插入图片描述
点击设置，进行安全域名设置
在这里插入图片描述
注意：这里写线上的安全域名，即使保存次数用完了也没关系，可以在本地进行测试。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

在VUE中直接使用npm进行安装，在使用的地方import即可

npm isntall weixin-js-sdk --save

import wx from 'weixin-js-sdk'

步骤三：通过config接口注入权限验证配置

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

除了jsApiList，我们都需要从后端获取。
我们就向后端发起一个请求，然后后端封装一下返回给前端是不是就好了。

appId，直接从微信后台拿来用就行。

timestamp，后端返回，但要注意要以秒为单位。

nonceStr，后端返回，随机串。

signature，生成方式如下。

signature的生成（后端处理，与前端无关）

1、参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
2、用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
成功返回如下JSON：

{
  "errcode":0,
  "errmsg":"ok",
  "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
  "expires_in":7200
}

3、签名算法
示例：

noncestr=Wm3WZYTPz0wzccnW // 后端随机生成的字符串
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg // 第二步从微信那里拿到的ticket
timestamp=1414587457 // 时间戳（秒）
url=http://mp.weixin.qq.com?params=value // 当前网页的URL，不包含#及其后面部分，前端传过来的

将以上四个变量按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1（所有参数名均为小写字符）
拼好后如下

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

然后将拼好的string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

1.签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。

2.签名用的url必须是调用JS接口页面的完整URL。

3.出于安全考虑，开发者必须在服务器端实现签名的逻辑。

4.signature生成不对前端就会出现invalid signature错误，解决方法见下面的常见问题。

步骤四：通过ready接口处理成功验证

wx.ready(function(){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

步骤五：通过error接口处理失败验证

wx.error(function(res){
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

二、VUE中具体实现，以及本地如何进行测试

1、搭建本地测试环境

1.首先下载微信开发者工具下载地址
2.将本地的localhost改为 第一步中所绑定的js安全域名。
（在这之前判断你的VUE工程调用接口的地址是否跟所绑定的js安全域名一样，如果一样，则通过服务器ip地址调用接口。）
修改host文件（位置 C:\Windows\System32\drivers\etc）
如下图
在这里插入图片描述
3.VUE工程将本地端口号设为80
如下图，在跟目录的vue.config.js添加如下代码

devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: '80',
    disableHostCheck: true,
    https: false,
    hotOnly: false,
    overlay: {
      warnings: false,
      errors: true
    }
    // proxy: {
    //   '/api': {
    //     target: 'xxxxxx', // 自己的代理
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': '/'
    //     }
    //   }
    // }
  },

4.查看本地80端口是否被占用
window下使用如下命令

netstat -aon|findstr "80"

如下图
在这里插入图片描述
打开任务管理器，将pid为上图19572的服务关闭，如下图
在这里插入图片描述
5.最后运行你的VUE项目，在微信开发者工具中打开，注意不要使用localhost访问，使用第一步所修改的域名，不需要加端口号，如下图
在这里插入图片描述
本地环境已搭建完毕

2、VUE中具体实现

1.引入JS文件

npm isntall weixin-js-sdk --save

2.配置微信

import wx from 'weixin-js-sdk'
import apis from '@/api'

// 初始化微信sdk方法
wxJsSdkInit() {
	const url = window.location.href
	const jsApiList = ['getLocation'] // 微信获取地理位置接口
	const request = { ...apis.ACCOUNT.WX_SIGN } // 接口地址
	request.params = { // 参数
	  url
	}
	this.$request(request) // 调用接口
	.asyncThen(
	  (resp) => {
	  	// 成功返回
	    wx.config({
	      debug: true, // 开发时设为true方便调试
	      signature: resp.data.signature,
	      nonceStr: resp.data.nonceStr,
	      timestamp: resp.data.timestamp,
	      appId: resp.data.appId,
	      jsApiList
	    })
	    wx.error((res) => {
	      // 微信配置失败
	      // console.log(res)
	      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	    })
	    wx.ready((res) => {
	      // 微信配置成功
	      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	      // console.log(res)
	    })
	  },
	  (err) => {
	    console.error(err)
	  }
	)
	.asyncErrorCatch((err) => {
	  console.error(err)
	})
}

配置好如下图所示
在这里插入图片描述

3.调用微信getLocation方法

import wx from 'weixin-js-sdk'

getLocationByWx() [
	const ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/micromessenger/i) != null) {
     wx.getLocation({
       type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
       success: (res) => {
         var lat = res.latitude // 纬度，浮点数，范围为90 ~ -90
         var lng = res.longitude // 经度，浮点数，范围为180 ~ -180。
         // var speed = res.speed // 速度，以米/每秒计
         // var accuracy = res.accuracy // 位置精度
       },
       fail: (error) => {
         // this.$message({
         //   type: 'error',
         //   message: `微信定位失败，请稍后重试`
         // })
       },
       cancel: (error) => {
         // this.$message({
         //   type: 'error',
         //   message: `微信定位未授权，请稍后重试`
         // })
       }
     })
    }
}

定位后如下图所示
在这里插入图片描述

三、常见问题

1.invalid url domain当前页面所在域名与使用的appid没有绑定，请确认正确填写绑定的域名，仅支持80（http）和443（https）两个端口，因此不需要填写端口号
2.invalid signature签名错误
按以下顺序进行

  1. 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。判断后端返回的signature是否正确。
  2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
  3. 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s)😕/‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。
  4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
  5. 确保一定缓存access_token和jsapi_ticket。
  6. 确保你获取用来签名的url是动态获取的

注意：如果以上都没有问题（部署到线上就是好的，本地就不行，mmp这就离谱，本地都失败了，谁敢部署到线上。死锁了。。。），那一定是本地测试所访问的地址和所配置的js安全域名不一致，本地用了localhost，而js安全域名是线上的地址，所以一定要搭建本地测试环境。

3.getLocation定位不准：只会在微信开发者工具上会有问题，不必担心。

四、参考地址

1.微信JS-SDK说明文档
2.https://www.cnblogs.com/xiaofeng-blog/p/10216988.html

走马~
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue 实现Web端的定位功能 获取经纬度
10-16
主要介绍了vue 实现Web端的定位功能获取经纬度，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中获取微信定位
weixin_43837268的博客
07-02 4954
最重要的是！！！！ 【1.微信公众号设置js安全域名:前端必须部署在js安全域名下才能测试】和 【2.ip白名单：后端部署在ip白名单下的域名下才能测试】 1.下载依赖 npm install weixin-js-sdk --save-dev 2.使用的页面 //引入微信 import wx from 'weixin-js-sdk' methods:{ wxRegiste...
微信jssdk获取定位计算距离
sqf251877543的博客
03-11 427
【代码】微信jssdk获取定位计算距离。
vue 微信H5页面打开内置地图的指定位置和获取当前位置
Suger的博客
02-27 4371
微信页面打开内置地图
vue 微信公众号获取定位经纬度 腾讯地图逆地址解析为具体地址
qq_39650208的博客
05-10 3348
前提准备： 1、首先先申请一个腾讯地图key 网址为：申请腾讯地图的开发者keyhttps://lbs.qq.com/console/mykey.html?console=mykey，申请完以后是这样 2、项目安装 wx依赖 npm install weixin-js-sdk --save-dev 接下来就是代码操作： 1、先要引入wx和腾讯地图 在项目的index.html页面引入腾讯地图 <script charset="utf-8" src="https://map...
(2023进阶版）vue+h5 通过高德地图（原生） 获取当前位置定位
yangzixiansheng的博客
06-20 4407
前言：因为也是用的上一个版本的代码，为了描述清楚所以就直接复制文章来更改了，这一版更加完善简洁，高德地图精确度也更高 (2021年写过的一版上线了挺长时间，2023年突然被应用市场下架，说流程走不通，就卡在获取定位失败。改了之后已上线运行
vue地图定位微信小程序
08-17
vue地图定位微信小程序
在Vue中获取手机定位信息
来自甘政法小小胡的博客
11-24 1008
在Vue中获取手机定位信息，可以使用Geolocation API来实现。
vue.js 微信定位
zhoujianjava的博客
08-11 1016
import wx from 'weixin-js-sdk' setLocaltion: function () {       var _this = this       var timer1 = window.setInterval(function () {         const addressItem = sessionStorage.getIt
vue 项目中获取微信地理位置
xm_w_xm的博客
07-23 1107
mounted() { this.wxRegister(); }, methods: { wxRegister() { let that = this; // 获取后台配置 let nowdata = Math.round(new Date().getTime() / 1000).toString(); let uuid = this.newuuid(); let url = encodeURIComponent(wi..
vue引入使用腾讯地图JavaScript API GL
料峭春风吹酒醒，微冷， 山头斜照却相迎。 回首向来萧瑟处，归去， 也无风雨也无晴！
05-14 5084
1.不知道为什么 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> 这种方式引入js无效，不加载js文件。，于是改成官方的第二种引入方式。 2.在官方的例子上再改下代码，等js加载完成后再去初始化地图，不然会报TMap不存在。 <template > <div i
vue引入微信sdk 实现分享朋友圈获取地理位置功能
12-11
最近入职的公司主要做微信端的h5，所以在所难免要引用sdk。虽然官方文档写的还算清楚，但是还是有坑。 1.在index.html中 引入微信sdk [removed][removed] 2.在assets/js 下新建文件 wx.js export default { wxShowMenu: function (that,sign='') { let url = [removed].href.split('#')[0]
vue中实现高德定位功能
10-15
主要介绍了vue中实现高德定位功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
详解vue中使用微信jssdk
10-17
主要介绍了vue中使用微信jssdk，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
详解vue项目接入微信JSSDK的坑
10-17
主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 应用中结合vux使用微信 jssdk的方法
12-11
先确认已经满足使用jssdk的要求再进行开发。 引入 在 main.js 中全局引入： import { WechatPlugin } from 'vux' Vue.use(WechatPlugin) console.log(Vue.wechat) // 可以直接访问 wx 对象。 组件外使用 考虑到你...
微信jssdk逻辑在vue中的运用详解
01-19
微信 jssdk 在 vue 中的简单使用 import wx from 'weixin-js-sdk'; wx.config({ debug: true, appId: '', timestamp: , nonceStr: '', signature: '', jsApiList: [] }); wx.ready(() => { // do something...
vue2---修饰符
weixin_45503872的博客
04-24 1059
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
最新发布
前端技术
04-29 451
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
vue2接入微信公众号JSSDK
07-28
要在Vue2中接入微信公众号JSSDK，您需要按照以下步骤进行操作： 1. 在公众号后台配置JS接口安全域名，确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库，可以通过npm进行安装： ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库： ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK，并进行相关配置： ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用的JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口，比如选择图片接口`chooseImage`： ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤，您可以根据实际需求进行相应的配置和调用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值