uni-app微信小程序跳转外部H5链接

可以先看一下官网链接web-view

这里可以看到web-view组件默认铺满全屏，这里新建了一个页面，只用于存放web-view，用于展示外部链接。

1.新建页面showhfive作为web-view跳转页面的承载

2.跳转H5需要个触发的点击事件，通过点击跳转

<template> <view> <button class="submit-btn" @click="toExecute">执行</button> </view> </template> <script> export default { data() { return { url: '' }; }, methods: { toExecute(){ uni.navigateTo({ url: '/pages/showhfive/showhfive?url='+ this.url }) } } } </script>

3.showhfive.vue页面的内容

<template> <web-view :src="url" bindmessage="getMessage"></web-view> </template> <script> export default { data() { return { url: '' } }, onLoad(options) { this.url = options.url; } } </script> <style> </style>

实现完成后即可跳转。

 

现在这个只是添加了跳转，后续有其他问题，即时更新！