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>
相关推荐
我爱写代码i2 小时前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW3 小时前
vite-plugin-uni-pages 更新了什么
前端·uni-app
2501_9159184111 小时前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
梦曦i11 小时前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
lhldsg1 天前
智慧场馆解决方案小程序开发实战:从架构设计到部署指南
java·小程序·uni-app
skiyee1 天前
🚀 用 17 行代码给 UniApp 加上全局登录拦截
前端·uni-app
Mark108591 天前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
梦曦i1 天前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
2501_916007472 天前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone
PedroQue992 天前
@meng-xi/create-uni-app v1.0.0 正式发布
前端·uni-app