H5(vue技术栈)与移动端(Android与ios)交互传值心

关于H5传值移动端的两种方法：

• 可以用window.location.href跳链接，但是不用真正的跳转，只需要把参数拼接在后面就可以，`移动端是可以通过URL来截取参数``的，当然，也可以添加一个协商好的字符串放头部，通过这个来截取后面的所有参数。

let arrData = {
            id:sceneId, //场景ID
            title:this.scene.sceneName,   //场景标题(值是通过调其他接口后台)
            htmlTag:'goto_shortvideo'  //这个字段由移动端所决定，有它们的用途，值是固定的字符串
          }

 window.location.href = '页面地址:' + JSON.stringify(arrData) //由XXX开头，后面是拼接给移动端的参数，记得转成json字符串

• 通过移动端抛出的方法来调用传值，当移动端给H5传值时，必定会传当前设备(ios传ios，安卓传android)，用户ID，当前版本号等等...具体还是以自己公司的技术为准哈。

let deviceType = this.$route.query.os  //当前设备(os是移动端所传过来的设备)

let arrData = {
            id:sceneId, //场景ID
            title:this.scene.sceneName,   //场景标题
            htmlTag:'goto_shortvideo'  //这个字段由移动端所决定，有它们的用途，值是固定的字符串
          }

         if (deviceType == 'android') {
            window.Android.getJsHtmlData(JSON.stringify(arrData))
          } else if (deviceType == 'ios') {
            window.webkit.messageHandlers.jsToOcNoPrams.postMessage(JSON.stringify(arrData));
          } else {
            alert('交互失败')
          }
//这里的两个window....方法是移动端抛出的调用函数，交互之前会告诉你，你只需要在括号里把要的参数传过去就可以。

关于移动端传值H5的方法
移动端传值给H5一般用url拼接上H5所需要的一些参数，还有一些必传参数，如上面所提到的设备，版本号等等。然后H5直接从URL上截取传过来的值就可以。

let deviceType = this.$route.query.os  //当前设备(os是移动端所传过来的设备)

如果说需要H5既要跳页，并且传值的话，只需要用window.location.href拼接参数之前，把跳转的新页面拼接在参数前面就可以啦。