H5接入浙里办导航功能适配三端实现方式

浙里办接入的H5应用，导航功能是实际场景当中经常会用到的，具体是通过唤起本机地图app去实现，比如高德地图，笔者现将适配浙里办三端容器环境的实现方式分享如下，如有错误，欢迎讨论交流学习！

【浙里办app】

浙里办app导航可使用ZWJSBridge.openLink去实现，具体实现伪代码如下：

const openUrl = `zwfw://openThirdMaplongitude=${dataObj.longitude}&latitude=${dataObj.latitude}&locationName=${dataObj.regAddr}`;
ZWJSBridge.openLink({
  url: openUrl,
}).then((result) => {
  console.log(result);
}).catch((error) => {
  console.log(error);
});
           

【浙里办支付宝小程序】

支付宝容器环境下想实现导航功能，需要支付宝H5 JSSDK的支持，可引入alipayjsapi.js,引入方式如下：

<!--Alipay JSAPI接入-->
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>

/* 引入后需要初始化一下*/
<script type="text/javascript">
  function ready(callback) {
    // 如果jsbridge已经注入则直接调用
    if (window.AlipayJSBridge) {
      callback && callback();
    } else {
      // 如果没有注入则监听注入的事件
      document.addEventListener('AlipayJSBridgeReady', callback, false);
    }
  }
  ready(function () {
    console.log('AlipayBridge ready, 请在支付宝打开');
  });
</script>
           

具体功能实现伪代码如下：

/*ap对象是alipayjsapi.js里挂载到window上的，也可解构出来*/
const { ZWJSBridge, ap } = window;
const openLocation = () => {
    window.ap.openLocation({
      longitude: dataObj.longitude,
      latitude: dataObj.latitude,
      name: dataObj.entName,
      address: dataObj.regAddr,
    });
  };
           

【浙里办微信小程序】

微信容器环境下实现导航需要使用微信 JSSDK，可引入jweixin.js,引入方式可有两种，cdn或者 AMD/CMD 标准模块加载，建议采用第二种方式。

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
或者
npm install weixin-js-sdk
import wx from 'weixin-js-sdk';
const wx = require('weixin-js-sdk')
           

具体功能实现伪代码如下：

/* excuteWxBridge方法在功能页面加载的时候就执行*/
const excuteWxBridge = () => {
    wx.config({
      debug: false,
      appId: '项目appId',
      timestamp: new Date().getTime(),
      nonceStr: uuid().toString().replace(/-/g, ''),
      signature: '项目的appKey代替签名参数',
      jsApiList: ['openLocation'],
    });
  };
  const wxOpenLocation = () => {
    wx.ready(function() {
      wx.openLocation({
        longitude: parseFloat(dataObj.longitude),
        latitude: parseFloat(dataObj.latitude),
        name: dataObj.entName,
        address: dataObj.regAddr,
      });
    });
  };
           

【导航入口适配以上三端】

可判断容器环境执行不同的导航事件即可，具体功能实现伪代码如下：

const bIsWeixinMini = window.navigator.userAgent.toLowerCase().includes('miniprogram/wx') || window.__wxjs_environment === 'miniprogram'

const navigationEvent = () => {
    const sUserAgent = window.navigator.userAgent.toLowerCase();
    const bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1; 
    if (bIsDtDreamApp) {
      if(dataObj.longitude && dataObj.latitude){
        const openUrl = `zwfw://openThirdMap?longitude=${dataObj.longitude}&latitude=${dataObj.latitude}&locationName=${dataObj.regAddr}`;
        ZWJSBridge.openLink({ // 浙里办APP
          url: openUrl,
        }).then((result) => {
          console.log(result);
        }).catch((error) => {
          console.log(error);
        });
      }else{
        Toast.show({
          content: '获取当前位置失败,请重试',
        });
      }
    } else if(bIsWeixinMini){
      wxOpenLocation();  // 浙里办微信小程序
    } else{
      openLocation(); // 浙里办支付宝小程序
    }
  };

           

【真机测试】

浙里办导航真机测试

以上真实有效！！！