欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

微信小程序嵌套webview页面实现导航,可跳转至高德百度等小程序

最编程 2024-05-06 15:59:24
...

需求:
微信小程序中使用webview嵌套了h5页面,h5页面中有经纬度,需要实现唤醒 高德app。
实现思路:
此处h5未配置wxSDK,无法直接使用 openLocation ,所以将经纬度传给小程序,map页面为跳转中间页,再实现打开地图页面。

h5:

// 高德地图导航
const aMapNavigate = (address, lng, lat) => {
  wxService.wx.miniProgram.navigateTo({
    url: `/pages/map/index?address=${address}&lng=${lng}&lat=${lat}`
  })
}
// 如果使用的是腾讯地图,则直接使用如下方法,小程序中无需增加map页面
const aMapNavigate = (address, lng, lat) => {
  const coord = lat + ',' + lng;
  let addrStr = `coord:${coord};title:${address};addr:${address}&referer=myapp`
  setTimeout(() => {
    location.href = `//apis.map.qq.com/uri/v1/marker?marker=${addrStr}`;
  }, 100)
}

小程序中pages/map/index

index.tsx

import React, { useEffect } from 'react';
import Taro, { useDidShow } from '@tarojs/taro';
import { getPageOptions } from '@/utils/commonUtils';
import stateStorage from '@/storage/stateStorage';
import './index.module.less'

const Map: React.FC = () => {

  useEffect(() => {
    stateStorage.del('isJumpMap')

    onLoad()

  }, [])

  const onLoad = () => {
    const options = getPageOptions();
    const { address, lng, lat } = options;
    Taro.openLocation({
      latitude: Number(lat), //纬度number
      longitude: Number(lng), // 经度number
      name: address,
      address: address,
      scale: 18,
      success: () => {
        stateStorage.set('isJumpMap', true, 0.5)
      }
    })
  }

  useDidShow(() => {
    const isJumpMap = stateStorage.get('isJumpMap')
    if (isJumpMap) Taro.navigateBack({
      delta: 1
    })
  })


  return (
    <></>
  )
}

export default Map;

原文地址:https://www.cnblogs.com/ZerlinM/p/17314741.html