阐述
项目中使用vantWeapp的组件,但是要用到组件中的“Dialog 弹出框”,提示确认取消等操作,但是发现每个页面都需要引用一样的代码,代码冗余量太大,想着就把它抽离到类里面,这样直接调用即可。下面看下具体的抽离过程以及遇到的坑!
一、提示类的代码
1,GetErrorMessage.js
- 类文件根据自己的项目结构存放。
import Dialog from '../miniprogram_npm/@vant/weapp/dist/dialog/dialog'
/**
* 提示错误信息类
*
* @Author <winner443@163.com>
* @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组件
<!-- 插件提示模态框,无需加样式 -->
<van-dialog id="van-dialog" />
<!-- 插件提示模态框,无需加样式 -->
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,这个时候即可正常使用啦,其他的参数均为业务参数。可删除