美文网首页
uniapp配置启动页协议和引导页

uniapp配置启动页协议和引导页

作者: 喜欢桉树叶 | 来源:发表于2020-07-23 09:24 被阅读0次
启动页(splash)

1.在manifest.json文件的源码视图中,打开app-plus(这里主要说uniapp项目)
2.在app-plus节点下,添加privacy

"privacy" : {
            "prompt" : "template", //可取值template、custom、none
            "template" : {
                //prompt取值为template时有效,用于配置模板提示框上显示的内容
                "title" : "服务协议和隐私政策",
                "message" : "  尊敬的用户,欢迎您注册成为本应用用户,在注册前请您仔细阅读<a            href='html地址'>《用户协议》</a>及<a href='html地址'>《隐私政策》</a>,了解我们对您使用我们APP制定的规则,您个人信息的处理以及申请权限的目的和使用范围。<br/>  经您确认后,本用户协议和隐私权政策即在您和本应用之间产生法律效力。请您务必在注册之前认真阅读全部服务协议内容,如有任何疑问,可向本应用客服咨询。",
                "buttonAccept" : "同意",
                "buttonRefuse" : "暂不使用"
            }
        }
引导页(guide)

官方demo https://ext.dcloud.net.cn/plugin?id=192
主要就是在页面开始不让进入tab页,而是进入一个使用swiper做好的一个页面,通过控制动画播放完毕,进入首页的方法,需要做的就是在app.vue里面对状态进行判断,如果不是第一次,就不让再进去,具体的实现页面如下

<template>
    <view class="content">
        <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper" :style="{'height':windowHeight}"
         @animationfinish="animationfinish">
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'red'}">A</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'green'}">B</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'pink'}">C</view>
            </swiper-item>
            <swiper-item>
                <view class="swiper-item" :style="{'height':windowHeight,'background-color':'yellow'}">进入首页</view>
            </swiper-item>
        </swiper>
        <text :style="{color:'red','font-weight':200}">这是一个sssH1</text>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                windowHeight: '603px'  //定义手机屏幕高度值变量
            }
        },
        onLoad() {
            var _me = this;
            uni.getSystemInfo({//获取手机屏幕高度信息,让swiper的高度和手机屏幕一样高
                success: function(res) {
                    console.log(res.model);
                    console.log(res.pixelRatio);
                    console.log(res.windowWidth);
                    console.log(res.windowHeight);//这里是手机屏幕高度
                    console.log(res.language);
                    console.log(res.version);
                    console.log(res.platform);
                    _me.windowHeight = res.windowHeight + 'px';
                    console.log('手机屏幕高度为' + _me.windowHeight);
                }
            });
        },
        methods: {
            animationfinish(e) {
                console.log(JSON.stringify(e.detail.current));
                //判断到最后一张后,自动转向进入首页
                if (e.detail.current == 3) {
                    console.log('动画已经播放结束');
                    setTimeout(function() {
                        uni.redirectTo({
                            url: '/pages/main/main'
                        });
                    }, 1000)
                }
            }
        }
    }
</script>
<style>
    .swiper {
        width: 100%;
        /*     height: 100vw; */
        /* background: red; */
    }
</style>

相关文章

  • uniapp配置启动页协议和引导页

    启动页(splash) 1.在manifest.json文件的源码视图中,打开app-plus(这里主要说unia...

  • uni-app设置引导页源码

    是引导页(guide) 不是 启动界面 (splash)详细设置步骤见:uniapp设置引导页 https://w...

  • 启动页,引导页

    在首次打开App时,一般都是一张大图,在弹出对话框用户协议等(popupwindow ) ,当点击确定后跳转到引导...

  • 启动页 引导页

    https://www.cnblogs.com/plBlog/p/13876792.html

  • 功能调研|启动页和引导页

    一、启动页 每次启动都会出现。 二、引导页 若APP是第一次打开,则在启动页之后出现引导页。

  • iOS引导页、启动页

    前言 这里使用 launchScreen 、.storyboard 文件创建启动图和引导页。首次打开项目或者更新后...

  • 启动引导页

    http://blog.csdn.net/yudandan10/article/details/42009511 ...

  • [系列]APP设计之二:引导页

    上次我写了自己关于启动页的一些观察和想法。这次,来谈谈引导页,主要是app启动后展现的引导页,也有人称为前置引导页...

  • 关于iOS应用启动页与引导页的显示切换

    我们在移动应用开发中经常会应用到启动页与引导页,为了实现启动页与引导页,以及应用功能界面的无缝连接,今天我...

  • App页面分类

    引导页(欢迎页) 过渡页(启动页) 加载页 沉浸式页面 功能页,eg: 登陆、注册,设置,发布… 列表页 正文页,...

网友评论

      本文标题:uniapp配置启动页协议和引导页

      本文链接:https://www.haomeiwen.com/subject/vvrclktx.html