uniapp+vant开发微信小程序——新建项目,安装vant weapp

2,128 阅读1分钟

以前使用uniapp开发APP一直搭配的是uView,但是在用vue做移动端开发时又搭着vant。这两个UI库感觉得都挺不错的,虽然外观朴素了些,但是功能还是够用的。

话说很久没用过uniapp了,这就来试试uniapp的vue3搭配vant,看看能碰撞出怎样的火花⚡️

vant weapp貌似没有List组件,不过没关系,列表我喜欢用mescroll,足够强大了。

  1. 新建uni-app项目,Vue版本选择3 image.png

  2. 安装vant/weapp

npm i @vant/weapp -S --production

image.png

  1. 在项目根目录下新建文件夹wxcomponents,在其下新建目录vant。

    在node_modules中找到下图对应位置,把dist下的文件都拷贝到刚才新建的wxcomponents/vant目录中。

image.png

  1. 在pages.json引入vant组件van-button

image.png 6. 在页面中使用van-button

    <van-button type="primary">van-button</van-button>
  1. 运行到微信小程序,查看页面

image.png

OK,一个简单的架子有了,明天可以愉快的开发页面了。

后续: 我觉得不太愉快,还是换回uview了 💔

使用uniapp开发安卓和IOS,尝试使用uni的vue3版本搭配vant4,可惜IOS模拟器动不动白屏,或者tabbar不显示。

为了稳定,换回了vue2+uView2,稳定交付才是最重要的。