资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/微信公众号页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到的一些问题记录

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

Joyven / 2437人阅读

摘要：安装并引入依赖包这里是说明文档下载依赖包在需要用到的模块引入检查是否引入成功可以在引入的模块中执行控制台显示以上代码表示引入成功配置微信所有需要使用的页面必须先注入配置信息，否则将无法调用开启调试模式调用的所有的返回值会

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 
首先，注册开发者账号，成为高德开放平台开发者


登陆之后，在进入「应用管理」 页面「创建新应用」


为应用添加 Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」
3.2 在项目index.html中引入高德脚本标签
3.3创建一个高德地图的实例

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

给容器加一个样式

.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一直爆这个错误，求教如何解决？
私有云 海外云主机 关于微信公众号的问题 云服务器和微信公众号无交互 分享java视频的微信公众号 微信公众号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103795.html

相关文章

  • Vue微信公众号兼容微信JS-SDK，使用分享等功能

    摘要：你要是问我为什么会出现这种情况，等我什么时候进微信团队了，我再给大家解答。。。 很久没有写文章了，最近项目是基于微信公众号的Vue项目，有一个非常重要的分享功能，不搞不知道一搞不得了，发现vue-router和微信SDK配置有很大的兼容性问题，翻遍文档，社区，博客，都没有找到可以适合解决我这个问题的方法，最后是我们一起一个一个方法、一个一个api尝试才找到解决办法，现在和大家分享一下我...

    2json 评论0 收藏0

  • vue项目接入微信JSSDK的坑

    摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。 支付的坑 1、当前URL未注册 ...

    lieeps 评论0 收藏0

  • vue项目接入微信JSSDK的坑

    摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。 支付的坑 1、当前URL未注册 ...

    jsdt 评论0 收藏0

  • vue项目接入微信JSSDK的坑

    摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。 支付的坑 1、当前URL未注册 ...

    nodejh 评论0 收藏0

  • vue使用微信JS-SDK实现分享功能

    摘要：最近开发微信公众号内嵌页面，使用搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信。 最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、...

    ShowerSun 评论0 收藏0

发表评论

登陆后可评论

0条评论

Joyven

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<