序文
H5 がユニアプリ開発アプレットに埋め込まれているシナリオでは、要件は次のとおりです。
特定の場所の緯度と経度がわかっている場合、H5 で地図を開いてその場所の位置を表示し、携帯電話で地図 APP を呼び出してナビゲーションやその他の操作を実行できます。
このとき、uni.openLocation がナビゲーションを呼び出すとオンライン ナビゲーション リンクが開きますが、アプレットの制限により正常に開くことができません。その後、 WeChat JS-SDKの機能を通じてそれを実現することを検討できます。
例
jweixin モジュールをインストールする
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>