uni-app 踩坑指南

一、uni-app 微信小程序踩坑指南

1、uni-app 运行到微信小程序时是小游戏模式

uni-app 在首次配置小程序AppID时，如果是小游戏的AppID,在微信开发者工具中运行之后，再次更改成小程序的AppID后，微信开发者工具中还是显示的‘小游戏开发模式

解决方案：在微信开发者工具中，把相关小程序项目删除，再次重新编译就OK了
PS: uni-app仅支持微信小程序，不支持微信小游戏等。

2、微信小程序：bad attr data-event-opts with message

异常代码：

<template v-for="(item,index) in chassisList">
	<view :key="‘frog’+index" v-if="item.hasFrog"></view>
</template>

修复后代码：

<template v-for="(item,index) in chassisList">
	<view :key="‘item.id" v-if="item.hasFrog"></view>
</template>

ps:大概是微信小程序不支持复杂的js运算, :key="‘frog’+index" 需要改成 :key="‘item.id"，key中不能有运算

二、uni-app H5踩坑指南

1、uni-page-head、uni-tabbar-bottom H5端占位，其它端不占位问题

解决方案如下，在H5端设置 margin-top: -44px

<template>
	<view class="container"></view>
</template>
<style lang="scss" scoped>
.container {
		width: 100%;
		/* #ifdef H5 */
		height: calc(100vh - 94px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background-color: #00bae0;
		overflow: hidden;
	}
</style>