位置: IT常识 - 正文

如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面(uniapp 嵌套webview)

编辑:rootadmin
如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面 如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面场景Web-View在官网中提供的是APP嵌入原生的H5页面在APP中使用web-view嵌入H5页面使用web-view组件就可以实现,代码如下调用方法跳转至app 的页面的关键方法 uni.reLaunch以上代码可以解决APP嵌入原生H5页面跳转回APP的问题,但是使用uniapp开发H5就会失效,在uniapp开发H5页面使用 uni.reLaunch 只能跳转到H5项目本地的页面。解决方法如下1. 下载官网web-view的SDK2. 在H5项目的main.js 文件里导入这个文件3. 原生H5使用的跳转方法和uniapp开发的H5使用的跳转方法是不一样的场景

推荐整理分享如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面(uniapp 嵌套webview),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp嵌套页面,uniapp怎么用,uniapp引入element,uniapp 嵌套webview,uniapp嵌套页面,uniapp怎么引入elementui,uniapp嵌套页面,uniapp嵌入网页,内容如对您有帮助,希望把文章链接给更多的朋友!

有一个需求是,在app中嵌入一个H5页面,H5是一个网络页面,不在app项目里,APP可以打开H5页面,实现单点登录,并且在H5 页面中打开APP指定的页面

Web-View

在uniapp中,有一个web-view组件,这就相当于一个浏览器组件,可以用来承载网页的容器,会自动铺满整个页面 web-view的详细文档参考uniapp官网

https://uniapp.dcloud.net.cn/component/web-view.html#web-view在官网中提供的是APP嵌入原生的H5页面从官方demo的代码,原生H5页面使用的HTML在APP中使用web-view嵌入H5页面使用web-view组件就可以实现,代码如下<template><view><web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view></view></template>

src是H5的地址,可以是任何网址,与APP的地址什么的没有关系,也可以是www.baidu.com ,在这里为了方便测试,使用官方的 H5地址 官方原生h5 代码如下

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>网络网页</title> <style type="text/css"> .btn { display: block; margin: 20px auto; padding: 5px; background-color: #007aff; border: 0; color: #ffffff; height: 40px; width: 200px; } .btn-red { background-color: #dd524d; } .btn-yellow { background-color: #f0ad4e; } .desc { padding: 10px; color: #999999; } .post-message-section { visibility: hidden; } </style> </head> <body> <p class="desc">web-view 组件加载网络 html 示例。点击下列按钮,跳转至其它页面。</p> <div class="btn-list"> <button class="btn" type="button" data-action="navigateTo">navigateTo</button> <button class="btn" type="button" data-action="redirectTo">redirectTo</button> <button class="btn" type="button" data-action="navigateBack">navigateBack</button> <button class="btn" type="button" data-action="reLaunch">reLaunch</button> <button class="btn" type="button" data-action="switchTab">switchTab</button> </div> <div class="post-message-section"> <p class="desc">网页向应用发送消息,注意:小程序端应用会在此页面后退时接收到消息。</p> <div class="btn-list"> <button class="btn btn-red" type="button" id="postMessage">postMessage</button> </div> </div> <script type="text/javascript"> var userAgent = navigator.userAgent; if (userAgent.indexOf('AlipayClient') > -1) { // 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。 document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>'); } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) { // QQ 小程序 document.write( '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>' ); } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) { // 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。 document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>'); } else if (/toutiaomicroapp/i.test(userAgent)) { // 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。 document.write( '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>'); } else if (/swan/i.test(userAgent)) { // 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。 document.write( '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>' ); } else if (/quickapp/i.test(userAgent)) { // quickapp document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>'); } if (!/toutiaomicroapp/i.test(userAgent)) { document.querySelector('.post-message-section').style.visibility = 'visible'; } </script> <!-- uni 的 SDK --> <!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 --> <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script> <script type="text/javascript"> // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() { uni.postMessage({ data: { action: 'message' } }); uni.getEnv(function(res) { console.log('当前环境:' + JSON.stringify(res)); }); document.querySelector('.btn-list').addEventListener('click', function(evt) { var target = evt.target; if (target.tagName === 'BUTTON') { var action = target.getAttribute('data-action'); switch (action) { case 'switchTab': uni.switchTab({ url: '/pages/tabBar/API/API' }); break; case 'reLaunch': uni.reLaunch({ url: '/pages/tabBar/component/component' }); break; case 'navigateBack': uni.navigateBack({ delta: 1 }); break; default: uni[action]({ url: '/pages/component/button/button' }); break; } } }); document.getElementById('postMessage').addEventListener('click', function() { uni.postMessage({ data: { action: 'message' } }); }); }); </script> </body></html>如何Uniapp中嵌入H5,并且在H5中跳转到APP的指定页面(uniapp 嵌套webview)

在这里我们提取出关键的代码

<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 --> 导入web-view 的SDK <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>调用方法跳转至app 的页面的关键方法 uni.reLaunchuni.reLaunch({ url: '/pages/tabBar/component/component' });

这个方法是跳转到APP的指定页面,url就是APP页面的路径,在APP项目中目录结构如下

对于这几个跳转方法可以自己去学习

case 'switchTab': uni.switchTab({ url: '/pages/tabBar/API/API' }); break; case 'reLaunch': uni.reLaunch({ url: '/pages/tabBar/component/component' }); break; case 'navigateBack': uni.navigateBack({ delta: 1 }); break;以上代码可以解决APP嵌入原生H5页面跳转回APP的问题,但是使用uniapp开发H5就会失效,在uniapp开发H5页面使用 uni.reLaunch 只能跳转到H5项目本地的页面。解决方法如下1. 下载官网web-view的SDK

在官网的原生H5 demo 导入了这个关键的Js文件,通过浏览器打开 https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js 复制里面的JS代码 在H5项目里创建一个js文件 web-view.js,内容即是以上js代码

2. 在H5项目的main.js 文件里导入这个文件

3. 原生H5使用的跳转方法和uniapp开发的H5使用的跳转方法是不一样的uni.webView.reLaunch({url: '/pages/tabBar/component/component'});

区别在于 uniapp开发的H5要加上 webView

本文链接地址:https://www.jiuchutong.com/zhishi/280073.html 转载请保留说明!

上一篇:Linux中遇到device is busy的处理方法(linux device drivers)

下一篇:路由器的默认网关是多少详情(路由器的默认网关在哪里看)

  • 微信推广运营7种方法(微信推广运营发展前景)

    微信推广运营7种方法(微信推广运营发展前景)

  • iphone4s移动上网慢(iphone4s移动合约机)(iphone4移动卡怎么上网)

    iphone4s移动上网慢(iphone4s移动合约机)(iphone4移动卡怎么上网)

  • iphonexsmax支持双卡吗(iphonexsmax支持双移动卡吗?)

    iphonexsmax支持双卡吗(iphonexsmax支持双移动卡吗?)

  • 小红书怎么看自己的评论(小红书怎么看自己的浏览记录)

    小红书怎么看自己的评论(小红书怎么看自己的浏览记录)

  • 快手重置账号还能用吗(快手重置账号还能刷)

    快手重置账号还能用吗(快手重置账号还能刷)

  • 线型比例因子快捷键(线型比例因子快速计算)

    线型比例因子快捷键(线型比例因子快速计算)

  • 苹果手机来电图片怎么设置全屏(苹果手机来电图标)

    苹果手机来电图片怎么设置全屏(苹果手机来电图标)

  • 手机qq接收的文件找不到(手机qq接收的文件保存在哪里)

    手机qq接收的文件找不到(手机qq接收的文件保存在哪里)

  • 对称三相电源是指什么(对称三相电源是星形还是三角形)

    对称三相电源是指什么(对称三相电源是星形还是三角形)

  • 怎样下载青桔单车(怎样下载青桔单车app)

    怎样下载青桔单车(怎样下载青桔单车app)

  • heliop22相当于骁龙什么处理器(heliop22相当于麒麟)

    heliop22相当于骁龙什么处理器(heliop22相当于麒麟)

  • 抖音移除粉丝怎么恢复(抖音移除粉丝怎么撤销)

    抖音移除粉丝怎么恢复(抖音移除粉丝怎么撤销)

  • 华为mate30能用谷歌吗(华为mate30能用谷歌服务吗)

    华为mate30能用谷歌吗(华为mate30能用谷歌服务吗)

  • 华为左划新闻怎么关闭(华为左划新闻怎么设置)

    华为左划新闻怎么关闭(华为左划新闻怎么设置)

  • 如何查看平板使用痕迹(如何查看平板使用痕迹华为)

    如何查看平板使用痕迹(如何查看平板使用痕迹华为)

  • 小米mix2充电充不进去(小米mix2s充电问题)

    小米mix2充电充不进去(小米mix2s充电问题)

  • vivo手机如何开启反黑模式(vivo手机如何开门禁卡)

    vivo手机如何开启反黑模式(vivo手机如何开门禁卡)

  • 小米9屏幕是什么材料(小米9屏幕是什么的)

    小米9屏幕是什么材料(小米9屏幕是什么的)

  • one和ones手柄的区别(ones和onex的手柄有区别吗)

    one和ones手柄的区别(ones和onex的手柄有区别吗)

  • 华为p20和荣耀20的区别(华为p20和荣耀20i哪个更好)

    华为p20和荣耀20的区别(华为p20和荣耀20i哪个更好)

  • 电话手表怎么绑定两个手机(电话手表怎么绑定微信支付)

    电话手表怎么绑定两个手机(电话手表怎么绑定微信支付)

  • 电话技术支持已过期什么意思(电话技术支持已过期怎么解决)

    电话技术支持已过期什么意思(电话技术支持已过期怎么解决)

  • bbs项目前期准备和表设计(做项目前期)

    bbs项目前期准备和表设计(做项目前期)

  • 差额征税是什么时候出现的
  • 房产税的计算公式是多少
  • 发票上的收款人复核开票人
  • 行政单位利息收入可以扣除手续费
  • 个税返还款要交增值税吗
  • 通用发票
  • 异地预缴怎么做账
  • 车票抵扣进项税申报在哪一栏
  • 个税换电脑了还能查到之前的申报记录吗?
  • 企业购买电话充值卡的分录
  • 深圳增值税发票选择确认平台使用
  • 高新技术企业分类
  • 哪些纳税人需要实名办税
  • 抵押住房属于
  • 房屋租赁合同印花税计税依据
  • 全资子公司向母公司划转资产 土地增值税
  • 周转借款会计分录
  • 增值税发票增量流程网上怎么申请
  • 特许权使用费个税计算公式
  • 到底如何理解参数方程
  • 固定资产预计净残值最后怎么处理
  • 哪些工资薪酬可以进行税前扣除?
  • 跨月发票作废怎么红冲
  • SymSPort.exe - SymSPort是什么进程 有何作用
  • tracert命令的作用及用法
  • linux怎么测试端口
  • 免抵退税怎么做账
  • 将款项汇往外地采购专用账户会计分录
  • 仓储服务和不动产租赁
  • 商品流通企业会计分录
  • php获取数据
  • php file_get_contents smb
  • 结构重参数化2d pose
  • 计算md5值命令
  • linux用mv文件移动指定文件
  • 取得进项税发票什么时期内可以抵扣
  • spring boot怎么学
  • 出口抵减内销产品应纳税额怎么结转
  • cmsv6无法连接服务器
  • 金碟怎么初始化
  • 生产企业成本会计做账流程
  • 研发费用没有发票怎么做账
  • centos离线安装mondo
  • 餐饮行业经营模式有哪些
  • 乡村道路属于城市道路吗
  • 专票已认证还能作废吗
  • 银行承兑到期之前怎么办
  • 免征的增值税如何处理
  • 内部债权债务的抵消分录
  • 怎样在excel计算
  • 成品油购进数据选择没有发票
  • 期末应交税费有余额吗
  • 票据到期无力支付怎么办
  • 小规模其他业务收入交多少税率
  • win7系统出现reboot and
  • Win10 Mobile 10549中Cortana电池消耗很大该怎么办?
  • fedora7
  • 服务器时间和电脑时间
  • 外接法实物图
  • win8系统切换桌面
  • win10无法升级系统
  • win8系统多少位
  • 你所知道的三维建模软件有哪些?
  • 如何搭建react项目
  • 解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
  • perl getoption
  • js数组每个元素+1
  • js传参数有长度限制
  • 阿里云一键建站
  • shell 字符串比较
  • java一些常用词汇
  • js时间范围
  • node 动态路由
  • js立即执行函数作用
  • jquery propertychange
  • 重庆国税12366电子税务局官网入口
  • 广东税务怎么查社保缴费明细
  • 购买的环保设备未使用检察建议
  • 发票代码如何查询公司
  • 青羊名字由来
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设