uniapp开屏广告页的设置
普遍的实现方法
在开发一次uiapp app时，需要动态设置起始页，默认展示页（开屏广告），然后去首页。因为uniapp是 pages 的第一个是默认页 所以这里我们需要处理 一下才能完美的实现。
manifest.json 设置app 的启动页 也就是最开始 转圈的那个页面 不要他自动关闭
以源码展示为例：
"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : false,
"autoclose" : false,
"delay" : 0
},
设置了这一步后，app会一直转圈圈，进不去了。
在app.vue的onLaunch 中根据情况判断页码的起始页，等判断好了再打开app
在app.vue的onLaunch 中根据情况判断页码的起始页，等判断好了再打开app，一定要在页面跳转的回调success里面调用plus.navigator.closeSplashscreen()。
onLaunch: function() {
if(uni.getStorageSync('token')){
uni.reLaunch({
url:'/pages/login/child/authentication/index',
success() {
// #ifdef APP-PLUS
plus.navigator.closeSplashscreen();
// #endif
}
})
}else{
uni.reLaunch({
url:'/pages/login/index',
success() {
// #ifdef APP-PLUS
plus.navigator.closeSplashscreen();
// #endif
}
})
}
console.log('onLaunch');
}, #ifdef APP-PLUS
具体可以参考：
https://uniapp.dcloud.net.cn/tutorial/platform.html#preprocessor
https://uniapp.dcloud.net.cn/tutorial/use-html5plus.html
因为H5是不支持plus这个方法的，这个只在手机端支持，所以PC端运行会提示"plus is not defined"，这时候加上条件编译，那么就不会在浏览器上编译了，也就不会报错了。
uni.reLaunch
https://uniapp.dcloud.net.cn/api/router.html#relaunch
关闭所有页面，打开到应用内的某个页面。使用这个api不会产生历史记录。
uni.getStorageSync
https://uniapp.dcloud.net.cn/api/storage/storage.html#getstoragesync
从本地缓存中同步获取指定 key 对应的内容。当使用url传递参数的时候，可能因为参数过长而导致传递失败，这时候就可以考虑使用storage进行参数的传递。
通过以上修改，就可以实现根据接口或者缓存中值的不同，进入不同的页面的效果了。
使用webview
原理：使用5+api：plus.webview.open()创建一个webview,然后加载一个本地网页，网页可做成广告页的样式。网页中引入uni的SDK,使网页具有5+api的能力，可在点击网页中的按钮关闭创建的webview。
可以直接参考最终的写法：gitee案例请参考：https://gitee.com/Pcp123/uniapp-splash
1.配置一个启动页,将根目录下的hybird目录拷贝至自己项目的根目录下。
配置一个启动页,将根目录下的hybird目录拷贝至自己项目的根目录下。也可以使用其他的在线地址。
在App.vue的 onLaunch 打开一个启动页
export default {
onLaunch: function() {
console.log('App Launch');
// #ifdef APP-PLUS
//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);
// #endif
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}同样的，为避免报错，我们使用#ifdef APP-PLUS
广告跳转
在hybrid/html/advertise/advertise.html中修改点击广告跳转的逻辑。当然，注意引用uni的JDK:
https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js
注意，这个需要放到本地服务器上。关于JDK的使用，参考：
https://uniapp.dcloud.net.cn/component/web-view.html#web-view
<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>其他实现方法
https://www.tpframe.com/posts/257.html
这里只介绍一下思路，具体请参考以上链接。
方法一
独立做一个广告幻灯片或视频等广告页面，例如pages/guide/guide
启动页面判断，是否是第一次加载（通过缓存判断），如果是就展示广告，否则跳转到首页。
pages.json文件这样配置：
{
"pages": [
{
"path":"pages/expand/entry/guide",
"style":{
"navigationStyle":"custom"
}
},
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "tpframe商城",
"navigationStyle":"custom",
"navigationBarTextStyle":"black"
}
},
// .....
}当然你也可以刚开始就进行首页(判断是否是第一次加载)--如果是-->广告页--->返回首页，如果不是就不做任何操作。
方法2
第二种方式就是写子窗口，官方文档可看这里：
https://uniapp.dcloud.net.cn/collocation/pages.html#app-subnvues
具体实现思路：加载首页的时候判断是否是第一次加载，如果不是就不管，如果是就显示原生子窗口，原生子窗口就是一个页面，你可以在里面定义任意你想要的内容。
pages.json配置示例：
{
"pages": [{
"path": "pages/home/home", //首页
"style": {
"app-plus": {
"titleNView": false , //禁用原生导航栏
"subNVues":[{//侧滑菜单
"id": "guide", //subNVue 的 id，可通过 uni.getSubNVueById('guide') 获取
"path": "pages/home/guide.nvue", // nvue 路径
"style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
"position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
"width": "1000%",
"height": "1000%"
}
}
}
// ....
]
}
目录