Uniapp嵌入H5跳转APP指定页面攻略

2023-08-02 19:55:51

在 Uniapp 中巧妙嵌入 H5 页面、实现单点登录和跳转至指定页面

在 Uniapp 中轻松嵌入 H5 页面

在 Uniapp 中嵌入 H5 页面是一项轻而易举的任务，让你能无缝地将外部网页内容引入你的应用中。使用 <web-view> 组件，你只需指定 H5 页面的 URL，即可轻松实现。这个组件就像一个容器，可以容纳任何网页内容。

代码示例：

<template>
  <web-view :src="url"></web-view>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://uniapp.dcloud.io'
    }
  }
}
</script>

实现单点登录

借助 <uni-id> 组件，实现单点登录变得轻松快捷。该组件提供了一个一站式解决方案，可以简化用户登录流程。

代码示例：

<template>
  <uni-id @login="onLogin"></uni-id>
</template>

<script>
export default {
  methods: {
    onLogin(res) {
      // 登录成功后的处理逻辑
    }
  }
}
</script>

从 H5 页面跳转至 APP 指定页面

使用 <uni-app-router> 组件，你可以在 H5 页面中轻松跳转至 APP 的特定页面。这个组件为你提供了便捷的途径，让你可以无缝地将用户带入你的应用中。

代码示例：

<template>
  <uni-app-router @click="onRouter"></uni-app-router>
</template>

<script>
export default {
  methods: {
    onRouter() {
      uni.navigateTo({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

代码示例：在 H5 页面中使用 <uni-app-router> 组件

<template>
  <button @click="openAppPage">打开 APP 页面</button>
</template>

<script>
import { uniAppRouter } from '@dcloudio/uni-app-router'

export default {
  methods: {
    openAppPage() {
      uniAppRouter.push('/pages/index/index')
    }
  }
}
</script>