微信小程序web-view嵌入h5页面调用微信jssdk接口
目录
微信小程序web-view嵌入h5页面调用微信jssdk接口
业务需求：我需要用小程序web-view嵌入h5地图页面，然后点击h5页面导航功能调起小程序内置地图
第一步: 现在你的h5项目导入或者链接式导入微信jssdk
vue导入:
npm install weixin-js-sdk --save链接式导入：
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
然后，在需要的页面配置使用：
此接口让后端封装好，直接去调用， 注意: 看官网的解释:
- 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括
'http(s)://'部分，以及’？‘后面的GET参数部分,但不包括’#‘hash后面的部分。 - 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
jsapi_ticket({
jsapiticket_url: location.href.split('#')[0]
}).then((res) => {
console.log(res);
this.wxJsSdk = res.signPackage;
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: this.wxJsSdk.appId, // 必填，公众号的唯一标识
timestamp: this.wxJsSdk.timestamp, // 必填，生成签名的时间戳
nonceStr: this.wxJsSdk.nonceStr, // 必填，生成签名的随机串
signature: this.wxJsSdk.signature, // 必填，签名
jsApiList: ["openLocation"], // 必填，需要使用的JS接口列表
});
})要把你当前的页面url传给后端，后端再用url去验证token,返回给你config配置参数
第二步 wx.config验证没问题后，(h5)直接调用，调起微信内置地图:
wx.ready(function (res) {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.openLocation({
latitude: 31.851159,
longitude: 117.260537,
success: (res) => {
console.log("success");
},
});