前言
uniapp开发小程序内嵌H5的场景中,有需求如下:
在已知某个地点经纬度的情况下,可以在H5打开地图查看该地点的位置,以及能够唤起手机上的地图APP进行导航等操作。
此时uni.openLocation在唤起导航的时候,是打开在线的导航链接,且会由于小程序的限制无法正常打开。那么可以考虑通过微信JS-SDK中的能力来实现。文章来源:https://www.toymoban.com/news/detail-594727.html
示例
安装jweixin-module
npm install jweixin-module --save
main.js引入
let jweixin = require('jweixin-module')
Vue.prototype.$wx = jweixin
使用示例
示例仅供参考,具体实现可根据自己的项目进行调整与优化。
config接口、ready接口请自行查阅。文章来源地址https://www.toymoban.com/news/detail-594727.html
<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>
到了这里,关于uniapp web-view 小程序内嵌H5 打开地图 唤起APP的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!