美文网首页
H5(vue技术栈)与移动端(Android与ios)交互传值心

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

作者: liutianou | 来源:发表于2018-11-16 16:10 被阅读0次

    关于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拼接参数之前,把跳转的新页面拼接在参数前面就可以啦。

    相关文章

      网友评论

          本文标题:H5(vue技术栈)与移动端(Android与ios)交互传值心

          本文链接:https://www.haomeiwen.com/subject/xowefqtx.html