前期準(zhǔn)備3個(gè)頁(yè)面，小程序內(nèi)2個(gè)，h5一個(gè)。
小程序內(nèi)：操作頁(yè)pageA,展示容納h5的展示頁(yè)P(yáng)ageWebview.vue。
h5：h5頁(yè)面pageB,并且有可以訪問(wèn)的線上url。
【微信小程序pageA->內(nèi)嵌h5頁(yè)面pageB】
1.1 pageA實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)，將pageB的訪問(wèn)地址url拼接，并進(jìn)入展示頁(yè)P(yáng)ageWebview.vue
//pageA
uni.navigateTo({
url:
? ? ? "/pages/PageWebview?src=" +
? ? ? encodeURIComponent(url),//url是h5的展示地址pageB
? });1.2 PageWebview.vue頁(yè)面用webview標(biāo)簽展示h5頁(yè)面
//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: '自定義標(biāo)題'
// });
//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>
【內(nèi)嵌h5頁(yè)面pageB->到微信小程序頁(yè)面pageA】文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-520159.html
用uni.webView.navigateTo跳轉(zhuǎn)到小程序頁(yè)面文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-520159.html
//pageB內(nèi)
uni.webView.navigateTo({
? ? url: 'xx/xx'//小程序內(nèi)頁(yè)面地址pageA
})到了這里，關(guān)于uniapp實(shí)現(xiàn)微信小程序內(nèi)嵌h5頁(yè)面的相互跳轉(zhuǎn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
