uniapp自定义开屏启动广告页

原理：使用5+api：plus.webview.open()创建一个webview,然后加载一个本地网页，网页可做成广告页的样式。网页中引入uni的SDK,使网页具有5+api的能力，可在点击网页中的按钮关闭创建的webview。

已上传插件市场

自定义开屏启动广告 - DCloud 插件市场

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>