首页 > 编程语言 >微信小程序嵌套的webview页面实现导航,可跳转高德百度等app

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

时间:2023-04-13 14:47:15浏览次数:47  
标签:const 微信 app 跳转 address lat import lng 页面

需求:
微信小程序中使用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')

    onl oad()

  }, [])

  const onl oad = () => {
    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;

标签:const,微信,app,跳转,address,lat,import,lng,页面
From: https://www.cnblogs.com/ZerlinM/p/17314741.html

相关文章

  • 浏览器页面跳转后network请求不见了
    场景本想看登录的接口,但是登录成功后,就自动跳转了,network的请求信息也刷新了。百度后才知道,还有个开关,可以保留历史请求记录......
  • 微信小程序云开发中的command简介
    微信小程序云开发(WeChatMiniProgramCloudDevelopment)是微信官方推出的一种简化小程序开发的方案。它提供了一个完整的后端云服务,支持数据库、存储、云函数等功能。在云开发中,Command是一个重要的概念,主要用于操作数据库。Command是数据库命令的构造器,它用于构造复杂的数据......
  • 微信小程序打开pdf文件,并支持保存分享等操作
    微信小程序直接下载文件时,保存到的路径为缓存路径tempxxx,如果需要查找文件就很麻烦,那我们可以先在小程序中预览文件,再执行后续操作,代码如下://方法constdownload=(type)=>{const{url='',name}=type;if(!url)return;console.log('uuuu',url,nam......
  • 猪场管理APP开发功能有哪些
    猪场管理APP开发功能包括以下方面:智能监控功能:实时监控猪场情况,包括猪的数量、健康状况、采食量等信息,以便管理人员及时了解猪场情况,制定合理的养殖计划。自动控制功能:根据猪场环境异常情况,自动打开通风扇、通风口、湿帘、供暖等设备,以便及时恢复猪场环境。环境检测功能:......
  • 微信小程序获取用户位置 getLocation
    首先在app.config.json中配置exportdefaultdefineAppConfig({pages:[],permission:{"scope.userLocation":{"desc":"你的位置信息将用于小程序位置接口的效果展示"}},})方法调用:constgetLocation=()=>{Taro.getLocation({......
  • 畜牧业APP开发要考虑哪些因素?
    畜牧业管理APP开发是一个复杂的过程,需要考虑多个方面的因素。以下是一些可能需要考虑的方面:用户需求:首先需要了解用户的需求,包括他们的目标、需求和期望。这将有助于确定应用程序的功能和界面设计。技术选择:选择适当的技术来开发畜牧业管理APP。例如,可以使用Java、Python、C......
  • 畜牧业管理APP开发功能
    畜牧业管理APP开发功能包括以下方面:禽畜监测:监测禽畜的生长状态、健康状况、采食量、体重等信息,以便管理人员及时了解禽畜的生长情况,制定合理的饲养计划。数据分析:对禽畜的生长数据、健康数据等进行分析,以便管理人员了解禽畜的生长情况,及时发现问题并采取措施。智能控制:......
  • Flutter/React native/un-app
    Flutter是Google开源的构建用户界面(UI)工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。[5] Flutter开源、免费,拥有宽松的开源协议,适合商业项目。Flutter可以方便的加入现有的工程中。在全世界,Flutter正在被越来越多的开发者和组织使......
  • 微信小程序 web-view在校验合法域名后视频不能播放
    异常 注:视频资源在小程序的服务器上  原因:web-view请求的外网资源需要在小程序的后台配置业务域名才能访问,并将验证文件放置在服务器根目录下在配置业务域名时遇到一个问题是,业务域名配置不能带端口,请求的服务器资源的域名带端口,校验文件没法放置到指定域名位置下,后又在......
  • uniapp 使用vconsole
    1、安装vconsolenpminstallvconsole2、引用vconsole,找到main.js文件中,加上以下代码(区分环境):if(process.env.H_NODE_ENV!=='production'){ constvconsole=require('vconsole') Vue.prototype.$vconsole=newvconsole()}3、效果: ......