uni-app踩坑记

GA莹莹子

已于 2023-09-21 16:54:39 修改

阅读量1.7k

点赞数

文章标签： uni-app

于 2023-07-27 16:05:42 首次发布

本文链接：https://blog.csdn.net/qq_37012533/article/details/131962086

版权

打包h5配置域名后页面一直报错404：

在manifest.json中配置域名
![在这里插入图片描述](https://img-blog.csdnimg.cn/25ed5e7c1268437f98d4dfe8a2e1f1c1.png
解决：
配置完成后无论是测试环境还是正式环境都带上/mobile/

如何引入调试工具erada:

在默认的index.html中直接引入erada，页面样式会整个错乱，解决方案就是引入官方的index.html模板，再到上面引入外部JS

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<!-- 引入eruda -->
		<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
		<script>eruda.init();</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

// 在index.html中引入
<!-- 引入eruda -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

最重要的一步是在manifest.json中配置路径
在这里插入图片描述

表单校验出现：提交的字段[‘xx’]在数据库中不存在

原因：
uni-forms-item上直接写上v-if

解决：
不要把v-if直接写在uni-forms-item标签上，可以在这上面包一层view，并将v-if写在view上

uni-file-picker上传图片传给后端，却无法回显

原因：
a、blob格式是临时路径，无法回显
b、图片字段没有按照官方文档的格式写

1、上传图片

// 上传文件接口封装
const httpUploadFile = (api, imgUrl) => {
	return new Promise((resolve, reject) => {
		uni.showLoading({ title: '加载中~' });
		uni.uploadFile({
			url: BASE_URL + api,
			name: 'file',
			filePath: imgUrl,
			formData: {
					module: 'test'  // 图片地址上会加个/test/
			},
			header: {
				
			},
			success: (response) => {
					resolve(response.data)
				} else{
					resolve(response.data)
				}
			},
			fail: (error) => {
				uni.showModal({ title: '提示', content: '图片上传失败：' + error, showCancel: false });
				reject(error)
			},
			complete: () => {
				uni.hideLoading();
			}
		});
	})
}

// 调用接口
export function uploadFile(imgUrl) {
	return httpUploadFile('xxxxxx', imgUrl)
}

// 选择文件上传
select(type, e){
	let imageUrl= '';
	// 获取图片临时路径，此为blob格式，无法回显
	imageUrl= e.tempFilePaths[0];
	this._uploadFile(imageUrl);
},
// 上传到远程地址
_uploadFile(imgUrl){
	uploadFile(imgUrl).then(response => {
			this.form.imageUrl = response.SavePath;  // blob格式转化为http格式
	})
}

2、图片回显组件<uni-file-picker>
v-model/value格式
三个属性必填，否则影响组件回显

[
	{
		"name":"file.txt",
		"extname":"txt",
		"url":"https://xxxx",
		// ...
	}
]

h5刷新后无法回退到上一页

原因：
页面刷新之后路由栈丢失，无法返回指定的上一个界面
解决：

toBack() {
	let pages = getCurrentPages()
	if (pages && pages.length > 1) {
	    uni.navigateBack()
	} else {
	    history.back()
	}
}

用history.back返回的时候，可以用uni.setStorage和uni.getStorageSync来传参和接收参数

uni-compox不太好用

1.点击有值的下拉框只能展示一个数值，显示不了全部；
2.收起键盘时下拉框也跟着消失，体验不好，解决方法就是把源码的blur事件去掉

uni.uploadFile上传压缩后的Blob图片失败？

uni-file-picker选择Blob格式图片后直接上传给后端，是没问题的，但是经过canvas压缩后的Blob图片传给后端则不会返回.png后缀，导致图片异常

解决：将Blob转化成base64格式传给后端，图片就会带上后缀并显示正常

GA莹莹子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uni-app踩坑记

在默认的index.html中直接引入erada，页面样式会整个错乱，解决方案就是引入官方的index.html模板，再到上面引入外部JS。不要把v-if直接写在uni-forms-item标签上，可以在这上面包一层view，并将v-if写在view上。配置完成后无论是测试环境还是正式环境都带上/mobile/，否则会报错404。最重要的一步是在manifest.json中配置路径。在manifest.json中配置域名。
复制链接

扫一扫