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

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

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

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

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

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

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

1.2 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
})