使用uniapp的超链接跳转在微信小程序中会出现复制链接在外面在跳转如图
这样的客户体验感不好 我们需要可以直接跳转查看
思路:webview
1.先在自己uniapp项目pages.json建一个内部页面webview.vue
在page.json里面指向我们跳转的这个内部路径(这个创建页面会自动生成):代码如下
{"path": "pages/webview/webview","style": {"navigationBarTitleText": "","enablePullDownRefresh": false
}
- 在pages/webview文件夹下建一个内部页面webview.vue
<template><web-view :src="url"></web-view>
</template><script>
export default {data() {return {url: ''}},onLoad(item) {// 传入需要跳转的链接 使用web-view标签进行跳转this.url = decodeURIComponent(item.url)// console.log(this.url)}
}
</script>
- 在需要操作的页面引用这个方法=>点击触发跳转
<template><view class="uni-form-right" @tap="getApp">平台跳转</view>
</template><script>// 点击功能模块-触发跳转getApp() {let url = 'https://www.baidu.com' // 以百度url为例子,具体填写你自己要跳转的链接 uni.navigateTo({url: '/pages/webview/webview?url=' + url// page.json定义的路径 传url到webview界面去接收-实现跳转})}
</script>
- 补充:uniapp跳转外部链接
<template><view class="uni-form-right" @tap="getApp">平台跳转</view>
</template><script>getApp() {window.location.href = 'https://www.baidu.com' }
</script>
这样在uniapp 的多端应用 例如小程序和app也可以直接跳转到链接页面了