2 从一个简单的“欢迎”页面开始小程序之旅

第一步：创建如下文件及各个文件。

第二步：编写welcome.wxml布局文件

<view class="container">
<!-- 调试的时候最外层是一个page,而不是 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>

第三步：编写welcome.wxss样式文件

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

/* <image class="avatar" 的样式 */
.avatar{
    width:200rpx;
    height:200rpx;
    margin-top:160rpx;  /* 距离顶部距离 rpx让TA自适应 */
}

.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;    /* （垂直居中）文字line-height等于容器高度 */
    color: #405f80;       /* 文字颜色 */
}

/*
   调试的时候最外层是一个page,而不是 view class="container"
   设置 最最最 外层容器背景色。
*/
page{
    height: 100%;
    background-color:#b3d4db;
}

display:flex - 容器元素必须有这个属性

   flex-direction（排列方向）
     |- row：与文字方向一致；
     |- row-reverse：与文字方向相反；
     |- column：元素从上到下排列；
     |- column-reverse：迅速从下到上排列；

   align-items（纵向对齐）
     |- flex-start：元素与容器顶部对齐；
     |- flex-end：元素与容器底部对齐；
     |- center：元素纵向居中；
     |- baseline：元素在容器基线位置显示；
     |- stretch：元素被拉伸以及填充整个容器；

第四步：编写welcome.js逻辑跳转

Page({
    onTap: function (event) {
        // wx.navigateTo({
        //     url:"../posts/post"
        // });
        wx.switchTab({
            url: "../posts/post"
        });
    }
})

点击界面上的按钮出发跳转事件，<view class="journey-container" bindtap="onTap">。

wx.switchTab(OBJECT)  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

第五步：编写welcome.json文件

{  "navigationBarBackgroundColor": "#b3d4db"  }

第六步：设置全局的状态栏颜色

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "navigationBarBackgroundColor": "#405f80" 
  }
}