uni-app開發經驗分享十八：對接第三方h5
阿新 • • 發佈：2021-01-11
1.uni-app中對接第三方為了防止跳出app使用了webview
<template>
<view>
<web-view :src="url" @message="message"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(option) {
// console.log(JSON.parse(decodeURIComponent(option.url)))
this.url = JSON.parse(decodeURIComponent(option.url))//跳轉第三方的url
},
methods:{
message(e){ //接收html發回來的訊息判斷是否成功，然後跳轉頁面
console.log(e.detail)
uni.switchTab({
url: '/pages/member/user'
});
}
}
}
</script>
2.順利的跳轉到第三方的時候進行一些操作，例如支付等
3.地方支付成功後會有回撥函式，進行一些操作
4.為了從第三方的h5跳回到app 寫了個新的html頁面
5.uni-app打包後會有static資料夾 所以將頁面放到static資料夾中
<!DOCTYPE html>
<html>
<head>
<title>正在返回...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>//不引入的話不能進行監聽
<script>
function load(){
// alert("測試")
let local = window.location.href;
// alert(local)
console.log(local)
let sourceType = getQueryVariable('sourceType');//傳參得值
let env = getQueryVariable('env');/傳參得值
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({ //監聽向uni-app發訊息
data: {
action: 'success'
}
});
})
}
function getQueryVariable(variable) //通過url獲取引數
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</script>
</head>
<body οnlοad="load()">
</body>
</html>