1.安装并引入JS-SDK依赖包

这里是JS-SDK说明文档

1.1npm 下载依赖包

npm install weixin-js-sdk --save

1.2.在需要用到jssdk的模块引入

import wx from 'weixin-js-sdk';

1.3.检查是否引入成功,可以在引入的模块mounted中执行

console.log(wx)
{config: ƒ, ready: ƒ, error: ƒ, checkJsApi: ƒ, onMenuShareTimeline: ƒ, …}
addCard: ƒ (e)
checkJsApi: ƒ (e)
chooseCard: ƒ (e)
chooseImage: ƒ (e)
chooseWXPay: ƒ (e)
...
控制台显示以上代码表示引入成功.

2.配置微信JS-SDK

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
wx.config({    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。    appId: '', // 必填，公众号的唯一标识,管理公众号页面可以获取    timestamp: '', // 必填，生成签名的时间戳,后台返回    nonceStr: '', // 必填，生成签名的随机串,后台返回    signature: '',// 必填，签名,后台返回    jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表,写入自己用到的接口名称});

然后等待配置完成后,在ready中使用微信提供的API

wx.ready(function(){        wx.getLocation({          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'          success: function (res) {            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。            var speed = res.speed; // 速度，以米/每秒计            var accuracy = res.accuracy; // 位置精度                      }        });      })

2.1 config:invalid signature这个坑;

首先我们不能用chorme来调试这个config,没有任何反应
然后网上各种搜基本可以确实是URL的问题

微信规定 签名的URL要与当前页面URL一致！

解决方案看这个问题,将此页面的URL 动态送给后台,生成签名.

2.2 安卓和IOS 在获取URL的一个坑

安卓可以直接在网页中这么获取当前URL:

location.href.split('#')[0]

IOS就不行,你只能获取到你刚进入页面的URL;
解决的思路大概是
1.首先要判断是否是IOS系统
2.如果是IOS 我们缓存一个入口URL然后注册,如果不是IOS直接使用location.href.split('#')[0]URL进行注册

---config.js 全局定义一个变量global.entryUrl = location.href.split('#')[0];

伪代码如下:

 mounted(){      let url;      if (publicFun.isIOS()) {//判断是否是IOS        url = this.PUBLICCONFIG.entryUrl;      } else {        url = location.href.split('#')[0];      }            //传参给后台 获取 appId/timestamp/nonceStr/signature      api.getJsConfig({        "url":url      },{        success:function (res) {            //获取参数成功后配置            wx.config({              debug: true,               appId:  res.data.appId,               timestamp:res.data.timestamp ,               nonceStr:res.data.nonceStr,              signature: res.data.signature,              jsApiList: ['openLocation','getLocation']             });        }      })            //微信配置成功       wx.ready(function(){        console.log("配置成功")        wx.getLocation({          type: 'wgs84',           success: function (res) {            var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。            var speed = res.speed; // 速度，以米/每秒计            var accuracy = res.accuracy; // 位置精度            console.log(latitude);            this.latitude = latitude          }        });      })             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。      wx.error(function(res){             });         }

3.使用高德地图

高德地图API文档

3.1注册高德并申请Key

  1. 首先，注册开发者账号，成为高德开放平台开发者
  2. 登陆之后，在进入「应用管理」 页面「创建新应用」
  3. 为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

3.2 在项目index.html中引入高德脚本标签

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>

3.3创建一个高德地图的实例

创建一个容器,给一个ID名字

<div id="map" class="page-location-map"></div>

给容器加一个样式

.page-location-map{      width: 100%;      height: 100%;    }

在组将mounted方法中创建地图实例

let Map = new AMap.Map('map', {        zoom: 11,//级别        center: [116.397428, 39.90923],//中心点坐标        viewMode: '3D' //使用3D视图      })

运行项目后,你就会看到一个北京天安门的地图了.接下来你应该知道怎么做了 对吧?

参考

1.vue-router的history模式在IOS微信分享下url不变的坑以及解决办法
2.微信公众平台, config:invalid signature一直爆这个错误，求教如何解决？