H5中使用微信小程序位置API-Toy模板网

这篇具有很好参考价值的文章主要介绍了H5中使用微信小程序位置API。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.导入微信jssdk

（1）vue导入

npm install weixin-js-sdk --save

（2）链式导入

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript" ></script>

2.判断当前页面是否为微信打开的网页

 function is_weixn() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        weixinMap();
      } else {
       
      }
    }

3.向后台发送请求获取签名信息

html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。文章来源地址https://www.toymoban.com/news/detail-551603.html

  function  weixinMap() {
      //如果链接中有#hash部分则使用下面代码
     // var hrefUrl = encodeURIComponent(location.href.split('#')[0]);
      var hrefUrl = encodeURIComponent(location.href);
       $.ajax({
        type: 'POST',
        url: 接口地址 + hrefUrl,
        success: function (res) {
          var wxConfig = res.data;
          wx.config({
            debug: false,
            appId: '',
            timestamp: wxConfig.timestamp,
            nonceStr: wxConfig.nonceStr,
            signature: wxConfig.signature,
            jsApiList: ['getLocation', 'openLocation']
          });
           wx.ready(function (res) {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.openLocation({
          latitude: 31.851159,
          longitude: 117.260537,
          success: (res) => {
            console.log("success");
          },
        });
        wx.getLocation({
          type: 'wgs84',
          success: function (res) {
            console.log("wxGetLocation", res);
          },
          fail: function (err) {
            console.log("fail", err);
          },
          cancel: function (canRes) {
            console.log('用户拒绝授权获取地理位置');
          }
         });
		}
      })
    }