【第二十节：微信小程序 常用功能-常用功能-欢迎页】微信小程序入门，以思维导图的方式展开20

 如果大图看不清，可以私信给五木大大要大图哈。 

 20、常用功能-欢迎页

    概念
        每个应用刚下载打开的时候都有个欢迎的页面，是用户启动时应用是看到的第一眼界面，漂亮的欢迎页面给用户带来好心情。
    如何制作
        wxml布局
            通常欢迎页面都使用swiper滑动视图实现多张的切换效果，切换到最后一张的时候点击“立即体验”进入主界面
            <swiper indicator-dots="true">\n\n        <block wx:for="{{imgs}}" wx:for-index="index">\n\n          <swiper-item class="swiper-items"  >\n\n            <image class="swiper-image" src="{{item}}" bindload="loadHandle"></image>\n\n    //最后一张显示按钮\n\n            <button class="button-img" bindtap="startHandle" wx:if="{{index == imgs.length - 1}}" >立即体验</button>\n\n          </swiper-item>\n\n        </block>\n\n    </swiper>
        js逻辑
            Page({\n\n    data:{\n\n        imgs:[\n\n            "../../images/start1.png",\n\n            "../../images/start1.png"\n\n        ]\n\n    },\n\n    //绑定按钮事件\n\n    startHandle(){\n\n        wx.redirectTo({url: "../login/login"})\n\n    },\n\n    //图片加载完毕触发\n\n    loadHandle: function(){\n\n        //如果已经登录，就直接跳到主页面\n\n        var token = wx.getStorageSync("token");\n\n        if(token){\n\n            //这里也可以设置定时setTimeout\n\n            wx.switchTab({url: "../index/index"})\n\n        }\n\n    }\n\n})
        wxss样式
            swiper {\n\n      position: absolute;\n\n      height: 100%;\n\n      width: 100%;\n\n    }\n\n    .swiper-image {\n\n      height: 100%;\n\n      width: 100%;\n\n      opacity:0.9;\n\n    }\n\n    .button-img{   \n\n       position: relative;\n\n       bottom: 90px;\n\n       height: 40px;\n\n       width: 120px;\n\n       opacity:0.6;\n\n    }
        APP全局设置
            app.json中的需要把欢迎页放在pages对象第一行
    效果描述
        屏幕一整张欢迎图片，下方中间一个立即体验的按钮