使用uniapp 开发app时,可能会遇见需要获取第三方授权,使用第三方数据的情况,比如获取淘宝登录授权,人脸识别认证等,就需要通过webview跳转第三方页面,完成操作后又需要返回我们的程序内;对于前端来说,怎么监听用户是否操作完成是个问题;
let url = encodeURIComponent(JSON.stringify(data.url))
uni.navigateTo({
url: `/pages/home/tbAuthorization/tbAuthorization?url=${url}`
})
<template>
<view>
<web-view :src="url" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: '',
}
},
onLoad(opt) {
this.url = JSON.parse(decodeURIComponent(opt.url));
},
methods: {
message(event) {
console.log(event,"*********",event.detail.data)
if (event.detail.data[0].action == 'success') {
uni.reLaunch({
url:'/pages/home/selfSupport?type=tb'
})
}
},
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>淘宝宝授权</title>
</head>
<body>
<img style="width: 72px;height: 72px;" src="assets/taobao.png" >
<p style="color: #1B1B1B;">淘宝已授权登录成功</p>
<button class="btn" type="button" onclick="test()">立即开启购物之旅</button>
</body>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
function test(){
var timer = setInterval(function(){
if(window.uni){
clearInterval(timer);
uni.postMessage({ data: { action: 'success' } }),
uni.navigateBack()
}
},10)
}
</script>
<style type="text/css">
.btn{
width: 50%;
height: 45px;
background: linear-gradient(90deg, #f6ad49, #ee7800);
border-radius: 45px;
border: 0;
color: #fff;
font-size: 16px;
margin-top: 40%;
}
html{
height: 100%;
}
body{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
</html>
总结: 这个不难,但是我第一次做时很懵,所以记录一下,有一个问题还不明白,webview 有两个监听事件@message (网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。)
@onPostMessage(网页向应用实时 postMessage)按理说第二个事件也能够接收到返回的消息数据,但是我做的时候怎么都获取不到,困扰了很久,还是不明白原因
|