微信民众号页面(VUE)中怎样设置微信JSSDK和高德舆图,以及碰到的一些问题纪录

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)

&＃8230;

控制台显现以上代码示意引入胜利.

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(&＃8216;#&＃8217;)[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中引入高德剧本标签

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一向爆这个毛病，讨教怎样处理？