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视图
})运转项目后,你就会看到一个北京天安门的舆图了.接下来你应当晓得怎样做了 对吧?
参考
