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>
  1. 【内嵌h5页面pageB->到微信小程序页面pageA】

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

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

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值