一.当前问题

1.小程序无法操作dom

因为微信小程序无法获取dom，有一些业务的api必须要操作dom，所以只有在小程序中引入H5页面，我之前写过一篇文章是关于保持ui一致的技术选取的文章。

2.小程序无法与H5传值

那么问题又来了，H5与小程序又如何实现数据实时传输呢，其实方法也有很多。

解决方法

1.小程序无法与H5传值

下面是关于小程序的web-view标签和使用方法，在h5中还要引入jssdk，本人使用的vue框架，所以直接npm安装了一个。bindmessage是可以接受数据的，但是只有当小程序后退，组件销毁，分享的时候才会触发接受消息，这就无语，不能达到一直传输的效果。（之前看见过一个博主的解决方法，写一个页面，功能就只是跳转页面，达到接受数据的效果，但并不能解决我的业务需求）


我的业务需求是通过小程序获取的地理坐标，实时传送给H5页面，然后再H5页面中拿到坐标再通过openlayers渲染出来。

2.微信小程序实时获取坐标

一进入微信小程序时，会有弹窗提醒用户开启获取地理位置的弹窗

const _locationChangeFn = (res) => {
      this.coorstr = [res.longitude,res.latitude].toString()
    }
    // 微信开启小程序获取地理坐标
    wx.startLocationUpdate({
      success: (res) => {
        wx.onLocationChange(_locationChangeFn)
        console.log('startLocationUpdate-res', res)
      },
      fail: (err) => {
        console.log('startLocationUpdate-err', err)
      }
    })

关于wx.onLocationChange(_locationChangeFn)是持续获取地理位置信息，但是在PC端微信小程序开发者工具中可能只会看见调用一次（输出结果只有一条），之前我还添加定时器让他一直调用，其实没有必要在移动端他会一直输出的。（这里也是一个坑）

3.微信小程序使用websocket

和直接在web里面不同，得使用微信自己的接口，保持与websocket的实时链接，这样就可以了。

wx.connectSocket({
      url:'ws://59.110.136.223'//这里是自己的url
    })
    wx.onSocketOpen (()=>{
      console.log('连接服务器成功了')
      setInterval(()=>{
        wx.sendSocketMessage({
          data: this.coorstr,
        })
        console.log(this.coorstr)
      },3000)
    })