前期准备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
})

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐