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>
相关推荐
星光一影15 小时前
原生社交app/工会/家族/语音房/直播社交/付费解锁聊天/广场好友圈子/一对一聊天交友
mysql·uni-app·php·html5·交友
anyup15 小时前
🔥牛逼!3分钟生成 5 套主题,还能一键切换暗黑模式!
前端·前端框架·uni-app
2501_9159184118 小时前
iOS 手机抓包软件怎么选?HTTPS 调试、TCP 数据流分析与多工具组合的完整实践
android·ios·智能手机·小程序·https·uni-app·iphone
游戏开发爱好者818 小时前
iOS 应用上架的工程实践复盘,从构建交付到审核通过的全流程拆解
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张18 小时前
iOS App 如何上架,从准备到发布的完整流程方法论
android·macos·ios·小程序·uni-app·cocoa·iphone
Json____18 小时前
uni-app-数码购物商城h5手机端-前端静态网页
前端·uni-app·商城
wx_xsooop18 小时前
iOS 上架4.3a 被拒【uniapp专讲】
flutter·ios·uni-app·uniapp
脾气有点小暴2 天前
uniapp滚动容器冲突
uni-app
鱼樱前端2 天前
uni-app开发app之前提须知(IOS/安卓)
前端·uni-app
二狗mao2 天前
Uniapp使用websocket进行ai回答的流式输出
websocket·网络协议·uni-app