许久许久没有更新了,没办法项目写不完,空闲时间只想休息。。
临时更新是因为今天碰到一个vant2插件问题,浪费了我整整一个小时啊。。。为了记住这个坑,特意花点时间记一下。
首先根据官方原文
全局引入
"usingComponents":{"van-area":"@vant/weapp/area/index"}
然后直接使用
<van-area area-list="{{ areaList }}" />
这里没问题,还是原汁原味,然后关于这个arealist就出了问题,我相信大家引用这个组件都是不愿意写一堆省市区数据,那么引入他官方的数据就很有必要了,我们附上他的官方文档方法:
@vant/area-data
Vant 官方提供了一份默认的省市区数据,可以通过@vant/area-data引入。
yarn add @vant/area-data
引入
import { areaList } from '@vant/area-data';Page({ data: { areaList, },});
这里就出了问题,显示MiniProgramError @vant/area-data,我是小白,我第一个反应是woc路径错误。改了许久我寻思好像不是啊,那哪除了问题啊。重申一遍我是小白,第二个反应就是百度,找了半个多小时没找着有用的东西。但是,功夫不负有心人,终于找到一个类似的方法,虽然没有解释原因,但也提供了方法。
我们在已经下载好的area-data里,把index.esm.mjs文件拷出来,然后反手炸了文件夹(删除)。然后我们打开终端,输入
npmiarea-data@3.1.2
静静等待(这个有点慢,反正我等了半天),ok以后我们在node-module里找到area-data,把拷出来的文件粘贴进去,改名成xxx.js(我是改成了data.js),我记得下载好的文件夹里好像也有哥data.js来着,不用管直接覆盖。这里我们就可以把文件夹之家剪切回我们的miniprogram_npm/@vant下面,然后更改引用路径
import{ areaList }from'../../miniprogram_npm/@vant/area-data/data';
这时候报错就木有了,唉。所以说啊官方文档也不一定全是对的,真的难顶。这里再贴一下原作者的帖子,毕竟我是看了人家的方法:vant-weapp Area 省市区选择的使用及遇到的坑_liuye066的博客-CSDN博客_vant省市区选择