【b站咸虾米】chapter5_uniapp-API_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

课程地址:【新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=12&share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

5 API

API 概述 | uni-app官网

uniapp和微信小程序的文档是一致的。uniapp的api与微信小程序的api命名保持一致。

5.1 页面和路由

uniapp官网-组件-内置组件-路由和页面跳转-navigator,2种跳转方式:1 navigatei标签;2 uni.navigateTo跳转(js逻辑实现跳转)

uni.navigateTo(OBJECT) | uni-app官网

wx.switchTab(Object object) | 微信开放文档

区别在于微信小程序前面有wx.xxx,uniapp前面有uni.xxxx

5.1.1 uni.navigateTo

uni.navigateTo(OBJECT) | uni-app官网

相当于跳转到某一个页面。

navigate标签实现页面跳转

<navigator url="/pages/demo4/demo4" open-type="redirect">demo4</navigator>

效果

点击demo4,跳转到demo4页面

问题:我想让一个view块点击时实现页面跳转。

方法:给view加一个点击事件,在事件处理函数里用uni.navigateTo方法实现页面跳转。

<view style="height: 100px; width: 200px;background-color: aqua;" @click="goDemo4"> </view>

事件处理函数 

		methods: {
			goDemo4() {
				uni.navigateTo({
					url: '/pages/demo4/demo4'
				})
			}
		}
  • 总结:页面跳转形式
    • 1、navigator标签实现页面跳转
    • 2、uni.navigateTo方法实现页面跳转(在要跳转的view里添加click事件,事件处理函数里使用uni.navigateTo方法)

参数的其他属性

举例

		methods: {
			goDemo4() {
				uni.navigateTo({
					url: '/pages/demo4/demo4',
					success:res=> {
						console.log(res);
					}
				})
			}
		}

5.1.2 uni.redirectTo

uni.navigateTo(OBJECT) | uni-app官网

跳转时关闭当前页面

uni.navigateTo方法,在跳转时,跳转后的页面左上角有箭头,表示可以回到上一个页面。

而uni.redirectTo方法,跳转后的页面左上方没有箭头,即不能回到上一个页面。

5.1.3 uni.reLaunch

uni.navigateTo(OBJECT) | uni-app官网

打开导航页面(tabBar页面)。uni.navigateTo和uni.redirectTo方法不能打开导航页面。

比如项目里的about页面,就是导航页面。只能用uni.reLaunch方法跳转到。

使用

		methods: {
			goDemo4() {
				uni.reLaunch({
					url: '/pages/about/about'
				})
			}
		}

导航页面,比如首页,新闻列表和关于我们(about)是导航页面。

5.1.4 uni.switchTab

uni.navigateTo(OBJECT) | uni-app官网

与uni.reLaunch方法的功能是一致的,但是不能携带参数(uni.reLaunch可以携带参数)

下面num就是url里携带的参数,uni.reLaunch方法可以这样,uni.switchTab不可以。

		methods: {
			goDemo4() {
				uni.reLaunch({
					url: '/pages/about/about?num=3'
				})
			}
		}

5.1.5 uni.navigateBack

uni.navigateTo(OBJECT) | uni-app官网

返回上一个页面

在跳转后的页面中,view里绑定一个click事件,事件处理函数里使用uni.navigateBack返回上一页。

		<view class="" @click="goBack">< 返回上一页
		</view>
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}

效果

点击箭头处,返回首页。

5.1.6 EventChannel

页面通信

5.1.7 uni.preloadPage

有平台差异,就不展开了。

5.2 onLoad接收页面跳转时的传参

5.2.1 vueroute路由传参

在navigator标签的url属性里添加字段wd字段,值为uniapp

<navigator url="/pages/demo4/demo4?wd=uniapp" open-type="redirect">demo4</navigator>

在index首页点击该标签,跳转到demo4页面,可以在地址栏看到成功传值

要想在页面获取到wd字段,可以使用vuerouter。要传递的wd字段在this.$route.query里

因此在生命周期mounted里,打印demo4页面接收的wd值。

		mounted() {
			console.log(this.$route.query.wd);
		}

上面使用navigator标签实现页面跳转,uni.navigateTo方法是一样的,也是在方法的url里添加要传递的字段。

需要兼容小程序

5.2.2 onLoad传参

小程序不支持以上的route路由跳转。

规范:使用小程序的onLoad生命周期,此时onLoad参数即为传递的参数。

		onLoad(e) {
			console.log(e);
		}

总结:可以直接使用onLoad获取传递的参数。

5.2.3 传递多个参数

url的参数用&连接。

<navigator url="/pages/demo4/demo4?wd=uniapp&author=瑶瑶" open-type="redirect">demo4</navigator>

效果

5.3 界面

比如页面提示“操作失败”、“发布成功”等提示信息。

uni.showToast(OBJECT) | uni-app官网

(这里新建一个demo2项目)

5.3.1 交互反馈

5.3.1.1 uni.showToast消息提示框

uni.showToast(OBJECT) | uni-app官网

使用

给图标加了个点击事件,事件处理函数如下

		methods: {
			clickImg() {
				uni.showToast({
					title:"感谢使用uniapp"
				})
			}
		}

点击图标的效果

默认成功的效果

失败效果

			clickImg() {
				uni.showToast({
					title:"操作失败",
					icon: 'error'
				})
			}

上面是H5运行,下面是小程序运行效果。

小程序的显示效果是一样的。

自定义图标路径

			clickImg() {
				uni.showToast({
					title:"操作失败",
					image:'/static/logo.png'
				})
			}

mask,是否显示透明蒙层。点击弹框,其实是显示了整个页面。此时无法点击页面其他位置。

要求点击弹窗时不可跳转demo页面。

此时将mask置为true

			clickImg() {
				uni.showToast({
					title:"操作失败",
					image:'/static/logo.png',
					mask: true
				})
			}

点击弹窗时,不可跳转页面demo

还有加载效果,icon取值为loading,显示加载效果。

none,不显示图标。

显示时间,duration:1500,显示1.5秒,一般设置为此值。

success,成功后的回调函数。一般不这样使用,而是额外使用setTimeout来实现延迟跳转。

			clickImg() {
				uni.showToast({
					title:"操作失败",
					icon: 'loading',
					mask: true,
					duration: 1000
				}),
				setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/demo/demo'
					})
				},1500)
			}

执行完uni.showToast方法后,在1.5秒后跳转demo页面。

fail,失败的回调函数。

complete,接口调用结束的回调函数。

5.3.1.2 uni.hideToast

尺寸                                                                                                                                                    如果规定时间内没有取消掉,那么可以使用uni.hideToast隐藏                                                                                                              

5.3.1.3 uni.showLoading(OBJECT)显示loading提示框

uni.showToast(OBJECT) | uni-app官网

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

5.3.1.4 uni.hideLoading()

uni.showToast(OBJECT) | uni-app官网

5.3.1.5 uni.showModal(OBJECT)模态弹窗

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

有title、content、cancelText、cancelColor等属性

5.3.1.6 uni.showActionSheet(OBJECT)弹出操作菜单

uni.showToast(OBJECT) | uni-app官网

 示例

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

自底部向上弹出操作菜单。

跟前面的组件picker底部选择器的作用是类似的。

5.3.2 设置导航条

uni.setNavigationBarTitle(OBJECT) | uni-app官网

导航条,就是下图最上方的uni-app区域

pages.json 页面路由 | uni-app官网

设置导航栏背景色,在pages.json中进行设置

		{
			"path" : "pages/demo/demo",
			"style" : 
			{
				"navigationBarTitleText" : "demo",
				"navigationBarBackgroundColor": "#c00", //导航栏背景色
				"enablePullDownRefresh" : false
			}
		}

效果 

使用uniapp的api设置导航条属性,有以下方法,用于设置导航条1标题、2背景色(前景色(文字颜色)只能使用黑色或白色)、3显示加载效果(转圈)、4隐藏加载效果、5隐藏返回首页按钮(平台差异大,不建议使用),在当前页面的onLoad方法中进行调用,来对当前页面的导航条进行设置。

uni.setNavigationBarTitle(OBJECT)

uni.setNavigationBarColor(OBJECT)

uni.showNavigationBarLoading(OBJECT)

uni.hideNavigationBarLoading(OBJECT)

uni.hideHomeButton(OBJECT)

#

设置背景色功能,方便开发调试。

5.3.3 设置TabBar

TabBar设置见2.4.13【b站咸虾米】chapter1&2_uniapp介绍与uniapp基础_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握_uniapp 打包微信app 配置-CSDN博客

对TabBar的内容、样式、隐藏、显示、某一项tabBar的右上角添加文本,显示tabBar某一项的右上角红点或隐藏、监听中间按钮的点击事件(只有app支持,平台差异大)。p39。

uni.setTabBarItem(OBJECT)

uni.setTabBarStyle(OBJECT)

uni.hideTabBar(OBJECT)

uni.showTabBar(OBJECT)

uni.setTabBarBadge(OBJECT)

uni.removeTabBarBadge(OBJECT)

uni.showTabBarRedDot(OBJECT)

uni.hideTabBarRedDot(OBJECT)

uni.onTabBarMidButtonTap(CALLBACK)

5.3.4 其他

其他的东西有需要可以去看文档。

uni.setBackgroundColor(OBJECT) | uni-app官网

5.4 网络

uni.request(OBJECT) | uni-app官网

5.4.1 发起请求

uni.request(OBJECT)

uni.configMTLS(OBJECT)

5.4.1.1 uni.request(OBJECT)

发起网络请求。

api:应用程序接口,Application Programming Interface

网上的免费api接口:随机小狗图片https://dog.ceo/api/breeds/image/random

ApiPost软件,测试接口

每个接口返回的对象不一样,这根据个人的习惯。

举例

注意:1 uni.request的使用,url,然后success回调函数,可以接收接口返回的值;

2 uni.showLoading,在发起请求前使用。在请求成功后,在success回调中使用uni.hideLoading方法关闭加载效果。

<template>
	<view>
		<image :src="picUrl" mode="aspectFill" @click="getPicUrl"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picUrl: ""
			}
		},
		methods: {
			getPicUrl() {
				uni.showLoading({
					title: "数据加载中"
				});
				uni.request({
					url: "https://dog.ceo/api/breeds/image/random",// 网络地址,api,使用后端完成
					success:res=>{
						console.log(res);
						this.picUrl = res.data.message;
						uni.hideLoading();//请求成功后隐藏加载效果
					}// 接收的回调函数
				})
			}
		},
		onLoad() {
			this.getPicUrl();
		}
	}
</script>

<style>

</style>

效果

点击图片,随机加载一张狗狗照片

(???,我不是猫门的吗) 

 5.4.2 uni.request的其他参数

1 timeout

请求超时

设置超时时间。

注意是number类型

				uni.request({
					url: "https://dog.ceo/api/breeds/image/random",// 网络地址,api,使用后端完成
					timeout:3000,
					success:res=>{
						console.log(res);
						this.picUrl = res.data.message;
					},// 接收的回调函数
					fail: err=> {
						console.log(err);
					},
					complete: ()=> {
						// 请求成功或失败都要隐藏加载效果
						uni.hideLoading();						
					}
				})

2 data

带传参的接口:随机小猫咪图片https://api.thecatapi.com/v1/images/search?limit=1

换接口的话,一定要自己打印看一下,因为可能新接口数据可能就变了。

可以看出,这次返回的data里有个数组。因此要用v-for来显示图片。

示例

这个v-for是我实现的,老师实现的话外层有个v-for的view,里面是item的image。

这里注意,api接口可以传参,这里的参数是limit=1.

<template>
	<view>
		<image v-for="item in picUrl" :src="item.url" mode="aspectFill" @click="getPicUrl"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picUrl: []
			}
		},
		methods: {
			getPicUrl() {
				uni.showLoading({
					title: "数据加载中"
				});
				uni.request({
					url: "https://api.thecatapi.com/v1/images/search?limit=2",// 网络地址,api,使用后端完成
					timeout:3000,
					success:res=>{
						console.log(res);
						this.picUrl = res.data;
					},// 接收的回调函数
					fail: err=> {
						console.log(err);
					},
					complete: ()=> {
						// 请求成功或失败都要隐藏加载效果
						uni.hideLoading();						
					}
				})
			}
		},
		onLoad() {
			this.getPicUrl();
		}
	}
</script>
<style>
</style>

效果

传参有2种写法,

写法1:在url后。

写法2:在参数data中添加传递的参数。

有的传参就不是url后面+?+字段=值,而是通过/进行分割,比如有道云。

比如有30条数据,在原本url基础长+/1,则会返回第1条数据。具体就不展开了。

 3 dataType

默认是json,也有text方式的,大多数都是json。

4 methods

请求发送的类型。

get和post请求的区别(面试题)

methods值也就是请求的类型,要跟后端沟通。

5.4.3 案例

5.4.3.1 list页面

https://jsonplaceholder.typicode.com

list页面实现获取列表详情展现到页面

接口返回的data是个数据,每个元素包括body和title,以及id等属性。

实现

<template>
	<view class="out">
		<!-- 并且有id作为唯一标识符 -->
		<view class="row" v-for="item in listArr" :key="item.id">
			<view class="title">{{ item.title }}
			</view>
			<view class="content">{{ item.body }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: []
			}
		},
		methods: {
			getData() {
				uni.request({
					url: "https://jsonplaceholder.typicode.com/posts",
					success: res=> {
						console.log(res);
						this.listArr = res.data;
					}
					
				})
			}
		},
		onLoad() {
			this.getData();
		}
	}
</script>

<style>
.out{
	padding: 50px 30px;
	.row {
		padding: 20px 0;
		border-bottom: 1px dotted #e4e4e4;
		.title{
			font-size: 30px;
			padding-bottom: 15px;
			color:#333;
		}
		.content {
			font-size: 14px;			
		}
	}
}
</style>

其实跟5.4.2.2差不多了。

效果

5.4.3.2 跳转详情页
1 从list页面跳转详情页

跳转到新闻列表的详情页detail。

实现list页面向detail页面的跳转,使用uni.navigateTo。

一般布局改完了,就不再对template里的标签元素进行更改了。

给list的view添加点击事件。

详情页的参数是/posts/1(其实就是list页面请求的第一条数据)

list页面代码

<template>
	<view class="out">
		<!-- 并且有id作为唯一标识符 -->
		<view class="row" v-for="item in listArr" :key="item.id" @click="clickItem">
			<view class="title">{{ item.title }}
			</view>
			<view class="content">{{ item.body }}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr: []
			}
		},
		methods: {
			getData() {
				uni.request({
					url: "https://jsonplaceholder.typicode.com/posts",
					success: res=> {
						console.log(res);
						this.listArr = res.data;
					}
					
				})
			},
			// 点击跳转详情
			clickItem() {
				uni.navigateTo({
					url:"/pages/detail/detail"
				})
				
			}
		},
		onLoad() {
			this.getData();
		}
	}
</script>

<style>
.out{
	padding: 50px 30px;
	.row {
		padding: 20px 0;
		border-bottom: 1px dotted #e4e4e4;
		.title{
			font-size: 30px;
			padding-bottom: 15px;
			color:#333;
		}
		.content {
			font-size: 14px;			
		}
	}
}
</style>

2 动态展示详情页数据
3 添加加载效果
4 列表页向详情页传参

传参通过uni.navigateTo实现。

list页面,点击事件添加所点击信息的id,通过uni.navigateTo拼接到url中,传递给detail页面。

url传参

detail页面对id进行获取,在onLoad中获取。

然后在请求接口的url里拼接获取到的id

然后就实现了点击列表的每条数据,都可以跳转到对应的详情页面。

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

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

相关文章

Elasticsearch:了解人工智能搜索算法

作者&#xff1a;来自 Elastic Jessica Taylor, Aditya Tripathi 人工智能工具无处不在&#xff0c;其原因并不神秘。 他们可以执行各种各样的任务并找到许多日常问题的解决方案。 但这些应用程序的好坏取决于它们的人工智能搜索算法。 简单来说&#xff0c;人工智能搜索算法是…

Python基础综合案例 --- 数据可视化

1.折线图可视化 1.按照 json 格式封装的数据可以在各类编程语言中流通:比如说一个人说法语,一个人说德语,互相听不懂,但是它们可以将各自说的语言统一转化为英语说出,这样互相之间就听的懂了 1.在python中,符合 json 格式的数据有以下两种形式: 第一种是字典存在形式;…

基于springboot+vue的中小企业设备管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Potions (Hard Version)

题目链接&#xff1a;Potions (Hard Version) - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意&#xff1a; 就是一路上我一直吃药&#xff0c;但是要保证吃完药我的健康值是正的&#xff0c;不能小于0&#xff0c;贪心优先队列&#xff0c;我们想让自己健康值累加大&#…

【java面试系列】服务的限流

目录 一、常用的限流算法1.固定窗口计数器(计数器算法)2 滑动窗口计数器算法3. 漏桶算法4 令牌桶算法(`常用`)Google开源项目Guava中的RateLimiter使用的就是令牌桶控制算法二、 分布式限流1、网关层(Nginx、Openresty、Spring Cloud Gateway等)流量限制nginx限流Spring Cl…

Leetcode日记 889. 根据前序和后序遍历构造二叉树

Leetcode日记 889. 根据前序和后序遍历构造二叉树 给定两个整数数组&#xff0c;preorder 和 postorder &#xff0c;其中 preorder 是一个具有 无重复 值的二叉树的前序遍历&#xff0c;postorder 是同一棵树的后序遍历&#xff0c;重构并返回二叉树。 如果存在多个答案&#…

NLP 使用Word2vec实现文本分类

&#x1f368; 本文为[&#x1f517;365天深度学习训练营学习记录博客 &#x1f366; 参考文章&#xff1a;365天深度学习训练营 &#x1f356; 原作者&#xff1a;[K同学啊 | 接辅导、项目定制]\n&#x1f680; 文章来源&#xff1a;[K同学的学习圈子](https://www.yuque.com/…

产品渲染3D效果图一张多少钱,哪个平台更有性价比?

产品渲染3D效果图的价格受到多方面因素的影响&#xff0c;包括但不限于产品类型、渲染难度以及输出尺寸等。如果效果图需要后期处理&#xff0c;还有可能增加其他费用。接下来&#xff0c;我们来了解一下产品渲染效果图的费用情况。 1.产品渲染3D效果图一张多少钱&#xff1f; …

数据结构2月19日

题目&#xff1a;顺序表作业 代码&#xff1a; 功能区&#xff1a; #include <stdio.h>#include <stdlib.h>#include "./d2191.h"SeqList* create_seqList(){SeqList* list (SeqList*)malloc(sizeof(SeqList));if(NULL list){return NULL;}list->p…

PULpy安装与使用

今天试一下安装PULpy GitHub - WatsonLab/PULpy: Open prediction of Polysaccharide Utilisation Loci (PUL) 下载下面这个文件 https://github.com/WatsonLab/PULpy/blob/master/envs/PULpy.yaml mkdir PULpy cd PULpy #将刚刚下的文件放到PULpy文件夹中 conda env crea…

微服务篇之限流

一、为什么要限流 1. 并发的确大&#xff08;突发流量&#xff09;。 2. 防止用户恶意刷接口。 二、限流的实现方式 1. Tomcat限流 可以设置最大连接数&#xff0c;但是每一个微服务都有一个tomcat&#xff0c;实现起来非常麻烦。 2. Nginx限流 &#xff08;1&#xff09;控…

Java的编程之旅24——private私有方法

1.private的介绍 在面向对象编程中&#xff0c;private是一种访问修饰符&#xff0c;用于限制成员的访问范围。私有成员只能在所属的类内部访问&#xff0c;对外部的类或对象是不可见的。 private的使用可以带来以下几个好处&#xff1a; 封装实现细节&#xff1a;私有成员可…

程序媛的mac修炼手册--小白入门Java篇

最近因为要用CiteSpace做文献综述&#xff0c;间接接触Java了。所以&#xff0c;继Python、C之后&#xff0c;又要涉猎Java了。刺激&#xff01;&#xff01; 由于CiteSpace与Java要求版本高度匹配&#xff0c;有个匹配详情明天为大家讲解。总之&#xff0c;我的Java之旅开始于…

2024年 前端JavaScript入门到精通 第四天 笔记

4.1 函数的基本使用以及封装练习 4.2 函数的参数以及默认参数 函数的灵魂&#xff01;&#xff01;&#xff01; 4.3 函数封装数组求和案例 4.4 函数返回值return 4.5 函数返回值细节以及上午总结 4.6 函数返回值案例-求最大值和最 4.7 函数复习以及断点进入函数 4.8 作用域 4…

5个精美的wordpress中文企业主题模板

元宇宙WordPress主题模板 简洁大气的元宇宙 Metaverse WordPress主题模板&#xff0c;适合元宇宙行业的企业官网使用。 https://www.jianzhanpress.com/?p3292 职业技术培训WordPress主题模板 简洁大气的职业技术培训WordPress主题&#xff0c;适合用于搭建教育培训公司官方…

政安晨:【示例演绎机器学习】(三)—— 神经网络的多分类问题示例 (新闻分类)

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: 政安晨的机器学习笔记 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让小伙伴们一起学习、交流进步&#xff0c;不论是学业还是工…

简单几步通过DD工具把云服务器系统Linux改为windows

简单几部通过DD安装其他系统&#xff0c;当服务器的web控制台没有我们要装的系统&#xff0c;就需要通过DD&#xff08;Linux磁盘&#xff09;工具来更改系统&#xff0c;&#xff08;已知支持KVM系统&#xff09; 本文如何简单的更换系统&#xff0c;不通过web控制台来更换&a…

蓝桥 算法训练 粘木棍(C++)

问题描述 有N根木棍&#xff0c;需要将其粘贴成M个长木棍&#xff0c;使得最长的和最短的的差距最小。 输入格式 第一行两个整数N,M。   一行N个整数&#xff0c;表示木棍的长度。 输出格式 一行一个整数&#xff0c;表示最小的差距 样例输入 3 2 10 20 40 样例输出 10…

Excel面试题及答案(1)

1.辅助列添加,快速填充方式填充隔行的编号;定位条件定位到空值后,右击---插入整行 2.利用通配符计算A3:A9含有车间的单元格个数(保留计算公式)。 3.利用身份证号提取 “性别”、“年月日”、“年龄” 性别:利用mid()方法,添加了一列辅助列,根据提取身份证后面第2位…

十八、图像像素类型转换和归一化操作

项目功能实现&#xff1a;对一张图像进行类型转换和归一化操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 norm.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class NORM { public:void norm(Mat& image); };#pragma once二…