uniapp分享位置到微信

最近有一个需求是从app分享位置到微信，打开微信可以实现导航的功能，查询资料发现没有办法可以直接发送位置到微信，但是微信网页开发可以实现在微信内部用网页打开腾讯内置地图，进而实现导航的功能，所以决定通过分享H5到微信来解决问题。
思路：uniapp分享链接到微信，链接中带有经纬度和位置名称，在微信中打开链接，通过参数打开微信内置地图。

1、写H5页面(微信网页开发)

微信sdk使用说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
需要手机微信调试的可以引入vconsole.js，可以显示控制台：https://unpkg.com/vconsole@latest/dist/vconsole.min.js

<script> // VConsole 默认会挂载到 `window.VConsole` 上 var vConsole = new window.VConsole();
</script>

（1）在微信公众平台绑定安全域名，引入微信sdk。

具体步骤不详说，可看文档操作。

（2）通过 config 接口注入权限验证配置。

由于用到的查看位置wx.openLocation需要用到鉴权。同一个地址的网页只需注入一次就行，如果地址有变化，则需要重新注入权限验证配置。

wx.config({debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature,// 必填，签名jsApiList: ['openLocation'] // 必填，需要使用的 JS 接口列表，这里只用到了openLocation
});

其中appId、timestamp、nonceStr、signature 都是通过传入当前网页的地址（window.location.href），调用后端接口的返回值。

（3）调用接口打开内置地图

由于我们是页面一加载就调用wx.openLocation接口，所以需要在wx.ready中调用。

wx.ready(function(){// config信息验证后会执行 ready 方法，所有接口调用都必须在 config 接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。openLocation();
});wx.error(function(res){// config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
});
// 打开地图方法
function openLocation() {var latitude =  getQueryString("latitude");var longitude = getQueryString("longitude");var name = getQueryString("name");wx.openLocation({latitude: latitude, // 纬度，浮点数，范围为90 ~ -90longitude: longitude, // 经度，浮点数，范围为180 ~ -180name: name, // 位置名address: '', // 地址详情说明scale: 14, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转});
}
// 截取地址参数
function getQueryString(name) {let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");let r = window.location.search.substr(1).match(reg);if (r != null) {return unescape(decodeURI(r[2]));return null;}
}

（4）查看功能大致完成，引入spin.js实现loading加载

接口返回慢的话，用户可能会看到比较长时间的白页，所以需要一个加载的loading。

@keyframes spinner-line-fade-more {0%, 100% { opacity: 0; /* minimum opacity */ }1% { opacity: 1; }
}@keyframes spinner-line-fade-quick {0%, 39%, 100% { opacity: 0.25; /* minimum opacity */ }40% { opacity: 1; }
}@keyframes spinner-line-fade-default {0%, 100% { opacity: 0.22; /* minimum opacity */ }1% { opacity: 1; }
}@keyframes spinner-line-shrink {0%, 25%, 100% {/* minimum scale and opacity */transform: scale(0.5);opacity: 0.25;}26% {transform: scale(1);opacity: 1;}
}

// 引入了spin.js
var opts = {           lines: 12, // 花瓣数目length: 8, // 花瓣长度width: 4, // 花瓣宽度radius: 8, // 花瓣距中心半径corners: 1, // 花瓣圆滑度 (0-1)rotate: 0, // 花瓣旋转角度direction: 1, // 花瓣旋转方向 1: 顺时针, -1: 逆时针color: '#666666', // 花瓣颜色speed: 1, // 花瓣旋转速度trail: 60, // 花瓣旋转时的拖影(百分比)shadow: false, // 花瓣是否显示阴影hwaccel: false, //spinner 是否启用硬件加速及高速旋转            className: 'spinner', // spinner css 样式名称zIndex: 2e9, // spinner的z轴 (默认是2000000000)top: '30%', // spinner 相对父容器Top定位 单位 pxleft: '50%', // spinner 相对父容器Left定位 单位 pxposition: 'fixed', // element positionprogress: true,      // show progress trackerprogressTop: 0,       // offset top for progress trackerprogressLeft: 0       // offset left for progress tracker
};
var target = document.getElementById('wrapper'); // loading的承载盒子，设置了宽100vw，高100传的div
var spinner = new Spin.Spinner(opts).spin(target); //创建loading，loading显示
// 关闭loading，在打开地图（openLocation）前调用
spinner.spin();

（5）待解决：地图返回后还是我们写的那个html空白页，用户需要再次返回才能回到微信，体验感不好。

2、uniapp分享

const weburl = baseUrl+'/wxLocation/index.html?latitude='+latitudes+"&longitude="+longitudes+"&name="+name
uni.share({provider: "weixin",scene: "WXSceneSession",type: 0,href: weburl, // 分享链接title: name, // 分享标题summary: "快去查看"+ name +"的位置吧！", //分享文字imageUrl: imageUrl,  //分享图标success: function (res) {console.log("success:" + JSON.stringify(res));},fail: function (err) {console.log("fail:" + JSON.stringify(err));}
});