uniapp实现微信小程序内嵌h5页面的相互跳转

MarchS

已于 2024-09-06 11:49:59 修改

阅读量4.2k

点赞数 2

文章标签：微信小程序

于 2023-03-14 12:35:16 首次发布

本文链接：https://blog.youkuaiyun.com/MarchS/article/details/129522437

版权

文章讲述了如何在微信小程序中通过uni.navigateTo方法从pageA跳转到内嵌H5页面pageB，然后在H5页面使用uni.webView.navigateTo返回到小程序页面pageA的过程。主要涉及页面间的跳转、URL拼接以及web-view组件的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前期准备3个页面，小程序内2个，h5一个。

小程序内：操作页pageA,展示容纳h5的展示页PageWebview.vue。

h5：h5页面pageB,并且有可以访问的线上url。

1、【微信小程序pageA->内嵌h5页面pageB】

pageA实现点击跳转，将pageB的访问地址url的拼接，并进入展示页PageWebview.vue


//pageA  
uni.navigateTo({
    url:
      "/pages/PageWebview?src=" +
      encodeURIComponent(url),//url是h5的展示地址pageB
  });

PageWebview.vue页面用webview标签展示h5页面


 //PageWebview.vue
<template>
  <web-view v-if='src' :src='src' @message='message'></web-view>
</template>

<script>

export default {
  data() {
    return {
      src: "",
    };
  },
  onLoad(options) {
    // uni.setNavigationBarTitle({
    //     title: '自定义标题'
    // });
    //this.src = encodeURI(`${options.src}?uid=${this.uid}`);
    options.src = decodeURIComponent(options.src);
    setTimeout(() => {
      this.src = `${options.src}`;
    }, 500);
  },
  methods: {
    message(e) {
            console.log(message,'webView----message')
        },
  },
};
</script>

<style lang="scss" scoped>
</style>

2、【内嵌h5页面pageB->到微信小程序页面pageA】

用uni.webView.navigateTo跳转到小程序页面


//pageB内
uni.webView.navigateTo({
    url: 'xx/xx'//小程序内页面地址pageA
})