位置: 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)

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

  •  微博广告写作的3个要点(微博广告的效果)

    微博广告写作的3个要点(微博广告的效果)

  • ios无法安装第三方软件灰色(ios无法安装第三方游戏)

    ios无法安装第三方软件灰色(ios无法安装第三方游戏)

  • 显卡温度过高会出现什么现象(显卡温度过高会黑屏吗)

    显卡温度过高会出现什么现象(显卡温度过高会黑屏吗)

  • 静音模式怎么关(静音模式怎么关苹果手机)

    静音模式怎么关(静音模式怎么关苹果手机)

  • 联通停用2g 老人手机怎么办(联通停用2g要强制升级保底)

    联通停用2g 老人手机怎么办(联通停用2g要强制升级保底)

  • 淘宝锁单可以锁多久(淘宝锁单锁多久)

    淘宝锁单可以锁多久(淘宝锁单锁多久)

  • 充值卡密码是什么(充值卡密码是什么18位的)

    充值卡密码是什么(充值卡密码是什么18位的)

  • 充电器老是断充怎么办(充电器老是断充电)

    充电器老是断充怎么办(充电器老是断充电)

  • 苹果11强制关机不了怎么办(苹果11强制关机操作)

    苹果11强制关机不了怎么办(苹果11强制关机操作)

  • 时序逻辑电路的基本单元是什么(时序逻辑电路的设计实验报告)

    时序逻辑电路的基本单元是什么(时序逻辑电路的设计实验报告)

  • 在excel中单元格地址是指什么(在excel中单元格a1的内容为112单元格b2的内容为593)

    在excel中单元格地址是指什么(在excel中单元格a1的内容为112单元格b2的内容为593)

  • 苹果xsmas的处理器(iphone xsmax什么处理器)

    苹果xsmas的处理器(iphone xsmax什么处理器)

  • 手机照片怎么去背景(手机照片怎么去掉多余的人)

    手机照片怎么去背景(手机照片怎么去掉多余的人)

  • 手机热点范围是多少米(手机热点几米)

    手机热点范围是多少米(手机热点几米)

  • 手机屏幕为什么失灵(手机屏幕为什么会变成紫色)

    手机屏幕为什么失灵(手机屏幕为什么会变成紫色)

  • iphone怎么改主副卡设置(iphone怎么设置主副卡)

    iphone怎么改主副卡设置(iphone怎么设置主副卡)

  • 极速退款需要什么等级(极速退款需要什么资料)

    极速退款需要什么等级(极速退款需要什么资料)

  • i78700配什么主板(i78700配什么主板做win7)

    i78700配什么主板(i78700配什么主板做win7)

  • amd svm有什么用(amd的svm)

    amd svm有什么用(amd的svm)

  • 蓝牙耳机有杂音怎么解决(蓝牙耳机有杂音是怎么回事)

    蓝牙耳机有杂音怎么解决(蓝牙耳机有杂音是怎么回事)

  • gfxacc.exe是什么进程 作用是什么 gfxacc进程查询(chcfg.exe是什么)

    gfxacc.exe是什么进程 作用是什么 gfxacc进程查询(chcfg.exe是什么)

  • 【Echarts】在html中引入echarts详细步骤教程【源码】(echarts css)

    【Echarts】在html中引入echarts详细步骤教程【源码】(echarts css)

  • 前端经典面试题 | Computed 和 Watch 的区别(前端面试题必问的题目)

    前端经典面试题 | Computed 和 Watch 的区别(前端面试题必问的题目)

  • discuz教程:电脑版、手机版去除标题title中的Powered by Discuz(discuz怎么使用)

    discuz教程:电脑版、手机版去除标题title中的Powered by Discuz(discuz怎么使用)

  • python PaddleOCR库的介绍

    python PaddleOCR库的介绍

  • 报关单境外收货人错了怎么办
  • 个人所得税是什么意思有什么用
  • 何谓关税
  • 国库券利息收入计入利润总额吗
  • 付境外公司佣金怎么做账
  • 个人动产租赁税费怎么算
  • 注册资本需要实交吗
  • 个人独资企业没有申报税的后果
  • 注销公司方便吗
  • 收到发票怎么记账
  • 购买的固定资产可以一次计入管理费用吗
  • 出售固定资产要交哪些税
  • 企业购买理财产品收益会计分录
  • 公司购买理财产品的收益计入什么科目
  • 购物预付卡怎么用
  • 转出未交增值税借方余额表示什么
  • 会计人员需要承担的责任
  • 物流补贴需要交税吗
  • 增值税电子发票公共服务平台
  • 投资者减除费用30000
  • 没有系统U盘,电脑密码忘记了如何打开电脑
  • 电脑经常重新启动是什么原因
  • 冲减多计提税费
  • 个税申报的人数比工资表少了怎么办
  • 以房抵债房屋能否判决过户
  • win8电脑系统还原
  • php程序员不应该做的事
  • php二维码生成代码
  • win11有什么升级
  • 台式机装win10哪个版本好
  • mssearch.exe - mssearch是什么进程 有什么用
  • shine.exe - shine是什么进程 有什么用
  • 诺曼底作战
  • lvgl使用
  • 公司注销职工怎么办理
  • 增资会计
  • 公司开的餐费专票可以抵扣吗
  • 固定资产转为投资性房地产公允价值
  • 本年利润借方红字代表什么意思
  • 劳务费和工程劳务费有区别
  • 每个月计提折旧的分录
  • 公司车辆固定资产转移税
  • pandas columns排序
  • 普通发票该可以抵扣吗
  • 建造合同收入的会计处理
  • 个体户开票超过多少认定为小规模
  • 找社保代理公司需要提供什么资料
  • 饭店开业多久可以正常
  • 先开票未发货要确认收入吗
  • 营改增抵减的销项税额是什么意思
  • 超市返利账务处理
  • 运输费和货款一样吗
  • 合同资产根据什么来编报表
  • 进项发票已经认证,对方作废了
  • 企业的未分配利润属于什么科目
  • 广告制作费属于现代服务吗
  • 注册会计师转所规定
  • win8.1补丁打不上
  • win8网络连接
  • ububtu安装教程
  • mac安装应用一般放在哪个目录下
  • 苹果mac电脑删除打印机后还显示网络错误
  • 软raid怎么组
  • win2008怎么查看隐藏文件
  • 如何解除系统默认
  • win8引导文件
  • win7如何更改欢迎界面
  • gitlab管理员账号 审批
  • js响应式布局
  • jQuery插件安装教程
  • 【ExpandableListView】ExpandableListView互斥展开效果
  • rhel7.6安装
  • 已经序列化的表单怎么再添加
  • jquery page
  • unity 动态壁纸
  • javascript编程语言
  • jquery ajax结合thinkphp的getjson实现跨域的方法
  • 报废车税务怎么处理
  • 福建医保省外报销政策
  • 中国税务报客户端
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设