微信公众号页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到的一些问题记录

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

这里是JS-SDK说明文档

1.1 npm 下载依赖包

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; // 位置精度
            
          }
        });
      })

坑1: config:invalid signature 配置报错;

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

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

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

坑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接口,设置定时无效(这个问题可能很傻)

所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作
因此我们需要将定时 写在wx.ready 方法里面,而不需要每次调用微信API的时候 wx.config一次.

wx.config({
    //配置
})
wx.ready({
//放到这里 是可以滴
setInterval(timer,5000)
})

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一直爆这个错误，求教如何解决？