【APICloud系列|29】dialogBox模块(对话框)的实现

2021年09月15日 阅读数:2
这篇文章主要向大家介绍【APICloud系列|29】dialogBox模块(对话框)的实现,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

导读:dialogBox 封装了十一种款式的对话框,每一种款式都提供一个接口来调用,开发者可按照各个接口的样式来自定义对话框上的文字、图片、图文等javascript

把 dialogBox 模块的 11 个样式分别实现个简单的效果,其中将 alert 方法作了两个样式,若是你以为我写的样式够丑,请不要喷我,由于我是程序猿[呵呵了],若是你接受了就直接用到你的项目,不然本身再根据官方的文档和结合本身的产品需求,来定义更多高大上的样式。css

接下来我拿几个我经常使用的方法给你们简单介绍下,其它的你们能够看看模块的视频效果之后,本身上手作作。html

  • alert()
     

这个方法算是系统的 alert 与 confirm 的结合,这之上还能够添加 icon。java

  • sendMessage()
     

顾名思义,此方法在 alert 的基础之上追加了一个对话框,会调用中能够取到输入的值。api

  • scene()
     

此方法是一个特定场景下的 UI 弹出层,它包含可设置场景图片、标题以及选项。微信

  • evaluation()
     

与 alert 相似,只不过将按钮的排版作了修改。app

  • raffle()
     

该方法算是 scene 与 alert 的结合,效果可见此模块视频演示。布局

  • receipt()
     

在不少场景中咱们就会有,好比一些简单到复杂的表单数据展现,一般这样的布局比较麻烦而繁琐。这个方法就是由此而生呀,简单配置下,就可以达到目的。ui

  • tips()
     

其实我以为这个方法除了和名字说的提示功能之外,还有 N 多的使用场景,因此你们别被方法的名称给固定了使用的范围。lua

  • actionMenu()
     

这个方法的 UI 与 shareAction 模块相似,差异就是这个方法并无实际的功能,不过一般状况下系统的不少功能并非咱们的产品想要的,咱们须要自定义 UI 和功能,因此这里这个方法就起了大做用。

以上全部方法,我也都只是简单的用了下,你们在使用此模块的时候仔细看看文档,毕竟是 UI 模块,又要作到自定义,因此字段什么的太多了,一不注意你就疏忽了什么。在使用模块时,任何一个按钮点击时都有返回对应的索引,而后咱们就能够根据索引去作本身的逻辑。

项目结构:

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget id="A6917801437242" version="0.0.1">
  <name>对话框的实现</name>
  <description></description>
  <author email="1978195254" href="https://blog.csdn.net/weixin_41937552">58DCDC</author>
  <content src="index.html"/>
  <preference name="pageBounce" value="false"/>
  <preference name="appBackground" value="rgba(0,0,0,0.0)"/>
  <preference name="windowBackground" value="rgba(0,0,0,0.0)"/>
  <preference name="frameBackgroundColor" value="rgba(0,0,0,0.0)"/>
  <preference name="hScrollBarEnabled" value="true"/>
  <preference name="vScrollBarEnabled" value="true"/>
  <preference name="autoLaunch" value="true"/>
  <preference name="fullScreen" value="false"/>
  <preference name="autoUpdate" value="true"/>
  <preference name="smartUpdate" value="false"/>
  <preference name="debug" value="true"/>
  <preference name="statusBarAppearance" value="true"/>
  <permission name="readPhoneState"/>
  <permission name="camera"/>
  <permission name="record"/>
  <permission name="location"/>
  <permission name="fileSystem"/>
  <permission name="internet"/>
  <permission name="bootCompleted"/>
  <permission name="hardware"/>
  <access origin="*"/>
</widget>

index.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <meta name="format-detection" content="tephone=no,email=no,date=no,address=no">
        <style type="text/css">
            html{ background-color: white; }
            header{  padding: 25px 0; }
            span {
                padding: 5px 15px;
                margin: 10px;
                display: inline-block;
                background-color: #e8e8e8;
            }
            .hover{ opacity: .4; }
        </style>
    </head>
    <body>
        <header>
            <h1>dialogBox</h1>
            <mark>
                使用前请详细阅读 文档 使用规则
            </mark>
        </header>
        <span tapmode="hover" onclick="dialogBox_alert1()"> dialogBox_alert1 </span>
        <span tapmode="hover" onclick="dialogBox_alert2()"> dialogBox_alert2 </span>
        <span tapmode="hover" onclick="dialogBox_sendMessage()"> dialogBox_sendMessage </span>
        <span tapmode="hover" onclick="dialogBox_scene()"> dialogBox_scene </span>
        <span tapmode="hover" onclick="dialogBox_evaluation()"> dialogBox_evaluation </span>
        <span tapmode="hover" onclick="dialogBox_raffle()"> dialogBox_raffle </span>
        <span tapmode="hover" onclick="dialogBox_taskPlan()"> dialogBox_taskPlan </span>
        <span tapmode="hover" onclick="dialogBox_receipt()"> dialogBox_receipt </span>
        <span tapmode="hover" onclick="dialogBox_tips()"> dialogBox_tips </span>
        <span tapmode="hover" onclick="dialogBox_discount()"> dialogBox_discount </span>
        <span tapmode="hover" onclick="dialogBox_share()"> dialogBox_share </span>
        <span tapmode="hover" onclick="dialogBox_actionMenu()"> dialogBox_actionMenu </span>
</body>
</html>

<script type="text/javascript">
    var dialogBox;
    apiready = function(){
        dialogBox = api.require('dialogBox');
    }

function dialogBox_alert1() {
    dialogBox.alert({
        texts : {
            title : ' 确认',
            content : '您是游客状态,是否登陆?',
            leftBtnTitle : '取消',
            rightBtnTitle : '登陆'
        },
        styles : {
            bg : '#fff',
            corner : 6,
            w : 260,
            title : {
                marginT : 20,
                icon : 'widget://image/gou.png',
                iconSize : 32,
                titleSize : 18,
                titleColor : '#000'
            },
            content : {
                color : '#000',
                size : 16
            },
            left : {
                marginB : 15,
                marginL : 40,
                w : 40,
                h : 35,
                corner : 2,
                color : "#000",
                bg : '#fff',
                size : 16
            },
            right : {
                marginB : 15,
                marginL : 88,
                w : 40,
                h : 35,
                corner : 2,
                color : "#000",
                bg : '#fff',
                size : 16
            }
        },
        tapClose : true
    }, function(ret) {
        if (ret.eventType == 'left') {
            dialogBox.close({
                dialogName: 'alert'
            });
        }
    });
}

function dialogBox_alert2() {
    dialogBox.alert({
        texts: {
            content: '您关闭了小助手的消息提醒,店主妹妹因联系不到您哭晕在厕所!',
            leftBtnTitle: '默默拒绝',
            rightBtnTitle: '去开提醒'
        },
        styles: {
            bg: '#fff',
            corner: 6,
            w: 280,
            content: {
                color: '#000',
                size: 18
            },
            left: {
                marginB: 15,
                marginL: 30,
                w: 100,
                h: 40,
                corner: 20,
                color: "#fff",
                bg: '#CDCDCD',
                size: 16
            },
            right: {
                marginB: 15,
                marginL: 20,
                w: 100,
                h: 40,
                corner: 20,
                color: "#fff",
                bg: '#C087C0',
                size: 16
            }
        },
        tapClose: true
    }, function(ret) {
        if (ret.eventType == 'left') {
            dialogBox.close({
                dialogName: 'alert'
            });
        }
    });
}

function dialogBox_sendMessage() {
    dialogBox.sendMessage({
        texts: {
            title: '  您的昵称:',
            hintText: '小明(点击此处修改昵称)',
            content: '亲,送你一个80元大礼包,请查收!退订请回复TD',
            leftBtnTitle: '取消',
            rightBtnTitle: '发送'
        },
        styles: {
            bg: '#fff',
            corner: 6,
            w: 260,
            title: {
                h: 40,
                show: {
                    marginL: 6,
                    titleSize: 14,
                    titleColor: '#000'
                },
                input: {
                    marginL: 6,
                    textSize: 14,
                    textColor: '#000'
                }
            },
            content: {
                color: '#000',
                size: 14
            },
            left: {
                marginB: 7,
                marginL: 40,
                w: 60,
                h: 35,
                corner: 2,
                bg: '#fff',
                color: "#000",
                size: 16
            },
            right: {
                marginB: 7,
                marginL: 55,
                w: 60,
                h: 35,
                corner: 2,
                bg: '#fff',
                color: "#000",
                size: 16
            }
        },
        tapClose: true
    }, function(ret) {
        if (ret.eventType == 'left') {
            dialogBox.close({
                dialogName: 'sendMessage'
            });
        }
    });
}

function dialogBox_scene() {
    dialogBox.scene({
        rect: {
            w: 260,
            h: 410
        },
        texts: {
            title: '猖狂的小偷',
            content: '火车售票处前的队伍蜿蜒纵横,旁边一小伙一边张望,一边将手伸向前面买票人的口袋,啊,是小偷!'
        },
        styles: {
            bg: '#fff',
            corner: 6,
            title: {
                bg: '#333',
                h: 44,
                size: 16,
                color: '#7E92DE'
            },
            sceneImg: {
                h: 133,
                path: 'widget://image/row.jpg'
            },
            content: {
                color: '#7E92DE',
                size: 14
            },
            cell: {
                bg: '#fff',
                h: 40,
                text: {
                    color: '#7E92DE',
                    size: 16
                }
            }
        },
        optionDatas: [{
            text: '一、拿出手机偷拍'
        }, {
            text: '二、见义勇为抓小偷'
        }, {
            text: '三、大声提醒买票的人'
        }],
        tapClose: true
    }, function(ret, err) {
        if (ret) {
            alert(JSON.stringify(ret));
        } else {
            alert(JSON.stringify(err));
        }
    });
}

function dialogBox_evaluation() {
    dialogBox.evaluation({
        styles: {
            bg: '#fff',
            corner: 6,
            w: 260,
            title: {
                marginT: 20,
                size: 16,
                color: '#000',
                bold: true
            },
            content: {
                marginT: 20,
                color: '#111',
                size: 14
            },
            buttons: [{
                marginB: 0,
                marginL: 0,
                w: 260,
                h: 35,
                bg: '#fff',
                color: '#007FFF',
                size: 16
            }, {
                marginB: 10,
                marginL: 0,
                w: 260,
                h: 35,
                bg: '#fff',
                color: '#007FFF',
                size: 16
            }]
        },
        texts: {
            title: '达令的老板娘撒娇喽',
            content: '客官,您留步,给我个好评好吗?嗯嗯!否则鹿董回来一辈子气,他,他打我~5555',
            buttons: [{
                text: '看到家暴,残忍的飘过~'
            }, {
                text: '这么可怜,就给个五星好评吧'
            }]
        },
        tapClose: true
    }, function(ret, err) {
        if (ret) {
            alert(JSON.stringify(ret));
        } else {
            alert(JSON.stringify(err));
        }
    });
}

function dialogBox_raffle() {
    dialogBox.raffle({
        texts: {
            title: '恭喜你',
            mainText: '抽中一个奖杯',
            subText: '这就中了,还有什么你作不到',
            leftTitle: '收入囊中',
            rightTitle: '告诉好友'
        },
        styles: {
            bg: '#fff',
            corner: 6,
            w: 260,
            title: {
                size: 18,
                color: '#000'
            },
            icon: {
                marginT: 20,
                w: 80,
                h: 80,
                iconPath: 'widget://image/bei.jpg'
            },
            main: {
                marginT: 20,
                color: '#636363',
                size: 16
            },
            sub: {
                marginT: 8,
                color: '#999999',
                size: 14
            },
            left: {
                marginB: 10,
                marginL: 8,
                w: 90,
                h: 35,
                corner: 2,
                bg: '#fff',
                color: '#007FFF',
                size: 14
            },
            right: {
                marginB: 10,
                marginL: 62,
                w: 90,
                h: 35,
                corner: 2,
                bg: '#fff',
                color: '#007FFF',
                size: 14
            }
        },
        tapClose: true
    }, function(ret, err) {
        if (ret) {
            alert(JSON.stringify(ret));
        } else {
            alert(JSON.stringify(err));
        }
    });
}

function dialogBox_taskPlan() {
    dialogBox.taskPlan({
        rect: {
            w: 280
        },
        texts: {
            mainTitle: '昨天玩的不够努力哦',
            subTitle: '今天没有得到任务次数奖励呢',
            content: [{
                text: '今日赚猫钞任务总次数:3次'
            }, {
                text: '3次(基础)+ 0次(奖励)'
            }],
            btnTitle: '开始作任务'
        },
        styles: {
            bg: '#fff',
            corner: 6,
            main: {
                marginT: 20,
                color: '#636363',
                size: 18,
                bold: true,
            },
            sub: {
                marginT: 8,
                color: '#999999',
                size: 16,
            },
            content: [{
                bg: '#FFD249',
                marginT: 10,
                marginL: 16,
                w: 250,
                h: 30,
                align: 'center',
                color: '#BC6504',
                size: 17
            }, {
                bg: '#FFEABF',
                marginT: 0,
                marginL: 16,
                w: 250,
                h: 40,
                align: 'center',
                color: '#EDB56A',
                size: 16
            }],
            ok: {
                marginB: 10,
                marginL: 16,
                w: 250,
                h: 44,
                bg: '#ED1C43',
                color: '#FFF',
                size: 16
            }
        },
        tapClose: true
    }, function(ret) {
        if (ret.eventType == 'ok') {
            dialogBox.close({
                dialogName: 'taskPlan'
            });
        }
    });
}

function dialogBox_receipt() {
    dialogBox.receipt({
        rect: {
            w: 300,
            h: 380
        },
        items: [{
            key: '起步价',
            value: '0.00'
        }, {
            key: '4.23千米',
            value: '6.37'
        }, {
            key: '15.58分钟',
            value: '3.9'
        }, {
            key: '小计',
            value: '¥10.27'
        }, {
            key: '优惠',
            value: '(3.49)'
        }, {
            key: '已收费',
            value: ''
        }, {
            key: '3484549@qq.com',
            value: '¥6.78'
        }],
        texts: {
            title: '人民优步 + 收据',
            cancel: 'CLOSE'
        },
        styles: {
            bg: '#FFF',
            corner: 6,
            title: {
                textColor: '#000',
                textSize: 18,
                marginT: 10
            },
            topBorder: {
                borderColor: '#000',
                borderWidth: 2,
                marginT: 20
            },
            listHeight: 270,
            item: {
                textColor: '#000',
                textSize: 14,
                marginL: 10,
                marginT: 15,
                marginB: 5,
                bgColor: '#FFF'
            },
            bottomBorder: {
                borderColor: '#000',
                borderWidth: 2,
            },
            cancel: {
                textSize: 18,
                textColor: '#000',
                marginT: 7,
                highlight: '#fff'
            }
        },
        tapClose: true
    }, function(ret, err) {
        if (ret.eventType == 'cancel') {
            dialogBox.close({
                dialogName: 'receipt'
            });
        }
    });
}

function dialogBox_tips() {
    dialogBox.tips({
        rect: {
            w: 300
        },
        texts: {
            title: '3天免单上班的秘诀...',
            content: '优步全新乘客邀请计划限时上线!每成功邀请一个新小伙伴首次使用优步,双方帐户均享3次免费行程(每次最高减免10元,中国大陆适用)'
        },
        buttons: [{
            normal: 'widget://image/weibo.png',
            text: '微博'
        }, {
            normal: 'widget://image/mes.png',
            text: '短信'
        }, {
            normal: 'widget://image/em.png',
            text: '邮箱'
        }],
        styles: {
            bg: '#FFF',
            corner: 6,
            topImage: {
                path: 'widget://image/car.png',
                w: 300,
                h: 150
            },
            title: {
                color: '#000',
                size: 18,
                marginT: 35
            },
            content: {
                color: '#000',
                size: 15,
                marginT: 15
            },
            border: {
                color: '#eee',
                width: 2,
                marginT: 10
            },
            buttons: [{
                iconSize: 32,
                textColor: '#000',
                textSize: 12,
                marginT: 15
            }, {
                iconSize: 32,
                textColor: '#000',
                textSize: 12,
                marginT: 15
            }, {
                iconSize: 32,
                textColor: '#000',
                textSize: 12,
                marginT: 15
            }]
        },
        tapClose: true
    }, function(ret) {
        alert(JSON.stringify(ret));
    });
}

function dialogBox_discount() {
    dialogBox.discount({
        rect: {
            w: 280,
            h: 335
        },
        styles: {
            bg: '#fff',
            corner: 6,
            image: {
                path: 'widget://image/dis.jpg',
                marginB: 120
            },
            cancel: {
                icon: 'widget://image/del.png',
                marginB: 40,
                w: 30,
                h: 30
            }
        },
        tapClose: true
    }, function(ret) {
        if (ret.eventType == 'cancel') {
            dialogBox.close({
                dialogName: 'discount'
            });
        }
    });
}

function dialogBox_share() {
    dialogBox.share({
        rect: {
            w: 300,
            h: 300
        },
        items: [{
            text: '微信朋友圈',
            icon: 'widget://image/friend.png'
        }, {
            text: '微信好友',
            icon: 'widget://image/weifriend.png'
        }, {
            text: '微博',
            icon: 'widget://image/weibo64.png'
        }, {
            text: 'QQ好友',
            icon: 'widget://image/QQ.png'
        }, {
            text: 'QQ空间',
            icon: 'widget://image/Qzone.png'
        }, {
            text: '复制连接',
            icon: 'widget://image/copy.png'
        }],
        styles: {
            bg: '#FFF',
            corner: 6,
            column: 3,
            horizontalSpace: 32,
            verticalSpace: 32,
            itemText: {
                color: '#000',
                size: 15,
                marginT: 20
            },
            itemIcon: {
                size: 54
            }
        },
        tapClose: true
    }, function(ret) {
        alert(JSON.stringify(ret));
    });
}   

function dialogBox_actionMenu() {
    dialogBox.actionMenu({
        rect: {
            h: 200
        },
        texts: {
            cancel: '取消'
        },
        items: [{
            text: '微信朋友圈',
            icon: 'widget://image/friend.png'
        }, {
            text: '微信好友',
            icon: 'widget://image/weifriend.png'
        }, {
            text: '微博',
            icon: 'widget://image/weibo64.png'
        }, {
            text: 'QQ好友',
            icon: 'widget://image/QQ.png'
        }, {
            text: 'QQ空间',
            icon: 'widget://image/Qzone.png'
        }, {
            text: '复制连接',
            icon: 'widget://image/copy.png'
        }],
        styles: {
            bg: '#FFF',
            corner: 6,
            column: 4,
            itemText: {
                color: '#000',
                size: 14,
                marginT: 10
            },
            itemIcon: {
                size: 54
            },
            cancel: {
                bg: '#fff',
                color: '#333',
                h: 55,
                size: 14
            }
        },
        tapClose: true
    }, function(ret) {
        alert(JSON.stringify(ret));
    });
}
</script>

 完整代码下载地址:https://download.csdn.net/download/weixin_41937552/13993289