uniapp开发微信小程序的坑（持续更新）

问题场景：vant Weapp + vue2 + uniapp

如果使用的是 微信开发者工具 展示页面，使用编辑器（vscode/webstorm）编辑代码，可能会遇到编译错误，这个时候彻底关闭微信开发者工具可以解决大部分看不懂的问题（编译错误可能很频繁）

---

van-imag

问题: van-image 在页面中使用后，会有高度问题，因为原生的van-image的display不是块级元素，所以要在App.vue或公共css中修改

解决方法

van-image {
  display: block; // 或者 display: flex;
}

.van-image {
  width: 100%;
  height: 100%;
}

---

van-field（问题最多，使用最频繁）

van-field在使用中 使用 :value 和 @change 时，避免绑定对象，

例如：

// 这种写法可能会失效
<van-field
	:value="info.name"
	@change="info.name = $event.detail"
></van-field>

解决方法

如果要使用对象中的值可以使用计算属性来赋值

computed: {
	name: this.info.name,
},

<template>
	<van-field
		:value="name"
		@change="info.name = $event.detail"
	></van-field>
</template>

---

van-calendar

注意事项：要注意日历组件在选择时间区间时，时间跨度不能太大，1年内最好，如果时间跨度太大，小程序会崩溃，在开发的时候，开发者工具就会罢工，所以就不说上线了，

解决方法

可以使用 van-datetime-picker 替代，只是要注意开始时间和结束时间，可以使用时间戳规范结束时间的选择

---

van-tabs

问题：底部条位置错误

原因就是active的默认值跟第一个tab的name值不一致，要完全一样！

解决方法

active: 1, // 数字1
<van-tab title="张三" name="1"></van-tab>

这个时候的name 其实是字符串，看似都是1，但一个是数字一个是字符串。
所以改为：

active: 1, // 数字1
<van-tab title="张三" :name="1"></van-tab>

或参照官网：

一定要注意值要一致，数据类型也要一致

---

van-popup

van-popup 会有滚动穿透的问题，如popup弹出后，还是可以滑动页面中的列表（如有），不过点击popup外的话，是不会有问题的，因为有遮罩层的“保护”

以下是官网的截图

这里官网说了，因为小程序自身的原因，还是会有问题，所以文档中的这个属性，基本没用

解决方法
暂无