小程序dialog ，警告：未找到 van-dialog 节点，请确认 selector 及 context 是否正确

阐述

项目中使用vantWeapp的组件，但是要用到组件中的“Dialog 弹出框”，提示确认取消等操作，但是发现每个页面都需要引用一样的代码，代码冗余量太大，想着就把它抽离到类里面，这样直接调用即可。下面看下具体的抽离过程以及遇到的坑！

一、提示类的代码

1，GetErrorMessage.js

• 类文件根据自己的项目结构存放。

import Dialog from '../miniprogram_npm/@vant/weapp/dist/dialog/dialog'
/**
 * 提示错误信息类
 *  
 * @Author 
 * @Date 20200422
*/
class GetErrorMessage{
   /*  constructor(message='温馨提示', url='',title='',skipForm=1){
        this.message = message;
        this.url = url;
        this.title = title;
        this.skipForm = skipForm;
    } */
    
    /**提示错误信息类
     * 
     * @param message 错误信息填写
     * @param url 跳转ulr，默认为空，不跳转。
     * @param title vant提示model对话框
     * @skipForm 跳转方式，skipForm=1，默认跳转保留页面栈，skipForm=2，不保留页面栈
     * @param content 选择器的选择范围
    */
    getErrorMsgs(message='', context='', url='', skipForm=1, title='温馨提示'){
        Dialog.confirm({
        context:context,//代表的当前页面
        selector:"#van-dialog",//选择器
        title: title,
        message: message
        }).then(() => {
            // on confirm
            console.log('我点击了确认');
            if(url){
                //判断跳转的方式
                switch(skipForm){
                    case 1:
                        wx.navigateTo({
                            url: url
                        });
                    case 2:
                        wx.redirectTo({
                            url: url
                        }); 
                    default:
                        return false;
                }
            }else{
                return false;//不跳转
            }
        }).catch(() => {
            // on cancel
            console.log('我点击了取消了,关闭model窗口');
        });
    }
}
export{
    GetErrorMessage
}

1.1，注意：GetErrorMessage类的参数需要注意的地方

参数名	参数值	备注
context	this	在文档中这个参数为this，但是this不能在这里写死，必须当参数传入进来，因为this代表的是自身，如果在这写死，调用的时候则会报错：“未找到 van-dialog 节点，请确认 selector 及 context 是否正确” 所以在调用的时候传入this，就正常使用了。
…	…	类中的其他的参数均为业务参数，可删除。

2，在代码中调用GetErrorMessage

2.1，wxml页面

业务代码，再次省略。以下代码必须有，否则不能使用vant组件

  

2.2，index2.json页面，根据自己的路径引用组件

{
  "usingComponents": {
    "i-icon": "../../../dist/icon/index",
    "i-modal": "../../../dist/modal/index",
    "van-dialog": "../../../miniprogram_npm/@vant/weapp/dist/dialog/index"
  },

2.3，index2.js关键的代码

import {GetErrorMessage} from '../../../utils/GetErrorMessage';
//实例化提示语类
let geterrormessage = new GetErrorMessage();//写在外面便于全局使用。
Page({
	 btn(){
      let url = '/pages/login/login';
      geterrormessage.getErrorMsgs('是否退出吗',this,url,2)
  },
})

注意：在调用getErrorMsgs我们看到传入的this，这个时候即可正常使用啦，其他的参数均为业务参数。可删除

完成的效果图