乐趣区

微信公众号页面VUE中如何引入使用微信JSSDK和使用高德地图

jiezi

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

退出移动版