vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，

vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航

一、准备工作
二、开发须知
三、开始安装sdk
四、通过微信的config接口注入权限验证配置
附上代码

最近在搞vue项目需要在手机上唤醒第三方导航,在手机内置浏览器中打开都可以跳转至第三方高德了，百度了，腾讯，这些导航app,唯独到了微信内置浏览器死活唤醒不了，于是乎各种百度，查询资料，最后发现微信内置浏览器，限制跳转第三方app,想要跳转只能使用微信提供的方法，这就用到了微信JSSDK；

一、准备工作

1.通过微信认证的公众号
2.有备案过的域名

二、开发须知

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

三、开始安装sdk

npm install 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 接口列表
});

签名算法可去官方签名算法
注意：

签名用的 noncestr 和timestamp必须与 wx.config 中的 nonceStr 和timestamp相同。
签名用的 url 必须是调用 JS 接口页面的完整URL。（在当前页面打印’‘window.location.href’'就可看到完整url）在ios上，无论路由切换到哪个页面，实际真正有效的的签名url是【第一次进入应用时的URL】。所以在main.js获取当前url存储到本地存储localStorage中，在用到页面取出存储url即可。

判断在ios，安卓，微信中

const u = window.navigator.userAgent
isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios
isWx = u.indexOf('MicroMessenger') !== -1 //微信内置浏览器
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // 安卓

出于安全考虑，开发者必须在服务器端实现签名的逻辑。（前端只给后端传url即可）

附上代码

搜了好多文档都说url是location.href.split(‘#’)[0],实际开发中我并未使用#号之前的，可能微信提供的接口会自动处理，也可能是传到后端；后端进行了处理，实际情况大家可以自己试试

 const u = window.navigator.userAgentcreated(){// 判断是否是微信内置浏览器if(u.indexOf('MicroMessenger') !== -1){this.setWxConfig()}},methods:{// 注册微信地图setWxConfig(){ // 此方法楼主在created中调用let url =''if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){ // 判断是否在ios中url = localStorage.getItem('你在main.js中保存的url')}else{url = location.href}getSignature(url).then((res)=>{ // getSignature后端接口if(res.code===0){wx.config({debug: false, // 开启调试模式,appId: '', // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp:res.data.timeStamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名，见附录1jsApiList: ["openLocation"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});}})},// 打开唤醒地图toMap(val){ // val 处理过后的点位坐标if(u.indexOf('MicroMessenger') !== -1){ //判断是否在微信内置浏览器wx.openLocation({latitude: parseFloat(val.gaodePoints.lat), // 纬度，浮点数，范围为90 ~ -90longitude: parseFloat(val.gaodePoints.lng), // 经度，浮点数，范围为180 ~ -180。name: val.name, // 位置名address: val.address, // 地址详情说明scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大})}else{this.points = val this.show=true // 打开组件选择需要打开第三方}},}

如果不是在微信浏览器中打开（也就是楼主的toMap中的else）可参考这篇文章VUE_vue跳转第三方导航软件导航

vue项目中，使用微信js-sdk打开微信内置导航，唤醒第三方导航，相关推荐

Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能
Vue项目中利用pdf.js实现pdf内容滑选文字展示与搜索功能需求:在pdf中鼠标滑动选中一段文字,将选中文字展示到input框中(pdf在iframe中) 完成效果: 关于pdf的引用:我是直接 ...
vue 项目中使用three.js实现vr360度全景图片预览
vue 项目中使用three.js实现vr360度全景图片预览当前demo使用的three.js为0.115.0版本项目中安装three npm install three 安装完成再组件如下导入 ...
VUE 项目中引入外部js文件（CND引入）
以VUE项目中引入echarts文件为例: 第一步在VUE项目中找到index.html文件引入 :<script src="https://cdnjs.cloudflare.com ...
vue项目中使用flv.js实时播放断流重连关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长后来项目更新采用的是EasyPlayer插件文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
jsencrypt vue使用_在Vue项目中使用jsencrypt.js对数据进行加密传输
项目需求中需要对用户登录时的密码进行加密,在网上查询些许文章后,最终与后端协商使用jsencrypt.js. 使用yarn安装至Vue项目 yarn add jsencrypt --dev 或者使用n ...
vue项目中使用ckplayer.js封装视频播放组件
1.在index.html中引入ckplayer.js <script src="ckplayer/ckplayer.js" charset="utf-8" ...
一、在vue项目中使用mock.js（详解）
步骤1.搭建测试项目步骤1.1创建项目命令: vue create mock-demo 步骤1.2安装依赖命令: #使用axios发送ajax cnpm install axios--save ...
vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs ...
[转]vue项目中，main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
关于在vue项目中引入pdf.js的跨域问题（已解决）。
最近公司项目要做一个电子合同盖章的功能,博主想的是用pdf来实现,主要想谈一谈引入pdf.js跨域问题. 之前小编在遇到这个问题的时候也是百度了好多关于解决这方面问题的文章,但最终都没有实际解决.举两 ...