您的位置:首页 > 新闻动态 > 技术文章
2023-12-11

uniap app端使用plus创建webview方法,支持阿里云验证码

 

uniap app端使用plus创建web-view方法,支持阿里云验证码

 

 

appCreateVerify() {

            // 阿里云验证码 App打开本地verify页面(uni-app本地html存放在根目录/hybrid/html中)

            if (this.wv) {

                return this.wv.show()

            }

            this.wv = plus.webview.create('', 'custom-webview', {

                'uni-app': 'none',

                background: 'transparent',

                webviewBGTransparent: true

            }, {

                appkey: "xxxxxxxxxxxxxx",

                scene: "nc_other_app",

                verifyTitle: this.lang.verifyTitle,

                verifyTips: this.lang.verifyTips

            })

            this.wv.loadURL('/hybrid/html/app/awscVerify.html')

            const currentWebview = this.$scope.$getAppWebview()

            // 此处监听uni.postMessage传递参数

            plus.globalEvent.addEventListener('plusMessage', msg => {

                const result = msg.data.args.data

                if(result.name == 'postMessage'){

                    this.activateCard(result.arg)

                }

            })

            currentWebview.append(this.wv)

        },

 

 html页面内容

 

<html lang="en">

<head>

    <meta charset="utf-8" />

    <script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>

    <!-- uni 的 SDK -->

    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" />

    <style>

        html,body{

            margin: 0;

            padding: 0;

            background: transparent;

            text-align: center;

            font-family:"PingFangSC-Regular","PingFang SC";

            font-size: 15px;

        }

        .verify-container {

            position: fixed;

            left: 0;

            right: 0;

            bottom: 0;

            top: 0;

            background: rgba(0, 0, 0, .5);

            display: flex;

            justify-content: center;

            align-content: center;

        }

        .popup-wrapper {

            position: absolute;

            top: 50%;

            left: 5%;

            right: 5%;

            height: 180px;

            margin-top: -90px;

            background: #FFFFFF;

            border-radius: 10px;

            padding: 0 20px;

            box-sizing: border-box;

        }

        .popup-title{

            font-size: 16px;

            font-weight: bold;

            border-bottom: 1px solid #efefef;

            padding: 12px 0;

            text-align: center;

        }

        .popup-tips{

            text-align: center;

            margin-top: 20px;

        }

        .popup-content {

            box-sizing: border-box;

            margin-top: 20px;

            text-align: center;

            width: 100%;

            display: flex;

            justify-content: center;

            align-content: center;

        }

        .nc-container{

            width: 75vw !important;

        }

    </style>

</head>

<body>

<div class="verify-container">

    <div class="popup-wrapper">

        <div class="popup-title" id="verifyTitle"></div>

        <div class="popup-tips" id="verifyTips"></div>

        <div class="popup-content">

            <div class="nc-container" id="nc"></div>

        </div>

    </div>

</div>

</body>

</html>

<script>

    document.addEventListener('plusready', function() {

        setTimeout(()=>{

            var wv = plus.webview.currentWebview()

            document.getElementById("verifyTitle").innerText = wv.verifyTitle

            document.getElementById("verifyTips").innerText = wv.verifyTips

            // 阿里云滑动验证

            AWSC.use("nc", function (state, module) {

                // 初始化

                window.nc = module.init({

                    // 应用类型标识。它和使用场景标识(scene字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值,请务必正确填写。

                    appkey: wv.appkey,

                    //使用场景标识。它和应用类型标识(appkey字段)一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值,请务必正确填写。

                    scene: wv.scene,

                    // 声明滑动验证需要渲染的目标ID。

                    renderTo: "nc",

                    //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID(sessionId)、签名串(sig)、请求唯一标识(token)字段记录下来,随业务请求一同发送至您的服务端调用验签。

                    success: function (data) {

                        uni.postMessage({

                            data

                        })

                        window.nc.reset()

                        wv.hide()

                    },

                    // 滑动验证失败时触发该回调参数。

                    fail: function (failCode) {

                        console.log(failCode)

                    },

                    // 验证码加载出现异常时触发该回调参数。

                    error: function (errorCode) {

                        console.log(errorCode)

                    }

                });

            })

        },100)

    })

</script>

 

 

 


下一篇:返回列表
上一篇:javascripts使用loadedmetadata获取视频文件的长宽比

© 2010-2020 Beasure本硕科技. All Right Reserved. 备案号:粤ICP备14074318号