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>
相关推荐
狗凯之家源码网10 小时前
UniApp 数藏系统源码部署与定制开发全指南
uni-app
RuoyiOffice1 天前
2026 企业定制开发选型:从零开发、低代码、SaaS 与 RuoYi Office 怎么选?
spring boot·uni-app·开源·saas·oa·定制化·ruoyioffice
三天不学习2 天前
【超详细】Vue3+UniApp+.NET8集成腾讯云IM即时通信全攻略
uni-app·.net·腾讯云·im·即时通信
于先生吖2 天前
前后端分离人事招聘项目,校招宣讲预约+社招双向撮合功能架构设计教程
java·开发语言·uni-app
QQ_5110082852 天前
uniapp微信小程序网上饰品商城售卖系统php python物流
微信小程序·uni-app·php
2501_915909062 天前
深入解析Mock.js:功能、应用及实战案例,提升前端开发效率
android·ios·小程序·https·uni-app·iphone·webview
于先生吖2 天前
前后端分离体育服务项目,场馆计费+线下赛事排行小程序部署开发教程
java·小程序·uni-app
蜡台2 天前
Uniapp 实现预览pdf 文件
pdf·uni-app·pdfh5
不想吃饭e2 天前
uniapp-图片,视频上传组件封装
java·uni-app·音视频
2501_916007473 天前
不用 Mac 也可以 Windows下管理iOS描述文件的非Xcode完整指南
android·ios·小程序·https·uni-app·iphone·webview