uniapp实现内嵌其他网页的功能

一、用到的知识点

  1. 页面跳转
  2. 页面间跳转,参数传递
  3. web-view使用

二、使用navigator 页面跳转。

复制代码
navigator 组件类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册。

所以这么写是不行的:

复制代码
<navigator url="wwww.baidu.com">到百度</navigator>

新注册个页面,跳转到该页面,使用webview

复制代码
<view>
         <navigator url="./circleMember?url=https://www.baidu.com" 
         hover-class="navigator-hover" >
         到百度</navigator>
</view>

新页面为:

复制代码
<template>
        <view>
                <web-view :webview-styles="webviewStyles" :src="url"></web-view>
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                webviewStyles: {
                                        progress: {
                                                color: '#FF3333'
                                        }
                                },
                                url:''
                        }
                },
                onLoad(options) {
                        console.log(options)
                        this.url=options.url
                }
        }
</script>

<style>

</style>
相关推荐
白远山8 小时前
上海24小时自助健身房系统软件开发实战指南:从需求到部署
java·架构·uni-app·需求分析
海鸥两三13 小时前
小程序文档预览 · 进阶面试题
小程序·uni-app·uniapp
海鸥两三14 小时前
微信小程序 PDF 预览实践(uni.downloadFile → uni.openDocument)
小程序·uni-app
PedroQue991 天前
uni-app x 事件通信插件重磅上线
前端·uni-app
gnip2 天前
uni-app 原生插件
前端·javascript·uni-app
白远山2 天前
自助健身小程序源码:架构拆解、核心链路与本地部署实战
java·架构·uni-app·需求分析
2501_915909063 天前
怎么用 FlutterFlow 把应用发布到 App Store?
android·ios·小程序·https·uni-app·iphone·webview
2501_915918413 天前
怎么把 Python 写的 Flet 应用打包成 iOS App 并上架 App Store?
android·ios·小程序·https·uni-app·iphone·webview
Geek_Vison3 天前
小程序容器如何抹平系统差异,让一个小程序运行在 iOS、安卓、鸿蒙和电脑端
小程序·uni-app·harmonyos·mpaas
PedroQue993 天前
0.5.0重磅发布:动画插件+H5体验全面优化
前端·uni-app