前言
??uniapp開(kāi)發(fā)小程序內(nèi)嵌H5的場(chǎng)景中，有需求如下：
??在已知某個(gè)地點(diǎn)經(jīng)緯度的情況下，可以在H5打開(kāi)地圖查看該地點(diǎn)的位置，以及能夠喚起手機(jī)上的地圖APP進(jìn)行導(dǎo)航等操作。
??此時(shí)uni.openLocation在喚起導(dǎo)航的時(shí)候，是打開(kāi)在線的導(dǎo)航鏈接，且會(huì)由于小程序的限制無(wú)法正常打開(kāi)。那么可以考慮通過(guò)微信JS-SDK中的能力來(lái)實(shí)現(xiàn)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-594727.html
示例
安裝jweixin-module
npm install jweixin-module --save
main.js引入
let jweixin = require('jweixin-module')
Vue.prototype.$wx = jweixin
使用示例
示例僅供參考，具體實(shí)現(xiàn)可根據(jù)自己的項(xiàng)目進(jìn)行調(diào)整與優(yōu)化。
config接口、ready接口請(qǐng)自行查閱。文章來(lái)源地址http://www.zghlxwxcb.cn/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]
}
// 該接口調(diào)用僅為示例，具體應(yīng)以 后端 提供的接口為準(zhǔn)
configRequest.wxConfig(param).then(res => {
var data = res.data
that.$wx.config({
debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
signature: data.signature, // 必填，簽名
jsApiList: ['openLocation'] // 必填，需要使用的JS接口列表
})
that.$wx.ready(() => {
that.$wx.openLocation({
// 這里的各項(xiàng)參數(shù)可以根據(jù)自己的需求傳入
latitude: 0, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
longitude: 0, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
name: '', // 位置名
address: '', // 地址詳情說(shuō)明
scale: 1, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大
infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
})
})
})
},
},
}
</script>
到了這里，關(guān)于uniapp web-view 小程序內(nèi)嵌H5 打開(kāi)地圖 喚起APP的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
