程序员经验分享-hwhale

uni-app实战教程

2023-11-10

一、准备

二、介绍

  • 开发工具：HBuilderX
  • 跨段框架（uniapp以对齐微信小程序api的形式封装了一套跨端框架，可以横跨10个不同的小程序平台）
  • HTML5+ （支持原生ios，android）
  • 云开发

三、NVue是什么

uni-app App段内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力。

在App端，如果使用vue页面，则使用webview渲染；如果使用nvue页面（native vue的缩写），则使用原生渲染。一个App中可以同时使用两种页面，比如首页使用nvue，二级页使用vue页面，hello uni-app示例就是如此；

虽然nvue也可以多端渲染，输出H5和小程序，但nvue的css写法受限，所以如果你不开发App，那么不需要使用nvue。

四、框架选型

a、渲染效率排名

原生 > Flutter > RN > Uniapp

b、移动端生态排名

原生 > RN > Uniapp >Flutter

c、学习成本排名

原生 > Flutter > RN > Uniapp（但其实随着hooks的入场，RN的学习成本和Uniapp差距不大了）

d、框架简述

**【flutter】**根据google推出的flutter sdk进行编写,完全颠覆了android的开发理念，须知道，android、flutter都是google的， android开发使用的android sdk，flutter却不然，自制了一套自己的sdk，直接使用GPU渲染机制，在用户手机上 非常直接的 canvas draw view，其手段已经非常nx。

【reactNative】 的bridge(桥接)技术也是很厉害的！他通过了android 与 js之间构成了bridge，中间经过了编译，最终进行了android控件转换，这点有些像javac编译class那一块了，最终绘制在用户手机上的是原生控件。其中性能问题并不算太大，因为得到的是原生页面，所以比较受欢迎。
相对比下来 rn中间那层转换编译 对于 flutter来说是没有的，相对来说flutter是最直接的，但这里我也要指出，对于目前用户手机性能来说，现在android已经到11了，中间那部分转换损耗的性能，用户基本是感知不到的.

**【uniapp】**当前这个框架采用vue，采用云打包的方式生成apk发布使用.
这个框架我并不看好，开发者可以打开布局边界查看下布局,其中完全使用网页的形式呈现给用户，基本跟android不怎么挂钩，即便挂钩，官方也已经作出了api供用户使用.
虽然说完全使用网页的形式制作，但性能方面不至于太差劲，因为官方做出了很多网页的优化,具体性能暂时劣势于flutter，reactNative。

五、实战目标

  1. 从相册或拍照选取一张图片,并显示到页面里
  2. 把图片转成base64编码
  3. 调用百度Ai接口识别图片主体内容
  4. 展示识别结果
  5. 使用识别结果去查询所属的垃圾分类，展示结果
  6. 打包发布成ipa.apk

六、开发

1.创建项目

新建步骤：文件>新建>项目
在这里插入图片描述

新建完成后，目录如下：

在这里插入图片描述

pages.json等同于微信小程序中的app.json，用于配置路由等基本配置。

2.调试

正常的界面调试可以在HBuildX中，通过预览来调整。但是微信api需要在微信模拟器宿主中才能正常调用。所以我们需要把代码运行到微信小程序模拟器。

在这里插入图片描述

平台会将代码做编译打包成微信小程序代码，并且启动热更新模式。并且会创建一个unpackage目录，里面存放了编译后的代码。

在这里插入图片描述

然后我们需要使用微信小程序开发者工具，导入mp-weixin项目。

3.上传垃圾图片

打开pages/index/index.vue，页面交互设计是这样的：

  1. 拍照或者相册选择图片

  2. 将图片提交百度AI识别物体信息

  3. 根据百度AI返回的照片物体信息，判断物体属于哪类垃圾

下面先实现步骤1，修改template代码为：

<template>
	<view class="content">
		<button type="primary" @click="btnTaskPhoto">识别通用物体</button>
		<img :src="imageSrc" alt="">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath: "",
				imageSrc: ""
			}
		},
		onLoad() {

		},
		methods: {
			btnTaskPhoto() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res);
						this.imagePath = res.tempFilePaths[0];
						this.images2base64();
					}
				});
			},
			images2base64() {
				wx.getFileSystemManager().readFile({
					filePath: this.imagePath,
					encoding: "base64",
					success: (res) => {
						this.imageSrc = 'data:image/png;base64,' + res.data
						console.log(res);
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

显示如图：

在这里插入图片描述

打开小程序开发者工具，我们进行调试，如下：

在这里插入图片描述

上传成功后，图片显示到页面上：
在这里插入图片描述

4.识别图片中物体

  • 首先进入百度智能云并注册账号，选择产品>人工智能应用>图像识别。
    在这里插入图片描述

  • 然后进入应用列表，创建一个应用。创建完成后，可以拿到应用的API Key和Secret Key。
    在这里插入图片描述

  • 然后通过鉴权认证接口拿到access token。

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【百度云应用的AK】&client_secret=【百度云应用的SK】

  • 调用通用物体和场景识别API。修改images2base64方法：

    images2base64() {
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			// 获取accexx_token
			const params = {
				'client_id': 'llwgkZX3f5hYcP2xiaK7ewdf',//自己的Api Key
				'client_secret': 'GaQgeSPhjX8Sv21uAxG0G3NpGGVELvYn'//自己的Secret Key
			};
			const res1 = await uni.request({
				url: `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${params.client_id}&client_secret=${params.client_secret}`
			})
			const {
				access_token
			} = res1.data;
			// 提交图片到百度AI,识别
			const res2 = await uni.request({
				method: "POST",
				url: `https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general`,
				header: {
					"Content-Type": "application/x-www-form-urlencoded"
				},
				data: {
					access_token: access_token,
					image: encodeURI(result.data)
				}
			})
			console.log(res2);
		}
	})
}

    然而提示报错：Open api qps request limit reached

在这里插入图片描述

img

尝试再次识别时，已经有识别的结果：

在这里插入图片描述

5.显示识别结果

//调用,res2是百度识别的结果
this.parseResult(res2.data.result);

//添加methods
parseResult(result) {
    let itemList = result.map(item => item.keyword + item.score);
    uni.showActionSheet({
    	itemList: itemList
    })
}

页面显示如下：

七、uni-cloud

1.创建阿里云云开发环境

在这里插入图片描述

进入到uni-cloud后端服务空间列表管理界面，点击【新建服务空间】，弹窗新建弹窗，可选择阿里云和腾讯云，阿里云每个账号可以创建一个免费服务空间。如图：
在这里插入图片描述
这里创建阿里云空间。
在这里插入图片描述
然后返回HBuilderX，右键uniCloud目录，点击【关联云服务空间或项目】
在这里插入图片描述

关联成功后，uniCloud目录右侧会出现关联的云服务空间的名称。
在这里插入图片描述

2.新建云函数

在uniCloud目录右键单击，选择新建云函数/云对象。

在这里插入图片描述
在这里插入图片描述

uniCloud目录下会多出一个ImageClassify目录，里面有index.js、package.json两个文件。类似微信的小程序文件结构；
在这里插入图片描述
/ImageClassify/index.js代码如下：

'use strict';
exports.main = async (event, context) => {
	const params = {
		'client_id': 'llwgkZX3f5hYcP2xiaK7ewdf',
		'client_secret': 'GaQgeSPhjX8Sv21uAxG0G3NpGGVELvYn'
	};
	// 获取accexx_token
	const res = await uniCloud.httpclient.request(
		`https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${params.client_id}&client_secret=${params.client_secret}`,
		{
			method:"GET",
			dataType: "json",
		}
	)
	const access_token = res.data.access_token;

	// 提交图片到百度AI,识别
	let res2 = await uniCloud.httpclient.request(
		"https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general", {
			method: "POST",
			header: {
				"Content-Type": "application/x-www-form-urlencoded"
			},
			dataType: "json",
			data: {
				access_token: access_token,
				image: event.image
			}

		});
	//返回数据给客户端
	return res2.data;
};

上传部署：
在这里插入图片描述
上传完成后，可以在云服务空间看到云函数：

在这里插入图片描述

如果想要做调试，只需要在控制台右上角开启断点调试，再次再请求过来的时候，就会出发云函数中的断点；
在这里插入图片描述

3.调用云函数

修改pages/index/index.vue中image2base64方法：

images2base64() {
	let that = this;
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			uniCloud.callFunction({
				name: "ImageClassify",
				data: {
					image: encodeURI(result.data)
				},
				success: (res) => {
					console.log(res);
					that.parseResult(res.result.result);
				}
			})

		}
	})
},
parseResult(result) {
	let itemList = result.map(item => item.keyword + item.score);
	uni.showActionSheet({
		itemList: itemList
	})
}

但是在运行的时候提示：应用未关联服务空间，请在uniCloud目录右键关联服务空间

在这里插入图片描述

我们需要到HBuilder X重新运行下。

4.调试

a.连接本地云函数

在这里插入图片描述

到小程序模拟器中再次识别的时候已经正常。

在这里插入图片描述

查看network可以看到，是访问的本地ip：
在这里插入图片描述

b.连接云端云函数

在这里插入图片描述

可以看到，这时是访问的云端的接口：

在这里插入图片描述

八、条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。所有的东西都可以条件编译；官方文档

// #ifdef APP-PLUS
	console.log("我在原生App环境里");
// #endif

// #ifdef MP-WEIXIN
	console.log("我在微信小程序环境里");
// #endif

九、适配ios环境

1.条件编译

上面在将选择的照片转化成base64时，我们采用wx.getFileSystemManager，这在ios中时不能正常运行的。这里我们可以使用条件编译，区分不同的环境去跑不同的api。

我们还是修改pages/index/index.vue：

images2base64() {
	let that = this;

	// #ifdef APP-PLUS
	// html5+.io文档地址：https://www.html5plus.org/doc/zh_cn/io.html
	plus.io.resolveLocalFileSystemURL(this.imagePath, entry => {
		entry.file(file => {
			let reader = new plus.io.FileReader();
			reader.onloadend = (e) => {
				//e.target.result是base64文件编码，注意是带编码头的。所以我们需要去掉编码头(data:image/jpeg;base64,)。
				console.log(e.target.result);
				const base64 = e.target.result.substr(22); //截取掉文件头
				uniCloud.callFunction({
					name: "ImageClassify",
					data: {
						image: base64
					},
					success: (res) => {
						console.log(res);
						that.parseResult(res.result.result);
					}
				})
			}
			reader.readAsDataURL(file);
		});
	})
	// #endif
	
	// #ifdef MP-WEIXIN
	wx.getFileSystemManager().readFile({
		filePath: this.imagePath,
		encoding: "base64",
		success: async (result) => {
			this.imageSrc = 'data:image/png;base64,' + result.data;
			uniCloud.callFunction({
				name: "ImageClassify",
				data: {
					image: encodeURI(result.data)
				},
				success: (res) => {
					console.log(res);
					that.parseResult(res.result.result);
				}
			})

		}
	})
	// #endif
},

2.调试

打开：运行>运行到手机或模拟器>运行到IOS基座。首次打开需要安装模拟器插件

在React Native、Flutter，要开发IOS应用，必须要用Mac。

如果我们用uniapp，可以不用mac，因为有云打包，但是不能调试，如果需要调试，还是需要上mac。

十、垃圾分类

1.使用插件市场云函数

打开插件市场，搜索【垃圾分类】
在这里插入图片描述

导入插件（这个插件内部借助了第三方http api，搜索判断物体是什么类型的垃圾，目的第三方http api已经弃用，所以这个插件实际已经无效。这里仅做步骤演示用）：
在这里插入图片描述

页面自动打开Hbuilder X，给出提示：
在这里插入图片描述

点击确认，会将插件下载到本地云函数目录uniCloud。
在这里插入图片描述

然后我们可以手动上传部署。然后我们调整下识别垃圾之后的业务逻辑：

parseResult(result) {
	if (!result || !result.length) {
		return null;
	}
	this.selectRecResult(result[0].keyword);
},
selectRecResult(name) {
	uniCloud.callFunction({
		name: "TrashClassify",
		data: {
			keyword: name
		},
		success: (res) => {
			console.log(res);
			//拿到区分垃圾分类后的信息，后面可以做相应的业务处理
		}
	})
}

十一、打包

HBuilderX针对原生app，提供了云打包，如果我们没有mac，要发布ios就可以直接使用。

在这里插入图片描述在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

web前端

Uniapp

Hybird

uni-app实战教程 的相关文章

  • Yolov5的安装配置及实现目标检测

    本文内容 本文主要介绍anaconda下yolov5的安装配置方法 以及如何实现目标检测 目录 一 yolov5的下载安装 一 环境配置 二 下载yolov5 二 yolov5测试 一 图片测试 二 视频测试 三 调用手机摄像头实现实时检测

  • 如何使用 Docker 部署 FreeGPT-WebUI：一个简单的教程

    目录 1 FreeGPT WebUI 项目简介 2 安装 Docker 3 从 Docker Hub 拉取 FreeGPT WebUI 镜像 4 使用 Docker 运行 FreeGPT WebUI 应用程序 5 访问 FreeGPT We

  • python菜鸟学习Day1(数据类型)

    第一节 数据类型 int 整型 python2中有int long python3中只有int float 浮点型 string 字符串型 bool 布尔型 变量命名 字母 数字 下划线 数据不能开头 大小写敏感 不能和系统关键字 函数名

随机推荐

  • [2020.1.19][udev] 金步国udev

    金步国index里有4条udev相关的 1 udevadm 2 udev 3 systemd udevd service udevd守护进程 4 udev conf 1 udevadm 1 udevadm info options devp

  • linux 安装nginx+php +mysql 安装

    安装make make命令是GNU的工程化编译工具 用于编译众多相互关联的源代码问价 以实现工程化的管理 提高开发效率 安装PCRE库 g wget yum y install gcc gcc c wget pcre pcre devel

  • IP 地址解析与子网划分教程

    数据来源 一 简单局域网的构成 局域网 一般称为内网 简单局域网的构成 交换机 网线 PC 其他IT终端 交换机 用来组建内网的局域网的设备 交换机并不能让电脑上网 需要通过路由器 路由器 路由器可以为局域网自动分配IP和虚拟拨号 电脑需要

  • 高精度减法详解

    高精度减法详解 建议先学习高精度加法 高精度加法详解 当减数 被减数 差特别大时 大到无法用long long来存储 外面就需要使用高精度算法解决 算法基本思想 存储就是和加法差不多 都是用数组解决问题 计算就使用小学竖式计算即可 算法描述

  • 设计模式-桥接模式（Bridge）

    文章目录 前言 一 桥接模式的概念 二 桥接模式的实现 三 桥接模式的优缺点 1 优点 2 缺点 前言 桥接模式 Bridge Pattern 是一种结构型设计模式 用于将抽象部分和实现部分分离 使它们可以独立地变化 这种分离允许你将一个类

  • 【精】【PDF链接转图片】- Java用pdfbox将PDF的URL转换并压缩成图片，解决“口口口”乱码问题

    业务场景 做一个开电子发票的业务 中税返回我们一个pdf的url 这个url在web端是可以显示的 移动端 ios可以正常显示 安卓显示为是否要下载 产品邀请发票预览需让用户第一时间看到 不应该有下载的场景出现 解决方案 将PDF转化图片流

  • http://www.clamav.org/

    url http www clamav org url Clam AntiVirus is an open source GPL anti virus toolkit for UNIX designed especially for e m

  • 发送邮件验证码 php,PHP（ThinkPHP5.0） + PHPMailer 进行邮箱发送验证码

    GitHub下载最新版第三方类库PHPMailer php 第一步 html 打开网址https github com PHPMailer PHPMailer 下载PHPMailer PHPMailer 须要 PHP 的 sockets 扩

  • 柔性数组简介：

    个人主页 勇敢的小牛儿 推荐专栏 C语言知识点 座右铭 敢于尝试才有机会 今日鸡汤 我们应该尽可能的花精力 做到有多牛 而不是用很多无用的努力 让自己显得有多牛 一 柔性数组简介 1 柔性数组首先是一个数组 2 柔性数组之所以叫柔性数组是因

  • ATL 和 MFC 字符转换宏

    ATL 和 MFC 字符转换宏 ATL3 0 ATL3 0中的W2T T2W等一系列宏很方便 但一定要小心 它们从栈上分配内存 直到调用它的函数返回前 该内存不会被释放 如果在一个循环中 这类宏被你反复调用几万次时 你将不可避免地产生sta

  • ElementUi常用的属性及官方解释比较模糊的知识点

    1 Dialog对话框 1 close on click modal true 官方文档解释 是否可以通过点击 modal 关闭 Dialog 默认是true 其实它的意思就是点击空白处弹框可关闭 经过尝试这个空白处指的是弹框外的空白处 不

  • 【保姆级教程】Marktext配合Github图床使用

    写在前面 这些天在跟着李宏毅老师的网课进度 补一补机器学习和深度学习的相关内容 从头开始归档markdown文档手写笔记 由于之前大火的Typora笔记软件收费 推荐学生党使用免费开源的Marktext作为平替 下载链接如下 marktex

  • 大专生出身？mysql面试题常问

    正文 下文中截图来源于朋友一个pdf版本的面经 把所以知识点的答案整理了下来 耗费他至少1个月时间 在本文最后部分把这个pdf分享给大家 觉得有用的麻烦点赞关注走一波 谢谢 面经中有他的知识点的答案 如下图示例 非常详细 文末有领取方式 1

  • 支付宝碎屏险究竟是怎么回事？靠谱么？

    由于有很多人看这个文章 所以个人补充一些内容 1 支付宝碎屏险一次就是保一年的 只有支付方式为月付或者年付 连续包月是陷阱 无论你选什么套餐 在保险条款里面都是保12个月的 已经理赔的不允许退保 所以即使你已经理赔 人家不再给你修了 你也要

  • qDebug打印出来路径的时候遇到的问题

    具体参考博客 https blog csdn net u011283226 article details 101382747 当遇到路径打印的时候 正确的路径打印是 qDebug noquote lt lt qDebug lt lt di

  • 6-9.Vue-router之编程式导航

    Vue router 编程式导航 vue中实现导航可以由

  • 3D形状分割：在ShapeNet数据集上使用PointNet++进行3D形状分割任务

    在本篇博客中 我们将探讨如何使用PointNet 模型在ShapeNet数据集上进行3D形状分割任务 3D形状分割是计算机视觉和深度学习领域的一个重要研究方向 可以用于识别3D点云数据中的不同部分 PointNet 是一种基于点云数据的深度

  • OSI模型与TCP\IP协议

    目录 一 分层 1 1 分层原因 1 2 OSI七层模型 二 TCP IP 2 1 TCP IP协议族的组成 模型层 物理层 网络层 传输层 应用层 三 数据封装过程 五 PDU协议数据定义 六 设备与各层对应关系 七 各层间通信 一 分层

  • dos bat批量创建软链接

    windows 下 要将 train2017 val2017 两个目录下的图片并入一个目录 images 用 mklink 创建软链接 1 可以不用额外空间 win10 也可以写 sh 脚本用 ln s 但效果似乎同 copy 因为用 ln

  • uni-app实战教程

    一 准备 下载HBuilderX编辑器 前往下载 注册百度AI账号 创建应用获得Appid和Secret 前往注册 百度AI通用物体识别文档 前往查阅 Uni App文档 前往查阅 HTML5 文档 前往查阅 HTML5 文档 前往查阅 二

热门标签