小程序学习（七）：初次使用npm，安装vant测试小程序能否正常使用，傻瓜教学

重点，这篇博客不好用，我重新写了篇

小程序学习（15）：使用npm，以vant为例；解决安装完vant后一切正常，但是有的组件找不到，如grid宫格

原因：按照这个方法，安装的vant版本和网上的不符，会有些组件不能使用

1.安装npm，并切换npm的默认全局安装位置

这个不是本篇的重点，如果你在小黑框里敲

npm -v

报错npm不是内部命令，请先百度安装node.js
node.js中有npm

2.使用npm安装vant

我就是喜欢傻瓜教学，争取一步一截图，尽可能的对萌新友好，
我已经安装完成了，截图可能有些许不同，我会尽可能的详细说明的，

2.1打开小黑框

打开小程序（这里我是已经安装完成的）
版本管理=》终端打开

注：有的人是新建的小程序，第一次打开版本管理会有个什么初始Git库，跟着指示让做啥做啥就行，一般就是点一下

2.2在小黑框中新建package.json

截图：

在小黑框中输入

npm init -y

注：输入带有 -y 是按照默认新建package.json，相当于输入npm init后一路回车，这两个是一个效果

2.3.在新建了package.json后，就可以下载vant了

这个是小程序的截图

然后在硬盘打开
新建一个node_modules文件夹，这个是用来放下载后的包的

在看小黑框
使用命令进入这个文件夹

cd node_modules

开始下载vant组件库
使用官方的连接下载就好了
vant小程序UI组件官方

输入这段命令就行
注：我现在的版本是0.5.20

2.4小程序使用npm组件

现在是2019年9月5日 ，小程序已经可以直接使用npm了
点击上方的
工具=》构建npm
就会显示构建成功，
如果构建失败，一般是没有package.json这个文件的原因，看看根目录下有没有，
没有就再试试2.2

2.5这是成功后的截图

其中根目录中的node_modules文件夹不显示，但是我没有删除，

3.尝试使用vant，我写了一个底部弹出的选择器

3.1json文件

代码

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index",
    "van-picker": "/miniprogram_npm/vant-weapp/picker/index",
    "van-popup": "/miniprogram_npm/vant-weapp/popup/index"
  }
}

这里的路径一定要找好，要不然直接编译不了

3.2wxml文件

代码

<van-button type="primary" size="large" bind:click="aaa">{{aaa}}</van-button>
<van-popup show="{{ show }}"
            position="bottom"
            style="height: 20%">
  <van-picker
    show-toolbar
    title="选择器"
    columns="{{ columns }}"
    bind:cancel="onCancel"
    bind:confirm="onChange"
  />
</van-popup>

注：这个标签内样式在刚才发的官网中就可以看

3.3js文件

代码
这是data中的变量

aaa:'选择',
show:false,
columns:['啊','波','次','嘚'],

这是方法

  /**
   * 测试--vant的选择器
   * 时间：2019年9月5日 10:23:20
   */
  aaa(){
    console.log('弹出选择框', this.data.show)
    this.setData({
      show: !this.data.show
    })
  },
  onChange(e){
    console.log('进入vant选择器',e)
    this.setData({
      aaa:e.detail.value,
      show: false
    })
  },
  onCancel(){
    this.setData({
      show: false
    })
  },

方法对应功能
aaa=>底部弹出选择器；
onChange=>选择器点击确定；
onCancel=>选择器点击取消

4.完工

以后CSDN的博客可能写到少了，不是我转博客园了，只是这么写太耽搁时间了，
这些东西我就为了我以后查找方便，但是前几天下了有道云笔记，挺好使的，主要是快，
所以有些我感觉新奇的代码就直接记得笔记上了，就不额外那时间写博客了，但是很多我做的小东西，还是想写一点博客的
因为上面的代码量忒少，我这个还做修改，就没有传GitHub，