【微信小程序】使用vant组件库(count-down)实现倒计时

本次实现使用的是微信开发工具。

引入vant组件库

1. 初始化package.json

   npm init -y
   

2. 利用npm安装vant组件库

   npm i @vant/weapp -S --production
   

3. 删除微信样式
   删除app.json中的”style”:”v2”，以防两种样式冲突。
4. 修改project.config.json
   找到setting属性，修改成

   "packNpmManually":true,
   "packNpmRelationList":[
   	{
        
   		"packageJsonPath":"./package.json",
   		"miniprogramNpmDistDir":"./"
   	}
   ]
   

5. 构建npm
   点击工具，选择构建npm，生成miniprogram_npm文件夹。
6. 引入
   在app.json中写入，

   "usingComponents":{
        
   "van-count-down":"@vant/weapp/van-count-down/index"
   }
   

7. 使用

   <van-count-down></van-count-down>
   

count-down组件用法

1. 参考CountDown倒计时官方文档
2. 本次使用属性有time、use-slot，使用的事件有change。
   2.1 time为倒计时的总时长，按照项目需要获取到总时长并赋值给time，单位是毫秒。
   2.2 use-slot需要结合事件change，通过bind:change获取timeData对象，自行书写页面想要展示的倒计时内容&#x