• 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>

    插件收藏。。

  • 相关阅读:
    InnoDB引擎面面观
    [读史思考]为何此大神可以同时进入文庙和武庙?
    [源码解析] 当 Java Stream 遇见 Flink
    Alink漫谈(十八) :源码解析 之 多列字符串编码MultiStringIndexer
    [源码解析] Flink UDAF 背后做了什么
    [业界方案] ClickHouse业界解决方案学习笔记
    Istio Routing 实践掌握virtualservice/gateway/destinationrule/AB版本发布/金丝雀发布
    树立个人品牌意识:从背景调查谈谈职业口碑的重要性
    Istio 生产环境用户流量接入方案
    故障管理:故障应急和故障复盘
  • 原文地址:https://www.cnblogs.com/1ming/p/7607013.html
Copyright © 2020-2023  润新知