原理:使用5+api:plus.webview.open()创建一个webview,然后加载一个本地网页,网页可做成广告页的样式。网页中引入uni的SDK,使网页具有5+api的能力,可在点击网页中的按钮关闭创建的webview。
已上传插件市场
1.配置一个启动页,将根目录下的hybird目录拷贝至自己项目的根目录下。
2.在App.vue的 onLaunch 打开一个启动页
export default {
onLaunch: function() {
console.log('App Launch');
//app启动时打开启动广告页
var w = plus.webview.open(
'hybrid/html/advertise/advertise.html', // 远程链接或者本地链接
'advertise', {
top: 0,
bottom: 0,
zindex: 999
},
'fade-in',
0 // 不为0的时候会有tabbar先出现的问题
);
//设置定时器,4s后关闭启动广告页
setTimeout(function() {
plus.webview.close(w);
}, 4000);
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
3.在hybrid/html/advertise/advertise.html中修改点击广告跳转的逻辑,
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
document.querySelector('.btn').addEventListener('click', function(e) {
if (e.isTrusted) {
plus.webview.currentWebview().close();
}
});
// 广告点击跳转app内页
document.querySelector('.enter').addEventListener('click', function(e) {
if (e.isTrusted) {
plus.webview.currentWebview().close();
uni.navigateTo({
url: '/pages/advertise/advertise',
});
}
});
});
</script>