小程序和H5的交互

小程序和H5的交互
最近做一个小程序，是H5页面写的，但是需要用到小程序的定位，获取手机号信息等等API，所以一起说一下怎么在H5页面里面去用，首先配置域名这些就不多说了，自己做了解，直接上代码，以跳转微信地图定位为例子，首先看H5部分的
我这是vue的项目，所以引用微信的sdk是这样的，如果是jQuery的，可以直接script标签引入

import wx from 'weixin-js-sdk'

然后是点击跳转到地图页面的事件

toMapView(){
	wx.miniProgram.navigateTo({
        url: '/pages/map/position?lat='+_this.latitude+'&lon='+_this.longitude,
        success: function() {
          console.log('success')
        })
	})
}

这里的意思是点击之后，跳到一个小程序自己的页面，URL就是小程序里的路由，后面跟着的参数是我H5这里获取到的经纬度，这里H5部分就完了，看小程序部分，首先在app.json里面把上面用到的路由页面配置好

{
  "pages": [
    "pages/map/position",
  ]
 }

然后我们在pages里面建一个map的文件夹，这是我的项目路径

wxml文件里面直接写一个标签就可以了，也可以什么都不写

看js怎么接收H5传过来的参数

Page({

  /**
   * 页面的初始数据
   */
  data: {
    lon:'',
    lat:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      lon: parseFloat(options.lon),
      lat: parseFloat(options.lat),
      success(){},
      fail(){
        wx.navigateBack({
          delta: 1
        })
      },
      complete(){}
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var _this=this
    wx.openLocation({
      latitude: this.data.lat,
      longitude: this.data.lon,
      scale:18
    })
  },
  }）

data里面西先定义变量，onLoad函数里面获取到路由传过来的变量，然后就setData重新给变量赋值，ready函数里面是传经纬度生成地图，这是微信的API，直接官网查就知道了

最后重点说一下返回问题，做到这里，小程序页面上方会有一个返回按钮，直接返回，是一个空白的页面，再返回，才会返回到刚才的H5页面，这个解决办法

onHide: function () {
    wx.navigateBack({
      delta: 1
    })
},

如果需要在数据获取之后，自动携带数据返回，又不跳转页面，比如H5页面用小程序获取手机号，写法是这样的（当然，现在的敏感信息需要用户自己点击触发才能获取，所以中间还是有页面，这只是举例事件完成自动跳回）

getPhoneNumber(e) {
    let pages = getCurrentPages()//当前页面
    let prePage = pages[pages.length - 2]//上一页
    
    //需要回跳的路由和携带的参数，这里自己根据需求写自己的路由
    let jumpUrl = app.globalData.baseUrl + '/#/wx/' + this.data.jumpRoute + '?encryptedData=' + encodeURIComponent(e.detail.encryptedData) + '&iv=' + encodeURIComponent(e.detail.iv)
    //跳转事件
    prePage.setData({
      orginSrc: jumpUrl
    })
  },