MENU

h5与uniapp之间通过webview通信

July 30, 2022 • vue

引入

<!-- 引入 uniapp webview sdk 在body后 -->
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

网页向 APP 传值

function postMsg() {
    uni.getEnv(function (res) {
      console.log('shebei' + JSON.stringify(res))
    })
    // 向 APP 发送消息 (注意看这里 01)
    uni.postMessage({
      data: {
        name: 'head',
        age: 19,
        appfv:true
      }
    })

APP 接受传值

<template>
    <view class="content"><web-view src="http://" @message="handleMessage"></web-view></view>
</template>

<script setup>


function handleMessage(evt) {
    const [data] = evt.detail.data
}


</script>

APP 向网页传值

就是链接里加了个参数

url += `?appdata=${encodeURIComponent(JSON.stringify(data))}`

网页接受 APP 传值

function getQuery(name) {
  // 正则:[找寻'&' + 'url 参数名字' = '值' + '&']('&'可以不存在)
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let r = window.location.search.substr(1).match(reg)
  if (r != null) {
    // 对参数值进行解码
    return JSON.parse(decodeURIComponent(r[2]))
  }
  return null
}