uniapp编写微信小程序和H5遇到的坑总结

uniapp编写微信小程序和H5遇到的坑总结

  • 1、阻止事件冒泡
  • 2、二维码生成
  • 3、H5跨域配置
  • 4、H5时，地址栏上添加版本号
  • 5、H5时，tabBar遮挡部分内容
  • 6、uniapp使用webview通信
    • 6.1、uniapp编写的小程序嵌入h5之间的通信
      • 6.1.1、小程序向h5发送消息
      • 6.1.2、h5向小程序发送消息
    • 6.2、h5和h5通信
      • 6.2.1、A端向B端传递参数
      • 6.2.2、B端向A端发送消息
  • 7、使用webview嵌入h5导致双导航栏

1、阻止事件冒泡

使用uniapp开发微信小程序的时候，发现使用@click.stop来阻止事件冒泡没有作用，点击了之后发现仍然会触发父组件或者祖先组件的事件。
在这里插入图片描述
在网上查阅，发现使用@tap.stop才能阻止事件冒泡。
在这里插入图片描述

2、二维码生成

在网上找了很多，发现很多都不行（也有可能是代码没写对），最后是在uniapp的插件市场下载uQRcode插件，根据给出的案例，才完美解决了。
下面给处教程：
插件下载地址: uqrcode

1、 选中全部，搜索 “uqrcode”
在这里插入图片描述
2、选中如下插件

如果不是选中的同一个插件，点进入之后可以根据里面的教程案例编写代码，我将已这个插件为案例
在这里插入图片描述

3、下载压缩包

下载压缩包，解压后找到uqrcode.js文件，根据自己项目，复制到项目下。（我的是放在src/utils下的）
在这里插入图片描述

4、使用uqrcode.js

<template>
	<view >	
		<view >
				<canvas id="qrcode" ref="qrcode" canvas-id="qrcode"
					:style="{width:`${qrcodeSize}px`, height: `${qrcodeSize}px`}"></canvas>
			</view>	
	</view>
</template>


<script>
	import uQRCode from "@/utils/uqrcode.js"

	export default {
		data() {
			return {
				qrcodeSize: 160,
				text:'eoruw20230528'
			}
		},
		mounted(){
			this.getQRcodeHandle()
		},
		methods: {
			// 获取二维码
			getQRcodeHandle() {
						uni.showLoading({
							title: '二维码生成中',
							mask: true
						})
						uQRCode.make({
							canvasId: 'qrcode',
							text: this.text,//二维码内容
							size: this.qrcodeSize,
							margin: 10,
							success: res => {
								console.log('qrcodeSrc = ' + res);
							},
							complete: () => {
								uni.hideLoading()
							}
						})
			},
		},
	}
</script>

3、H5跨域配置

网上查阅资料查阅了半天，发现大部分都只给出了一个步骤，结果都不行，最后发现还要改一个地方才会生效，真的是佛了呀！！

1、找到manifest.json，选择源码视图

在这里插入图片描述

2、找到h5，进入如下json配置

	"h5": {
		"devServer": {
			"proxy": {
				"/h5": {
					"target": "xxxxxxxx",//请求数据的地址
					"changeOrigin": true,
					"ws": true,
					"secure": false,
					"pathRewrite": {
						"^/h5": ""
					}
				}
			}
		},
	}

3、修改baseURL(很重要，之前就是少了这一步，一直没配置成功)

let baseUrl = null;
if (process.env.NODE_ENV === 'development') {
	baseUrl = '/h5';  //在请求数据的时候，会将/h5替换为配置的targer地址
	// console.log('开发环境');
} else if (process.env.NODE_ENV === 'production') {
	baseUrl =`https://${window.location.host}`;
	// console.log('生产环境');
} else {
	baseUrl = 'xxxxx';
	// console.log('测试环境');
}
export default baseUrl;

配置完后记得重启项目才会生效

看网上查阅说，也可以自行在根目录下添加一个vue.config.js文件，进行跨域配置，就像vue项目那样配置。目前我还没有尝试这种方法，后面尝试了再继续完善文档吧。

4、H5时，地址栏上添加版本号

根据项目需求，从微信小程序切入webview跳转到这个H5项目时，根据不同版本，显示不同的页面内容。

在manifest.json文件中找到h5，添加如下配置：

	"h5": {
		"router": {
			"mode": "hash",
			"base": "h5/v/1.5.26/"
		},
	
	}

在这里插入图片描述
这样在允许时地址上就会有我们的版本号啦

5、H5时，tabBar遮挡部分内容

链接: 官方地址

由于在 H5 端，不存在原生导航栏和 tabbar，也是前端 div 模拟。所以tabBar会覆盖部分内容

会在 H5 端给 .content 元素增加一个 tabbar 的高度 的下边距， uni-app 默认给 tabbar 的高度是50px 。

已 .content为例：

.content{
  padding-bottom: var(--window-bottom);
}

如果 50px 的高度还不够，可以使用下面的方法，在 tabbar 高度的基础上再增加 20px ：

.content{
  padding-bottom: calc(var(--window-bottom) + 20px);
}

6、uniapp使用webview通信

6.1、uniapp编写的小程序嵌入h5之间的通信

6.1.1、小程序向h5发送消息

这个比较简单，只需要在webview中的src做参数拼接就可以了。

1、创建webView

在小程序项目中添加了一个webView页面，代码如下

<template>
	<view>
		<web-view :src="src" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex"
	import qs from "qs"
	export default {
		data() {
			return {
				src: ""
			}
		},
		computed: {
			...mapGetters(['user', 'school', 'token', 'school_token'])
		},
		onLoad(option) {
			// decodeURI避免中文乱码，
			this.src = "xxxxxxx?" + decodeURI(qs.stringify({
				isView: 'true',
				school: this.school,
				token: this.token,
				school_token: this.school_token,
				user: this.user
			}))
		},
	}
</script>

2、h5接收参数

我是在h5页面加载的时候接收的参数，也就是在APP.vue中onLaunch（）中接收的

	import qs from "qs"


		onLaunch: function() {
			console.log('App Launch')
			const obj = qs.parse(window.location.href.split('?')[1]) || null;
			if (obj && Object.keys(obj).length > 0) {
			//如果有参数就对参数进行处理，但是有一点需要注意，如果传递过来的对象，最后一个属性值是字符串，后面值会自己跟一个  #/ ，具体为啥不知道，没有去找原因，反正我接收到的参数值是这样的，（我也是第一次用qs序列化参数，url拼接的是一个对象这样传参）
			}
		},

6.1.2、h5向小程序发送消息

这一块是真的坑，需要注意一下！！！！

链接: uniapp官方给出的案例

1、下载uni SDK
下载uni SDK的路径，需要将这个文件下载到项目中，我是命名为uni.webview.js，并放在static文件夹下

<script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>

2、修改index.html文件
在public下的index.html文件在添加如下代码，注意要放在<body></body>后面


	<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>');
		}
	</script>

	<!--上面的都是copy官方的，懒得再去删减修改了 -->

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="<%= BASE_URL %>static/uni.webview.js"></script>
	<script type="text/javascript">
		// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
		document.addEventListener('UniAppJSBridgeReady', function() {
			webUni.getEnv(function(res) {
				console.log('当前环境：' + JSON.stringify(res));
			});
		});
	</script>

3、修改uni.webview.js

修改uni.webview.js中的内容。

默认自带的方法名为uni，会和本地的uni命名冲突。postMessage会报错不是一个function。

我改成了webUni。注意修改的地方有三处（我之前只改了一处，结果一直整不出来）
在这里插入图片描述

在这里插入图片描述
4、使用webUni.postMessage发送消息

可以通过点击事件来触发消息的发送

			changeSchoolHandle() {
			//如果想要点击按钮后，小程序退出H5页面，那么就在postMessage前进行路由跳转，具体支持的路由跳转方法，可以查看官方文档，
					webUni.reLaunch({
						url: '/pages/school/school'
					})
					webUni.postMessage({
						data: {
							type: 'backSchool'
						}
					})
			},

//webView中使用@message对消息进行处理
<web-view :src="src" @message="handleMessage"></web-view>

注意：

  1. postMessage() 里，数据要放在 data 对象里。
  2. 注意触发的时机，只有 后退、组件销毁、分享 的时候，才会触发 web-view 的message事件。
  3. 使用 uni.postMessage() 方法，要改源码里的 uni 对象。此处我改为了webUni

6.2、h5和h5通信

h5 A 使用webview嵌入H5 B

6.2.1、A端向B端传递参数

也是通过url拼接的方式传递参数。同小程序向H5传递参数一样

6.2.2、B端向A端发送消息

这里就不能用uni.postMessage了，需要使用window.postMessage才行，这个跟iframe发送消息是一样的

A端

	<view>
		<web-view :src="xxxxxxxx"></web-view>
	</view>



		onLoad(option) {
				
			this.viewLoadHandle()
		},


	methods: {
			// #ifdef H5
			viewLoadHandle() {
				window.addEventListener("message", this.handleMessage);
			},
			// #endif
			handleMessage(e) {
				if (e.data.type === "message") {
					//收到消息后，编写对应的逻辑处理代码
				}

			},
		}

B端

window.parent.postMessage({
	type: "message",
	message: true,
	}, url)//url为A端的地址

7、使用webview嵌入h5导致双导航栏

小程序嵌入了h5，导致双导航栏，看起来很不美观，所以需要隐藏一个导航栏。

本来想动态控制小程序导航栏是否显示，但是在网上一直没有找到合适的方法。所以最后只能在h5导航栏上做文章了。

在pages.json中配置

"globalStyle": {
		"app-plus": {
			"titleNView": false
		}
	},

这个设置，所有页面都不会显示导航栏了，又会造成一个新的问题：当存在页面跳转时，顶部没有返回按钮了。

所以就需要在需要返回功能的地方，自己写一个导航栏。因为我用的uView这个框架，直接套用 Navbar 自定义导航栏 就好了。

套用之后，发现导航栏会遮挡一部分内容，猜测导航栏是通过定位显示在顶部，所有才会遮挡部分内容（具体原因没有研究），给自定义导航栏下面的view盒子，添加了一个css样式：

margin-top: 50px;//

这样就只会显示一个导航栏啦！

注意：
通过webview跳转到h5后，顶部导航栏将进入h5后的第一个页面的导航栏标题作为默认标题。进入之后不管切换到h5的哪个页面，都不会改变。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

BDA初级分析——SQL清洗和整理数据

BDA初级分析——SQL清洗和整理数据

一、数据处理 数据处理之类型转换 字符格式与数值格式存储的数据&#xff0c;同样是进行大小排序&#xff0c; 会有什么区别&#xff1f; 以rev为例&#xff0c;看看字符格式与数值格式存储时&#xff0c;排序会有什么区别&#xff1f; 用cast as转换为字符后进行排序 SEL…
阅读更多...
广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM

广东灯具3D扫描抄数建模服务3D测绘出图纸三维逆向设计-CASAIM

灯具三维逆向建模是一种将实际物体转换为数字模型的过程。通过逆向工程技术&#xff0c;可以将现有的灯具进行3D扫描&#xff0c;然后利用专业的逆向设计软件将其转换为准确的三维模型。 以下是CASAIM实施灯具三维逆向建模的一般步骤图&#xff1a; 1. 扫描&#xff1a;三维扫…
阅读更多...
Linux 系统编程拾遗

Linux 系统编程拾遗

Linux 系统编程拾遗 进程的创建 进程的创建 fork()、exit()、wait()以及execve()的简介 创建新进程&#xff1a;fork()
阅读更多...
【Flink】Flink窗口触发器

【Flink】Flink窗口触发器

数据进入到窗口的时候，窗口是否触发后续的计算由窗口触发器决定，每种类型的窗口都有对应的窗口触发机制。WindowAssigner 默认的 Trigger通常可解决大多数的情况。我们通常使用方式如下,调用trigger()方法把我们想执行触发器传递进去： SingleOutputStreamOperator<Produ…
阅读更多...
LabVIEW开发血液动力学监测仪

LabVIEW开发血液动力学监测仪

LabVIEW开发血液动力学监测仪 心电图和光电容积描记图的缩写分别是心电图、心电图和PPG。都熟悉“心脏病发作”、“心力衰竭”、“冠状动脉疾病”和“中风”等术语&#xff0c;但中很少有人意识到这些疾病都被认为是心血管疾病。心脏病学是一个医学领域&#xff0c;专注于心脏…
阅读更多...
mac m1上系统内录内部声音的方法/无需安装Blackhole

mac m1上系统内录内部声音的方法/无需安装Blackhole

总所周知&#xff0c;m1的mac不能录制桌面音频&#xff0c;obsstudio都不行。 最快的解决方法就是下载飞书&#xff1a; 登陆后新建直播/视频会议&#xff1a; 共享的时候选择下面的两个钩上去就好了
阅读更多...
Transformer 相关模型的参数量计算

Transformer 相关模型的参数量计算

如何计算Transformer 相关模型的参数量呢&#xff1f; 先回忆一下Transformer模型论文《Attention is all your need》中的两个图。 设Transformer模型的层数为N&#xff0c;每个Transformer层主要由self-attention 和 Feed Forward组成。设self-attention模块的head个数为 …
阅读更多...
Python绘制爱心代码（七夕限定版）

Python绘制爱心代码（七夕限定版）

写在前面&#xff1a; 又到了一年一度的七夕节啦&#xff01;你还在发愁送女朋友什么礼物&#xff0c;不知道怎样表达你满满的爱意吗&#xff1f;别担心&#xff0c;我来帮你&#xff01;今天&#xff0c;我将教你使用Python绘制一个跳动的爱心&#xff0c;用创意和幽默为这个…
阅读更多...
Python入门教程 | Python简介和环境搭建

Python入门教程 | Python简介和环境搭建

Python 简介 Python是一种高级编程语言&#xff0c;由荷兰人Guido van Rossum于1991年创建。它以其简单易学、可读性强和丰富的生态系统而受到广泛喜爱。它被广泛应用于各个领域&#xff0c;包括Web开发、科学计算、数据分析、人工智能等。 Python的特点 简洁易读&#xff1a…
阅读更多...
图数据库_Neo4j_Centos7.9安装Neo4j社区版3.5.4_基于jdk1.8---Neo4j图数据库工作笔记0011

图数据库_Neo4j_Centos7.9安装Neo4j社区版3.5.4_基于jdk1.8---Neo4j图数据库工作笔记0011

首先上传安装包,到opt/soft目录 然后看一下jdk安装的是什么版本的,因为在neo4j 4以后就必须要用jdk11 以上的版本,我这里还用着jdk1.8 所以 我这里用3.5.4的版本 关于下载地址: https://dist.neo4j.org/neo4j-community-3.5.4-unix.tar.gz 然后再去解压到/opt/module目录下 …
阅读更多...
vue3+vite+pinia

vue3+vite+pinia

目录 一、项目准备 1.1、Vite搭建项目 1.2、vue_cli创建项目 二、组合式API(基于setup) 2.1、ref 2.2、reactive 2.3、toRefs 2.4、watch和watchEffect 2.5、computed 2.6、生命周期钩子函数 2.7、setup(子组件)的第一个参数-props 2.8、setup(子组件)的第二个参数…
阅读更多...
Text-to-SQL小白入门（二）——Transformer学习

Text-to-SQL小白入门（二）——Transformer学习

摘要 本文主要针对NLP任务中经典的Transformer模型的来源、用途、网络结构进行了详细描述&#xff0c;对后续NLP研究、注意力机制理解、大模型研究有一定帮助。 1. 引言 在上一篇《Text-to-SQL小白入门&#xff08;一&#xff09;》中&#xff0c;我们介绍了Text-to-SQL研究…
阅读更多...
学习网络编程No.3【socket理论实战】

学习网络编程No.3【socket理论实战】

引言&#xff1a; 北京时间&#xff1a;2023/8/12/15:32&#xff0c;自前天晚上更新完文章&#xff0c;看了一下鹅厂新出的《扫毒3》摆烂至现在&#xff0c;不知道是长大了&#xff0c;还是近年港片就那样&#xff0c;给我的感觉不是很好&#xff0c;也可能是国内市场对港片不…
阅读更多...
ASP.NET WEB API通过SugarSql连接MySQL数据库

ASP.NET WEB API通过SugarSql连接MySQL数据库

注意&#xff1a;VS2022企业版可以&#xff0c;社区版可能存在问题。实体名称和字段和数据库中的要一致。 1、创建项目&#xff0c;安装SqlSugarCore、Pomelo.EntityFrameworkCore.MySql插件 2、文件结构 2、appsettings.json { “Logging”: { “LogLevel”: { “Default”: …
阅读更多...
7.maven

7.maven

1 初始Maven 1.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;https://maven.apache.org/ Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受欢迎的开源软件基金会&…
阅读更多...
Redis的数据结构

Redis的数据结构

Redis初始给了我们16个库&#xff0c;数据都是以键—值对来存储的&#xff0c;其中键的数据结构固定为string&#xff0c;值的数据类型有五种分别为&#xff1a;string、list、set、hash、zset。 1.string(字符串) string是最简单常用的数据结构&#xff0c;不同的类型有不同…
阅读更多...
FPGA_学习_15_IP核_VIO

FPGA_学习_15_IP核_VIO

前一篇博客我们提到在线调试的时候&#xff0c; 可执行文件只要烧进板子&#xff0c;程序它就会自己跑起来&#xff0c;不会等你点 这个按钮&#xff0c;它才开始跑。我们测试的模块中&#xff0c;里面可能有几个我们关心的信号&#xff0c;它会在程序刚运行很短的时间内发生状…
阅读更多...
Go自写NIPS—网络威胁防御系统

Go自写NIPS—网络威胁防御系统

目录 0x00 摘要0x01 示例柱状图3d视图报警列表控制查询功能封堵IP实例 0x02 结语 0x00 摘要 紧接着上文&#xff0c;我开发了IDS的雏形&#xff0c;但是因为界面太丑&#xff0c;还频繁出现bug&#xff0c;并且也没有封禁等功能&#xff08;还需要去防火墙自己封禁&#xff09…
阅读更多...
08-MySQL-基础篇-约束

08-MySQL-基础篇-约束

约束 前言约束示例 外键约束示例外键删除/更新行为语法CASCADESET NULL 前言 本篇来学习下MySQL表中字段的约束 约束 概念&#xff1a;约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。目的&#xff1a;保证数据库中数据的正确、有效性和完整性。分类 …
阅读更多...
快速搭建图书商城小程序的简易流程与优势

快速搭建图书商城小程序的简易流程与优势

很多人喜欢阅读电子书&#xff0c;又有很多人依旧喜欢实体书&#xff0c;而实体书店拥有一个图书商城小程序便成为了满足用户需求的理想选择。如果您也想进入这一充满潜力的领域&#xff0c;但担心开发难度和复杂流程&#xff0c;别担心&#xff01;您能做到快速搭建一个专业、…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站