【uniapp】【微信小程序】微信小程序报错集锦（一）

【uniapp】【微信小程序】微信小程序报错集锦（一）

错误一：

"errMsg":"hideTabBar:fail not TabBar page"
根因分析：
这种情况一般是在小程序中为了隐藏tabbar调用的，但是有些页面并没有tabbar展示，而此时调用该function会fail，如果没有fail函数，会直接抛出报错。

定位步骤：

• 全局搜索是否使用了hideTabBar函数
• 找到之后，添加fail和success函数

uni.hideTabBar({
	success: () => {
	},
	fail: () => {
		// 捕获报错，防止没有tabbar页面调用后控制台报错
	}
});

错误二：

errMsg: "canvasToTempFilePath:fail fail canvas is empty"

根因分析：
uni.canvasToTempFilePath触发了fail回调，报错信息是找不到canvas的信息。原因是我把这个功能放在了自定义组件里面，需要传入上下文信息。
信息来源博客

代码修复：

uni.canvasToTempFilePath({
	canvasId: 'poster',
	success: res => {
		// 在H5平台下，tempFilePath 为 base64
		this.downloadPic(res.tempFilePath);
	},
	fail: res => {
		console.log(res)
		uni.showToast({
			title:"下载海报失败",
			icon: 'fail'
		})
	}
}, this) //添加this指向

问题三：
可在浏览器打开此网页来下载文件
根因分析：
手机微信H5浏览器，通过传统的创造a超链接，触发点击进行下载是不允许的。这是为了提升用户体验，避免某些网页未经用户允许就下载未知图片。因此可以考虑通过用户主动长按图片进行图片保存。

超链接下载图片，这种方法在微信H5浏览器里面是下载不下来的。

// #ifdef H5
uni.showLoading({
  title: "下载中"
});

let oA = document.createElement("a");
oA.download = ''; // 设置下载的文件名，默认是'下载'
oA.href = imgUrl;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
uni.hideLoading();
// #endif

我的解决办法：
将下载图片按钮修改成提示长按图片保存，这只是一个提示，没有任何功能。

<!-- #ifdef H5 -->
<view v-if="isShowBtn('download')" class="btn linear-border">
	<u-icon name="download" :size="iconSize"></u-icon>
	长按图片保存
</view>
<!-- #endif -->

对于显示的图片，用户长按就会有弹窗，这种最容易解决，但是我这里有一种场景，就是需要下载海报，海报是用uniapp的canvas画的。这不是图片格式，怎么实现在微信手机浏览器长按保存图片，那就是利用uniapp的canvasToTempFilePath接口，将生成的base64图片编码放到image中显示，这样就能实现长按保存。

<!-- h5PosterSaveImg是图片的base64编码 -->
<u-mask :show='isShowPoster'>
	<view v-if="h5PosterSaveImg" >
		<image :src="h5PosterSaveImg" mode="widthFix"></image>
	</view>
	<canvas v-else canvas-id="poster" :disable-scroll="true" class="poster" :style="{width: canvas.width + 'px',
	height:canvas.height + 'px', 'margin-left': `calc((100vw - ${canvas.width}px)/2)` }"></canvas>
	<view class="flex-row flex-center mt-24">
		<view class="btn linear-border" style="width: 100px;" @click="cancelPoster">
			取消
		</view>
		<!-- #ifdef H5 -->
		<view 
			长按图片保存
		</view>
		<!-- #endif -->
	</view>
</u-mask>

uni.canvasToTempFilePath({
	canvasId: 'poster',
	success: res => {
		// 在H5平台下，tempFilePath 为 base64
		// #ifdef H5
		// 赋值base64
		this.h5PosterSaveImg = res.tempFilePath
		// #endif
	},
	fail: res => {
		console.log(res)
		uni.showToast({
			title: "下载海报失败",
			icon: 'fail'
		})
	}
})

但是还有一种情况，uview的swiper（u-swiper）组件，长按图片根本不触发保存图片的弹出菜单。最后我还是自己写了一个，有需要的自取。最终的显示效果：


实现代码：

如果对您有帮助的话，点个关注吧。有什么技术问题都能讨论。
如果想看我是怎么利用uniapp和uview实现开发一次，多端覆盖的，可以看这里：
https://ext.dcloud.net.cn/plugin?id=12603 觉得写的不错麻烦点个赞哦。