由于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 页面代码:
复制代码
return this.appCreateVerify()
appCreateVerify() {
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()
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
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:
<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的功能都能如此实现,小程序同样可以使用 标签去实现类似功能