关于对uniapp打包到微信小程序问题总结

侠宁

已于 2023-05-31 11:09:08 修改

阅读量777

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序 uni-app 小程序

于 2023-04-13 10:15:28 首次发布

本文链接：https://blog.youkuaiyun.com/ReXplan/article/details/130113096

文章列举了小程序开发中遇到的一些问题及解决方案，包括app.json缺失、大canvas图像生成失败、临时路径500错误、调试工具显示异常、全面屏底部安全区域适配、样式变量处理、图片展示问题、体验版请求失败、授权登录失败以及webview内拖动冲突等，并提供了相应的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有app.json

处理方式：清楚编译缓存，然后重新打开这个项目

canvas绘图太大生成图片失败

处理方式：降低清晰度，调整宽高比

canvas绘图得到的临时路径报500

处理方式：重新打开这个项目

调试工具出现白色框框

处理方式：清理缓存，重新打开这个项目

全面屏底部安全区域问题

处理方式：使用有空间占位的元素作为底部展示

<template>
	<view>
		<view :style="{ background, boxShadow, zIndex }" class="fixed-container">
			<slot></slot>
			<view v-if="safeBottom" class="safe-bottom-zoom"></view>
		</view>
		
		<view :style="{ height: height + 'px' }"></view>
	</view>
</template>

<script>
	export default {
		props: {
			safeBottom: {
				default: true
			},
			background: {
				default: '#fff'
			},
			boxShadow: {
				default: '0 -2rpx 12rpx 2rpx rgba(88,88,88,0.1)'
			},
			zIndex: {
				default: '10201'
			}
		},
		data() {
			return {
				height: 0,
				timer: null
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.initData()
			})
		},
		methods: {
			initData() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					clearTimeout(this.timer)
					let query = uni.createSelectorQuery().in(this);
					let dom = query.select('.fixed-container')
					dom.fields({ size: true }, (res) => {
						let height = res && res.height || 0
						this.$set(this, 'height', height)
					}).exec()
				}, 100)
			}
		}
	}
</script>

<style scoped lang="scss">
	.fixed-container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		box-sizing: content-box;
	}
	
	.safe-bottom-zoom {
		width: 100%;
		height: constant(safe-area-inset-bottom);
		height: env(safe-area-inset-bottom);
	}
</style>