原生小程序页面js文件内使用VantUi Dialog.confirm
准备工作
先在本地小程序文件内引入vantui 引入vantui方法
小程序index.json 引入vant-dialog !!! 必须页面引入否则报错
常见报错
"usingComponents": {
"van-dialog": "../miniprogram_npm/@vant/weapp/dialog/index" // 相对路径
},
小程序index.wxml 引入vant-dialog !!! 必须页面引入否则报错
<van-dialog id="van-dialog" />
小程序 封装comfirmDialog.js
import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog'; // 相对路径
// 封装vantUI dialog.comfirm 弹窗 并进行页面跳转
// context需使用参数传递 否则报错
const comfirmDialog = (message="",context="",url="",navType="",title="温馨提示")=>{
Dialog.confirm({
title:title,
message:message,
selector:"#van-dialog",
context:context
}).then(() => {
if(url) {
switch (navType) {
case 1:
wx.switchTab({
url: url,
})
break;
case 2:
wx.redirectTo({
url: url,
})
break;
case 3:
wx.reLaunch({
url: url,
})
break;
case 4:
wx.navigateTo({
url: url,
})
break;
default:
break;
}
}else{
return; // 不跳转
}
}).catch(() => {
return; // 不做处理
})
}
export {
comfirmDialog
}
小程序index.js
import 引入封装组件
import { comfirmDialog } from "../../common/utils/comfirmDialog"; // 使用vantui dialog.confirm 封装弹窗 相对路径
页面请求回调
// this ---------------> context
comfirmDialog(res.message,this,`/pages/home/productdetails/productdetails?goods_id=${goods_id}`,4)