小程序踩坑2——vantweapp引入notify等组件报错“is not defined”或“‘selectComponent‘ of undefined”

vantweapp有些组件在json文件中引入后，还要在js文件中配置引入路径，但是官方给的路径是一个例子，用的时候要改成自己本地的绝对路径。下面用notify组件为例说一下整个流程：

1、首先要在app.json或者你要用的页面json里引入notify组件

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

2、在页面的js文件中引入notify

官方给的是：

import Notify from 'path/to/@vant/weapp/dist/notify/notify';

实际我们用的时候要这样写：

//引入notify组件js
// import Notify from 'path/to/@vant/weapp/dist/notify/notify'; //错误的
// import Notify from '../../node_modules/@vant/weapp/dist/notify/notify'; //错误的
import Notify from '../../miniprogram_npm/@vant/weapp/notify/notify'; //正确的

这里要注意引入的路径文件夹是①，不是②

3、在要用到notify组件的页面wxml中添加notify节点，写在什么位置没啥要求

<!-- 在页面内添加对应的节点 -->
<van-notify id="van-notify" />

 4、在js文件中根据需要写方法调用通知就行了，可以参考官方给的教程，也可以看下我的代码示例。Vant Weapp - 轻量、可靠的小程序 UI 组件库

index.wxml

<!--index.wxml-->
<view class="container">
  <van-notify id="van-notify" />


  <van-button type="primary" bindtap="testTap">主要按钮</van-button>
</view>

index.js

// index.js
// 获取应用实例
const app = getApp()
//引入notify组件js
// import Notify from 'path/to/@vant/weapp/dist/notify/notify'; //错误的
// import Notify from '../../node_modules/@vant/weapp/dist/notify/notify'; //错误的
import Notify from '../../miniprogram_npm/@vant/weapp/notify/notify'; //正确的
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
  },

  //notify提示
  testTap(){
    console.log('123');
    Notify({ type: 'primary', message: '通知内容' });
  },

  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})