App是用uniapp开发的，打包为apk，上传到安卓平板中使用。客户要求登录页面实现微信扫描登录，这一场景下有两个关键问题：
1、微信扫描登录后的回调地址是不可能回到App内页面的。
解决方案：不能直接用，就迂回解决。服务器上需要部署1个H5的应用。App的登录页面放一个WebView，指向这个H5应用里的扫描登录页面。回调地址也指向H5应用里的某个地址，该地址接收code参数和后台交互完成登录业务。
2、WebView和App的通讯问题。
2.1 App给WebView传参
通过WebView的src属性传递参数
2.2 WebView返回参数给App
这个要通过postMessage传递。例如上面场景，回调页面完成登录后调用uni.postMessage给App。App通过@message="getMessage"来挂接接收函数
app代码
<view class="zai-box">
<view id="wx_qrcode">
<web-view ref="webview" @message="getMessage" @onPostMessage="getMessage" src="https://jichengrelease-pc.siyuhome.net/login/detector"></web-view>
</view>
</view>
methods: {
getMessage:function(code) {
console.log('本地code:',code);
this.onScanLogin(code)
},
async onScanLogin(code){
const res=await scanLogin(code)
console.log("res",res)
if(res.data.success){
// // #ifdef APP-PLUS
// this.saveClientId()
// // #endif
console.log("res==》",res.data.result)
uni.setStorageSync('userId',res.data.result.userInfo.userId)
this.$tip.success('登录成功!')
const result = res.data.result
const userInfo = result.userInfo
uni.setStorageSync(ACCESS_TOKEN,result.token);
uni.setStorageSync(USER_INFO,userInfo);
uni.setStorageSync('userInfo',userInfo);
// commit('SET_TOKEN', result.token)
// commit('SET_AVATAR', userInfo.avatar)
// commit('SET_NAME', { username: userInfo.username,realname: userInfo.realname})
// 登陆成功，重定向到主页
uni.reLaunch({
url: '/pages/home/carousel'
});
}else{
this.$tip.alert(res.data.message);
}
},
},
云端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-view</title>
<script type="text/javascript" src="../static/js/init-rem.js"></script>
<script type="text/javascript" src="../static/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../static/helper/init-helper.js"></script>
<!-- <script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"-->
<!-- type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" src="../static/helper/web-view-custom.js"></script>
<script type="text/javascript" src="../static/js/vconsole.min.js"></script>
<script type="text/javascript">
var vc = new VConsole()
</script>
<style>
.btn-layout {
display: flex;
flex-direction: column;
align-items: center;
}
.btn-item {
display: inline;
font-size: 0.32rem;
color: white;
text-align: center;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
margin-top: 0.5rem;
background-color: #1AAD19;
}
.content {
display: inline;
font-size: 0.32rem;
color: black;
text-align: center;
padding: 0.2rem 0.5rem;
border-radius: 0.3rem;
margin-top: 0.5rem;
}
</style>
</head>
<body>
<div class="btn-layout">
<span id="h5ToUniappId" class="btn-item">H5发送数据到uniapp</span>
<div id="contentId" class="content"></div>
<div id="content2Id" class="content"></div>
</div>
</body>
<script type="text/javascript">
var itemData = getParamByKey('data');
console.log("获取uniapp链接传递数据：", itemData)
$(function () {
$('#contentId').html("获取uniapp链接传递数据："+itemData)
});
/**
* 获取uniapp传递数据方法一
* 定义全局方法，接收来自应用的信息
*/
// window.postJS = (msg) => {
// console.log('来自应用的消息', msg)
// }
/**
* 获取uniapp传递数据方法二
*/
function postJS(e) {
console.log("获取uniapp传递数据：", e)
$('#content2Id').html("获取uniapp传递数据："+JSON.stringify(e))
}
document.addEventListener('UniAppJSBridgeReady',
function () {
webUni.webView.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res));
});
document.querySelector('#h5ToUniappId')
.addEventListener('click', function (evt) {
// webUni.webView.navigateBack();
//向uniapp传值
//方法一
//window.parent.postMessage("", '*')
//parent.postMessage("sdcec", "*");
//方法二
webUni.postMessage({
data: {
action: 'message',
msg: '我是H5',
myType: 'typeH5',
}
});
});
});
</script>
</html>
image.png
网友评论