五叶神
五叶神
  • 发布:2021-05-25 09:36
  • 更新:2024-12-23 10:41
  • 阅读:5214

【经验分享】完美解决uni-app编译APP-PLUS 使用阿里云验证码(加载外部js使用滑动验证、图形验证)

分类:uni-app

先上最终效果图,H5 与 App对比:




由于uni-app除H5外 均不支持document、window等浏览器的js API,所以阿里云的验证码https://g.alicdn.com/AWSC/AWSC/awsc.js(dom操作) 无法在App中直接使用。

故改为web-view加载本地html文件做滑动校验操作,通过验证将sessionId token等参数传回vue页面,最终效果与h5一模一样,用户不会感知是web-view加载的验证。

vue 页面代码:


// 点击发送验证码判断是否为App  
// #ifdef APP-PLUS  
return this.appCreateVerify()  
// #endif  

// plus创建web-view方法  
appCreateVerify() {  
    // 阿里云验证码 App打开本地verify页面(uni-app本地html存放在根目录/hybrid/html中)  
    if (wv) {  
        return wv.show()  
    }  
    wv = plus.webview.create('', 'custom-webview', {  
        'uni-app': 'none',  
        background: 'transparent',  
        webviewBGTransparent: true  
    }, {  
        appkey: this.nc.appkey,  
        scene: this.nc.scene  
    })  
    wv.loadURL('/hybrid/html/awsc-verify.html')  
    const currentWebview = this.$scope.$getAppWebview()  
        // 此处监听uni.postMessage传递参数  
    plus.globalEvent.addEventListener('plusMessage', msg => {  
        const result = msg.data.args.data  
        if(result.name == 'postMessage'){  
            this.querySendCode(result.arg)  
        }    
    })  
    currentWebview.append(wv)  
},  
// 发送验证码请求  
querySendCode(data) {  
    if (this.sending) return // 阻止awsc或事件监听 重复触发问题  
    this.sending = true  
    LoginSendCode({  
        phone: this.form.phone,  
        ...data,  
        scene: this.nc.scene  
    }).then(res => {  
        this.sending = false  
        if (!res.success) {  
            return uni.showToast({  
                title: res.msg,  
                icon: 'none'  
            })  
        }  
        uni.showToast({  
            title: '验证码发送成功'  
        })  
        this.second = 60  
        const timer = setInterval(() => {  
            this.second--  
            if (this.second <= 0) {  
                clearInterval(timer)  
            }  
        }, 1000)  
    })  
},  

本地html页面代码:

<style>...设置页面背景透明、滑动验证样式等</style>  

<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>  
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>  

<script>  
    document.addEventListener('plusready', function() {  
        var wv = plus.webview.currentWebview()  
        // 阿里云滑动验证  
        window.AWSC.use('nc', function(state, module) {  
            window.nc = module.init({  
                appkey: wv.appkey,  
                scene: wv.scene,  
                renderTo: 'ncContainer',  
                success: function(data) {  
                    uni.postMessage({  
                        data  
                    })  
                    wv.hide()  
                    window.nc.reset()  
                }  
            })  
        })  
    })  
</script>  

效果还算理想,由此可见其他类似的需要操作dom的功能都能如此实现,小程序同样可以使用 <web-view>标签去实现类似功能

vue页面与本地html文件消息传输方式补充:

最近学到了新的消息传输方式,plus.globalEvent监听uni.postMessage推送的消息会出现重复推送等问题,建议改为Webview url拦截的方式获取html文件数据。

// html中跳转自定义url,会被拦截,不会进行跳转  
window.location.href = 'push?params=loading'  

// vue页面wv拦截url变更  
wv.overrideUrlLoading({mode:'reject'}, e => {  
    var params = decodeURI(e.url.split('push?params=')[1])  
})

url拦截更实时,准确率更高,不会重复接收消息,只有App支持,H5+文档参考:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.overrideUrlLoading

2 关注 分享
迷茫的超级兵 Dreampossibly

要回复文章请先登录注册

重复的好名字

重复的好名字

回复 Dreampossibly :
我也遇到这个问题了,您解决了吗
2024-12-23 10:41
Dreampossibly

Dreampossibly

大佬,有个问题,就是有可能会出现验证码加载不出来的问题怎么处理啊
2024-06-15 22:55
c***@163.com

c***@163.com

app 拉起 webview 这个思路可以,但是小程序就不好搞
2022-11-15 10:46
8***@qq.com

8***@qq.com

大佬,我也遇到了这个问题,还是没有搞定,能否帮忙协助一下,有偿,谢谢了。897666996@qq.com
2022-09-04 12:52
8***@qq.com

8***@qq.com

大佬微信小程序里怎么使用
2022-07-12 15:21
棠梨叶落胭脂色

棠梨叶落胭脂色

感谢大佬,非常有用
2022-07-05 09:53
迷茫的超级兵

迷茫的超级兵

感谢大佬的案例,我用的也是阿里云的验证码,案例里的用法我用了而且都好使,遇到一个流程的问题问一下,就是阿里云的验证码不是分为两个验证过程吗,一个前台验证,一个是服务端验证,我那个APP的验证码组件(webview打开的那个HTML文件),在前台验证完了,但是不需要关闭验证组件,需要在服务端接口验证成功后关闭,服务端验证的接口再打开html的那个vue组件页面中,有没有什么办法可以在vue页面里关闭那个webview的HTML页面呢。有什么方法能在vue组件里获取到关闭webview 中的那个HTML的方法吗?
2022-02-18 15:19
五叶神

五叶神 (作者)

回复 1***@163.com :
补充了一下新学到的数据传输方法,比uni.postMessage好用一些,可以借鉴一下
2021-09-24 11:59
1***@163.com

1***@163.com

好思路
2021-09-10 10:02