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

没有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>

style标签的变量

处理方式：尽量使用对象形式，不要用方法去计算属性，可以使用v-if做多条件的判断

部分图片在手机不能正常展示

处理方式：减少背景图使用，使用image标签代替

体验版使用请求失败的问题

处理方式：右上角菜单，打开开发调试，重新打开体验版

授权登录失败问题

处理方式：appkey和秘钥不对或不生效、数据库已缓存登录信息多次请求

webview下拉影响内部拖拽滑动问题

处理方式：在最外层使用@touchmove.prevent="() => {}"进行阻止行为