1.安装并引入JS-SDK依赖包
1.1 npm 下载依赖包
npm install weixin-js-sdk --save1.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.使用高德地图
3.1注册高德并申请Key
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视图
})运行项目后,你就会看到一个北京天安门的地图了.接下来你应该知道怎么做了 对吧?
参考
