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(); // 浙裡辦支付寶小程式
    }
  };

           

【真機測試】

浙裡辦導航真機測試

以上真實有效！！！