微信小程序之前端框架 Vant Weapp使用方法

安装Vant Weapp，使用npm
*先简单介绍一下什么是npm吧，在这以前，本人也不知道npm是什么，所以这里也是巩固一下知识。

1.为什么要使用npm init初始化项目

在node开发中使用npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。话不多说我们就直接开始进行操作。

2.执行npm init

执行npm init是需要在DOS窗口执行的，我们可以windows+r键来打开窗口，然后输入CMD执行，然后就可以打开DOS窗口了。打开窗口之后，在DOS窗口中进入自己项目所在的目录。

这里介绍完毕，往下进行，安装步骤。
传送门：Vant Weapp官网
至此，按照官网的文档进行使用步骤即可:-D。

以下是本人笔记，大神勿喷，仅供参考。

1、使用Total组件。
这里官方文档存在一个坑！坑！坑！，重要的事情说三遍。

引入：在app.json或index.json中引入组件

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

代码演示

以下为坑点，请使用者注意，引用此为官网中举例，
import Toast from 'path/to/@vant/weapp/dist/toast/toast';

在实际中应该以自己的真是路径为准，因为在用npm安装的使用时安装小程序的
根目录中，应该为下面的写法
//使用有赞的ui库，weapp的引用路径方法
///index.js写法
import Toast from '@vant/weapp/toast/toast';
Toast('我是提示文案，建议不超过十五字~');
///index.wxnl写法 
<van-toast id="van-toast" />

2、使用Uploader 文件上传

引入
在app.json或index.json中引入组件，默认为ES6版本，ES5引入方式参见快速上手。

"usingComponents": {
  "van-uploader": "@vant/weapp/uploader/index"
}
代码演示
基础用法
文件上传完毕后会触发after-read回调函数，获取到对应的文件的临时地址，
然后再使用wx.uploadFile将图片上传到远程服务器上。
.wxml
<van-uploader file-list="{{ fileList }}" bind:after-read="afterRead" deletable="{{ true }}" bind:delete="deleteImg" />

.js
data: {
    fileList: [  ],
  },
  //删除事件写法
deleteImg(event){
    var that=this;
    var index=event.detail.index;
    that.data.fileList.splice(index,1);
    that.setData({fileList: that.data.fileList})
  },
  //文件读取完成后事件
  afterRead(event) {
    const { file } = event.detail;
    const { fileList = [] } = this.data;
    fileList.push({ url: file.url, deletable: true, });
    this.setData({ fileList });
  }