uniapp实现微信小程序内嵌h5页面的相互跳转 |
您所在的位置：网站首页 › h5内嵌网页 › uniapp实现微信小程序内嵌h5页面的相互跳转 |
|
前期准备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 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') }, }, };【内嵌h5页面pageB->到微信小程序页面pageA】 用uni.webView.navigateTo跳转到小程序页面 //pageB内 uni.webView.navigateTo({ url: 'xx/xx'//小程序内页面地址pageA }) |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |