Appcan使用Mob短信验证码

复制代码
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
    </head>
    <body class="um-vp bc-bg" ontouchstart>
        <div class="btn ub ub-ac bc-text-head ub-pc bc-btn"  id="btn1">
            初始化已完成
        </div>
        <br />
        <div class="sc-bg-active uinput ub ub-f1  bc-border uba">
            <input type="text" class="ub-f1" placeholder="输入手机号"id="phone">
        </div>
        <div class="btn ub ub-ac bc-text-head ub-pc bc-btn"  id="btn2">
            发送验证码
        </div>
        <br />
        <div class="sc-bg-active uinput ub ub-f1  bc-border uba">
            <input type="text" class="ub-f1" placeholder="填写验证码"id="yanzheng">
        </div>

        <div class="btn ub ub-ac bc-text-head ub-pc bc-btn"  id="btn3">
            提交验证码
        </div>

    </body>
    <script src="js/appcan.js"></script>
    <script src="js/main.js"></script>
    <script src="js/appcan.control.js"></script>
    </body>
    <script>
        appcan.ready(function() {
            var params = {
                "uexMobSMS_APPKey" : "2154a551b5a28",
                "uexMobSMS_APPSecret" : "a6d511b5e2cdf78537731e0b1a4ca20b"
            };
            uexMobSMS.init(JSON.stringify(params));
            $toast("初始化成功", 2000)
        });
        var phone = "";
        // appcan.button("#btn1", "ani-act", function() {
        // $toast("初始化成功", 2000)
        // var params = {
        // "uexMobSMS_APPKey" : "2154a551b5a28",
        // "uexMobSMS_APPSecret" : "a6d511b5e2cdf78537731e0b1a4ca20b"
        // };
        // uexMobSMS.init(JSON.stringify(params));
        // })

        appcan.button("#btn2", "ani-act", function() {
            phone = $('#phone').val();
            //alert(phone)
            var params = {
                "phoneNum" : phone,
                "countryCode" : "86"
            };
            uexMobSMS.sendCode(JSON.stringify(params));
            uexMobSMS.cbSendClick = function(data) {
                if (JSON.stringify(data)) {
                    $toast("验证码发送成功,请在120s内验证", 2000)
                } else {
                    $toast("验证码发送失败", 2000)
                }
            }
        })
        appcan.button("#btn3", "ani-act", function() {
            var yanzheng = $('#yanzheng').val();
            //alert(yanzheng + "===" + phone)
            var params = {
                "phoneNum" : phone,
                "countryCode" : "86",
                "validCode" : yanzheng
            };
            uexMobSMS.commitCode(JSON.stringify(params));
            uexMobSMS.cbCommitClick = function(data) {
                if (JSON.stringify(data)) {
                    $toast("验证成功", 2000)
                } else {
                    $toast("验证失败", 2000)
                }
            }
        })


    </script>
</html>
复制代码

插件收藏。。

posted @   百事没事  阅读(362)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示