| H5接入浙里办导航功能适配三端实现方式 | 您所在的位置：网站首页 › 打开浙里办app首页 › 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,引入方式如下： /* 引入后需要初始化一下*/ function ready(callback) { // 如果jsbridge已经注入则直接调用 if (window.AlipayJSBridge) { callback && callback(); } else { // 如果没有注入则监听注入的事件 document.addEventListener('AlipayJSBridgeReady', callback, false); } } ready(function () { console.log('AlipayBridge ready, 请在支付宝打开'); });具体功能实现伪代码如下： /*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, }); }; 【浙里办微信小程序】支付宝没什么说的,微信导航对接需要后端配合根据appId,密钥生成signature,需要后端写接口,拿到数据塞进wx.config另外,如果window.wx找不到可以用window.Jweixin去调微信的方法微信容器环境下实现导航需要使用微信 JSSDK，可引入jweixin.js,引入方式可有两种，cdn或者 AMD/CMD 标准模块加载，建议采用第二种方式。 或者 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(); // 浙里办支付宝小程序 } }; |
| CopyRight 2018-2019 实验室设备网 版权所有 |