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>
相关推荐
2501_916007476 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone
Можно7 小时前
uni.request 和 axios 的区别?前端请求库全面对比
前端·uni-app
woshinon16 小时前
【Uniapp(HBuilderX)针对微信小程序和H5平台实现差异化配置(自定义发行)】
微信小程序·小程序·uni-app
蜡台17 小时前
Uniapp H5Builderx 预览Html 显示404问题解决
前端·uni-app
Можно18 小时前
pages.json 和 manifest.json 有什么作用?uni-app 核心配置文件详解
前端·小程序·uni-app
2501_9151063219 小时前
iOS 多技术栈混淆实现,跨平台 App 混淆拆解与组合
android·ios·小程序·https·uni-app·iphone·webview
爱看老照片19 小时前
uniapp传递数值(数字)时需要使用v-bind的形式(加上冒号)
javascript·vue.js·uni-app
huycheaven19 小时前
uniapp-x生成App条形码和二维码
uni-app·二维码·条形码
00后程序员张19 小时前
有些卡顿不是 CPU 的问题,还要排查磁盘 I/O
android·ios·小程序·https·uni-app·iphone·webview
Aftery的博客19 小时前
HBulider项目打包上传到App Store需要的证书和私钥文件
uni-app·cocoapods