uniapp web-view 小程序内嵌H5 打开地图 唤起APP

前言

  uniapp开发小程序内嵌H5的场景中，有需求如下：
  在已知某个地点经纬度的情况下，可以在H5打开地图查看该地点的位置，以及能够唤起手机上的地图APP进行导航等操作。
  此时uni.openLocation在唤起导航的时候，是打开在线的导航链接，且会由于小程序的限制无法正常打开。那么可以考虑通过微信JS-SDK中的能力来实现。

示例

安装jweixin-module

npm install jweixin-module --save

main.js引入

let jweixin = require('jweixin-module')
Vue.prototype.$wx = jweixin

使用示例

示例仅供参考，具体实现可根据自己的项目进行调整与优化。
config接口、ready接口请自行查阅。

<script>
	import {
    
    configRequest} from "@/api/config.js" // 该api仅为示例
	export default {
    
    
		data() {
    
    
			return {
    
    }
		},
		onLoad() {
    
    
			this.$nextTick(()=> {
    
    
				this.openLocation()
			})
		},
		method: {
    
    
			openLocation() {
    
    
				var that = this
				var param = {
    
    
					url: location.href.split('#')[0]
				}
				// 该接口调用仅为示例，具体应以 后端 提供的接口为准
				configRequest.wxConfig(param).then(res => {
    
    
					var data = res.data
					that.$wx.config({
    
    
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: data.appId, // 必填，公众号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
					})
					that.$wx.ready(() => {
    
    
						that.$wx.openLocation({
    
    
							// 这里的各项参数可以根据自己的需求传入
							latitude: 0, // 纬度，浮点数，范围为90 ~ -90
							longitude: 0, // 经度，浮点数，范围为180 ~ -180。
							name: '', // 位置名
							address: '', // 地址详情说明
							scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大
							infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
						})
					})
				})
			},
		},
	}
</script>