h5页面调用小程序的定位功能_微信小程序与H5内嵌网页交互实现地图定位功能...

小程序中有很多好用的API，整个项目我们是用vue实现的，使用小程序的内嵌网页功能完成交互。

使用小程序的< web-view >标签将vue项目在小程序中运行。大概的背景就是这样。接下来介绍具体怎么完成微信小程序与vue内嵌页面实现地图定位功能。

1.首先在index.html中引入微信jssdk

2.在小程序中

3.在vue组件中，点击获取地图位置按钮，触发事件。

//携带参数进入小程序，使用小程序地图定位API

fixPosition() {

//保存当前地址，以便从小程序中返回时使用

let jumpUrl = window.location;

//传递多个参数时用&连接

let path = `/pages/address/address?address=${this.warehouse.local}&jumpUrl=${jumpUrl}`

//使用navigateTo跳转到小程序路径中

window.wx.miniProgram.navigateTo({

url: path

})

}

4.在小程序address.js中

4.1在data中定义传递过来的变量，Id和jumpUrl

4.2在onload中，将从vue中传递过来的值赋给Id和jumpUrl

4.3getCenterLocation中调用小程序Api wx.getLocation，wx.chooseLocation获取定位，并且将进行参数返回处理，详细介绍如下

4.4在onReady中调用一下getCenterLoc