前期准备3个页面，小程序内2个，h5一个。
小程序内：操作页pageA,展示容纳h5的展示页PageWebview.vue。
h5：h5页面pageB,并且有可以访问的线上url。
【微信小程序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>
【内嵌h5页面pageB->到微信小程序页面pageA】文章来源：https://www.toymoban.com/news/detail-520159.html
用uni.webView.navigateTo跳转到小程序页面文章来源地址https://www.toymoban.com/news/detail-520159.html
//pageB内
uni.webView.navigateTo({
url: 'xx/xx'//小程序内页面地址pageA
})到了这里，关于uniapp实现微信小程序内嵌h5页面的相互跳转的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
