ウェルカムページの効果を達成するための小型マイクロチャネルプログラム

welcome.wxml

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

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #b3d4db;
}

.avatar {
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}

.motto {
  margin-top: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
}

.journey-container {
  margin-top: 200rpx;
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}

.journey {
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color: #405f80;
}

：効果を確認するために、この時間

コンテナの背景色を設定し、しかし、画面全体をカバー下部のナビゲーションバーとセットカラーされていないませんでしたが。

あなたはwelcome.jsonで、ナビゲーションバーの色を設定することができます

"navigationBarBackgroundColor": "#b3d4db"

あなたがページwelcome.wxssにスタイルを設定することができ、色は、画面全体をカバー

page {
  height: 100%;
  background-color: #b3d4db;
}