Uniapp中嵌入H5( uniapp开发的H5),并且在H5中跳转到APP的指定页面

原生H5跳转uniapp开发的app方式:

1.在APP中使用web-view嵌入H5页面使用web-view组件实现
<template><view><web-view src="https://uniapp.dcloud.net.cn/component/web-view.html"></web-view></view>
</template>

2.在H5项目引入webview.js

<!-- 需要把 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>

 3.调用方法跳转至app 内部的页面的关键方法 uni.reLaunch

uni.reLaunch({url: '/pages/tabBar/component/component'});

4.跳转方式:

<!-- 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。 H5端与app端通信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>

上面的跳转方式可以解决APP嵌入原生H5页面跳转回APP的问题,但是使用uniapp开发的H5就会失效,在uniapp开发H5页面使用 uni.reLaunch 只能跳转到H5项目本地的页面。

uniapp开发H5跳转方式:

1.在H5项目里引入 web-view.js:

通过官网链接下载 web-view.js文件(下载链接,打开链接右键另存为下载链接,),放到项目的static/js文件中

2.在main.js中引入

import App from './App'
import webView from './static/js/uni.webview.1.5.2.js'
....

3.使用方式:

				// #ifdef APP-PLUSuni.webView.postMessage({data: {action: 'uni-app',}});uni.webView.reLaunch({url: '/pages/tabBar/component/component'});

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

官方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)) {// quickappdocument.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。 H5端与app端通信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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/125036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从云到AI到大模型,阿里云始终和谁站在了一起?

引言&#xff1a;云的创新没有减缓 而且在加速深入百行百业 【科技明说 &#xff5c; 热点关注】 【全球云观察 | 每日看点】作为中国最大的云计算厂商&#xff0c;阿里云的产品矩阵覆盖越来越全面&#xff0c;越来越细致&#xff0c;越来越到位。 ​ 在2023杭州云栖大会现场…

java项目之医院病历管理系统(ssm框架)

项目简介 医院病历管理系统实现了以下功能&#xff1a; 管理员&#xff1a;个人中心、医院公告管理、用户管理、科室信息管理、医生管理、出诊信息管理、预约时间段管理、预约挂号管理、门诊病历管理、就诊评价管理、系统管理。医生&#xff1a;个人中心、出诊信息管理、预约…

File --JAVA

File --JAVA 构造方法 方法说明public File (String pathname)根据文件路径创建对象public File (String parent, String child)根据父路径名字字符串和子路径名字符串创建文件对象public File (String parent, String child)根据父路径对应文件对象和子路径名字符串创建文件…

企业计算机电脑中了locked勒索病毒怎么办,勒索病毒解密,数据恢复

网络技术的不断发展&#xff0c;为我们的企业带来了很大的便利&#xff0c;大部分企业都会选择合适的办公软件系统&#xff0c;方便自身的生产与运营。近期&#xff0c;网络上的locked勒索病毒又开始攻击企业的计算机服务器了&#xff0c;经过10月份云天数据恢复中心对企业数据…

02【Git分支的使用、Git回退、还原】

上一篇&#xff1a;01【Git的基本命令、底层命令、命令原理】 下一篇&#xff1a;03【Git的协同开发、TortoiseGit、IDEA的操作Git】 文章目录 02【Git分支的使用、Git回退、还原】一、分支1.1 分支概述1.1.1 Git分支简介1.1.2 Git分支原理 1.2 创建分支1.2.1 创建普通分支1.…

GPT做SQL查询引擎的自然语言

目录 面向企业查询的生成式人工智能 步骤1&#xff1a;将示例数据转换为单字符字符串 步骤2&#xff1a;为大型语言模型&#xff08;LM&#xff09;创建提示符 步骤3&#xff1a;将数据发送到OpenAI的API 步骤4&#xff1a;执行GPT返回的SQL代码的结果 步骤5(可选)&#…

NLP之多循环神经网络情感分析

文章目录 代码展示代码意图代码解读知识点介绍 代码展示 import pandas as pd import tensorflow as tf# 构建RNN神经网络 tf.random.set_seed(1) df pd.read_csv("../data/Clothing Reviews.csv") print(df.info())df[Review Text] df[Review Text].astype(str) …

iPhone没有信号无法付钱?这样的损友要远离

近段时间以来&#xff0c;网络频传iPhone的信号差&#xff0c;导致朋友外出吃饭&#xff0c;用iPhone的朋友无法付钱&#xff0c;而只好拿国产手机的自己付钱&#xff0c;如果遇上这样的朋友只能说你被骗了&#xff0c;那是朋友在坑你&#xff0c;这样的朋友绝对是损友&#xf…

796. 子矩阵的和(二维前缀和)

题目&#xff1a; 796. 子矩阵的和 - AcWing题库 思路&#xff1a; 1.暴力搜索&#xff08;搜索时间复杂度为O(n2)&#xff0c;很多时候会超时&#xff09; 2. 前缀和&#xff08;左上角&#xff08;二维&#xff09;前缀和&#xff09;&#xff1a;本题特殊在不是直接求前…

systrace/perfetto如何看surfaceflinger的vsync信号方法-android framework实战车载手机系统开发

背景&#xff1a; hi&#xff0c;粉丝朋友们&#xff1a; 大家好&#xff01;近期分享了surfaceflinger相关的一些blog&#xff0c;有同学就对相关的一些内容产生了一些疑问。 比如&#xff1a;vsync查看问题&#xff0c;即怎么才可以说是vsync到来了。 比如perfetto中surfac…

Flutter——最详细(Map)使用教程

Map简介 键值对的集合&#xff0c;您可以使用其关联的键从中检索值。 普通的 HashMap是无序的&#xff08;不保证顺序&#xff09;&#xff0c;LinkedHashMap 按键插入顺序迭代&#xff0c;而像 SplayTreeMap 这样的排序映射按排序顺序迭代键。 1&#xff0c;添加元素 addEntri…

【MySql】10- 实践篇(八)

文章目录 1. 用动态的观点看加锁1.1 不等号条件里的等值查询1.2 等值查询的过程1.3 怎么看死锁&#xff1f;1.4 怎么看锁等待&#xff1f;1.5 update 的例子 2. 误删数据后怎么办?2.1 删除行2.2 误删库/表2.3 延迟复制备库2.4 预防误删库 / 表的方法2.4.1 账号分离2.4.2 制定操…

R -- match,pmatch,charmatch

文章目录 matchpmatchcharmatch match ?matchDescription match returns a vector of the positions of (first) matches of its first argument in its second. 第一个向量中的元素在第二个向量中的位置&#xff0c;如果第二个向量中有多个仅返回第一个match 元素的位置&…

vscode代码格式

touch .clang-format#加入以下内容 BasedOnStyle: Google BreakBeforeBraces: Custom BraceWrapping:AfterClass: falseAfterControlStatement: falseAfterEnum: falseAfterFunction: trueAfterNamespace: falseAfterObjCDeclaration: falseAfterStruct: falseAfterUnion: fals…

coturn服务器的搭建

Window下搭建coturn服务器&#xff1a; 准备材料&#xff1a; 1、安装Cygwin&#xff0c;地址&#xff1a;https://cygwin.com/install.html 由于Window无法直接部署coturn&#xff0c;因此需要下载安装Cygwin在Window上部署Linux虚拟环境。 在安装的时候需要安装几下packe…

springboot循环依赖问题解决

修改application.properties 添加 spring.main.allow-circular-referencestrue spring.cloud.refresh.refreshablenone #&#xff08;应该是这行生效&#xff09;

顺序表练习

顺序表练习 图解插入与删除&#xff0c;详见相关内容&#xff1a;顺序存储结构的插入与删除 //顺序表的定义、创建、插入、删除、查找 //定义&#xff1a;结构体中数组、表长 //创建:输入元素&#xff0c;表长 //插入&#xff1a;判断表是否已满、判断位序合法性 //插入位序k…

【Amazon】跨AWS账号资源授权存取访问

文章目录 一、实验框架图二、实验过程说明三、实验演示过程1、在A账号中创建S3存储桶2、在A账号创建S3存储桶访问策略3、在A账号创建信任开发账号的角色4、在B账号为用户添加内联策略5、在B账号中切换角色&#xff0c;以访问A账号中的S3资源 四、实验总结 一、实验框架图 本次…

Python通过pyecharts对爬虫房地产数据进行数据可视化分析(一)

一、背景 对Python通过代理使用多线程爬取安居客二手房数据&#xff08;二&#xff09;中爬取的房地产数据进行数据分析与可视化展示 我们爬取到的房产数据&#xff0c;主要是武汉二手房的房源信息&#xff0c;主要包括了待售房源的户型、面积、朝向、楼层、建筑年份、小区名称…

华为数通方向HCIP-DataCom H12-831题库(多选题:101-120)

第101题 LSR对收到的标签进行保留,且保留方式有多种,那么以下关于LDP标签保留一自由方式的说法 A、保留邻居发送来的所有标签 B、需要更多的内存和标签空间 C、只保留来自下一跳邻居的标签,丢弃所有非下一跳铃邻居发来的标签 D、节省内存和标签空间 E、当IP路由收敛、下一跳…