微信小程序欢迎页面效果实现

微信小程序欢迎页面效果实现

wxml：

<view class="container">
    <image class="avatar" src="/images/1.png"></image>
    <text class="motto">hello，微信</text>
    <view class="journey-container" bindtap="onTap">
        <text class="journey">开启小程序之旅</text>
    </view>
</view>

wxss:

page{
    height: 100%;
    background-color: #b3d4db;
}
.container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #b3d4db;
}
.avatar{
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
    margin-top: 30rpx;
}
.motto{
    margin-top: 100rpx;
    font-size: 32rpx;
    font-weight: bold;
}
.journey-container{
    margin-top: 10rpx;
    border: 1px solid #405f80;
    width: 200rpx;
    height: 80rpx;
    border-radius: 5px;
    text-align: center;
}
.journey{
    font-size: 22rpx;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 80rpx;
    color: #405f80;
}

welcome.json中配置：

{
  "navigationBarTitleText": "欢迎",
  "navigationBarBackgroundColor": "#b3d4db"
}