微信小程序与H5内嵌网页交互实现地图定位功能

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

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

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

2.在小程序中

<web-view src="{{url}}"></web-view>

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

 //携带参数进入小程序，使用小程序地图定位APIfixPosition() {//保存当前地址，以便从小程序中返回时使用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中调用一下getCenterLocation

Page({data: {Id:``,jumpUrl:``},onLoad: function(options) {this.setData({Id:options.Id,jumpUrl: options.jumpUrl})},onReady: function(e) {// 使用 wx.createMapContext 获取 map 上下文this.mapCtx = wx.createMapContext('myMap');this.getCenterLocation()},getCenterLocation: function() {let that = this;wx.getLocation({type: 'wgs84', //返回可以用于wx.openLocation的经纬度success: function(res) {let latitude = res.latitudelet longitude = res.longitudewx.chooseLocation({latitude: latitude,longitude: longitude,scale: 28,success: function(res) {this.address = res.addressrePage.setData({//携带选择的地址res.address返回到vue内嵌界面中url: that.data.jumpUrl + `?address=${res.address}`})console.log(this.address)wx.navigateBack({delta: 1})}})}})},})

5.在vue组件中将小程序传过来的值付给定义为位置的这个参数local，注意，由于小程序与vue的生命周期的问题，赋值需要写在 beforeRouteUpdate中，关于vue路由钩子的介绍详细可参考vue路由钩子官方文档

 beforeRouteUpdate(to, from, next) {if(this.$route.query.address){this.warehouse.local=to.query.address;}next()},

结果展示如下：

以下这篇文章给了我很多帮助，可以参考微信小程序与内嵌网页交互实现支付功能

微信小程序与H5内嵌网页交互实现地图定位功能相关推荐

微信小程序，实现内嵌网页的分享
自从微信小程序支持内嵌网页之后,呼声高涨得不得了.的确,这个确实让我开发我们公司的小程序高效了很多,主要是可以引入现有的功能完整的普通网页. 需求是这样子的:小程序启动授权等操作成功后直接跳转到内嵌网 ...
微信小程序获取个人头像和昵称，和地图选点功能
微信小程序获取个人头像和昵称,有技巧 1.可以直接获取 2.通过用户点击获取过程中,有什么问题,可以加我微信号yizheng369探讨先分析这里面隐含了很多默认的规则,大家要注意: 1.可以直接 ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
微信小程序和H5网页之间有什么区别？
微信小程序和H5网页之间有什么区别本博主语录:小程序和H5网页的主要开发语言都是 JavaScript ,所以通常小程序的开发会被用来同普通的网页开发来做对比.两者有很大的相似性,对于前端开发者而言 ...
Shopro商城高级版 Fastadmin和Uniapp进行开发的多平台商城（微信公众号、微信小程序、H5网页、Android-App、IOS-App）
Shopro商城无加密的开源源码(可用于自营+外包项目(多主体).可用于外包定制开发项目) shopro 商城,一款基于 uni-app 的前端模板商城.目前适配了(小程序+app+h5+公众号). ...
Shopro商城,基于Fastadmin和Uniapp进行开发的多平台（微信公众号、微信小程序、H5网页、Android-App、IOS-App）购物商城
Shopro商城基于Fastadmin和Uniapp进行开发的多平台(微信公众号.微信小程序.H5网页.Android-App.IOS-App)购物商城,拥有强大的店铺装修.小程序直播.自定义模板. ...
微信小程序PHP文件建在哪里,微信小程序解析H5文件方法
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的: 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index. ...
app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里？主要有三点
随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...

微信小程序与H5内嵌网页交互实现地图定位功能

微信小程序与H5内嵌网页交互实现地图定位功能相关推荐

最新文章

热门文章