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

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

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

    
    Hello, 七月
    
        开启小程序之旅
    

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

.container{
    display: flex;     
    flex-direction:column;
    align-items: center;
    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"
        });
    }
})

点击界面上的按钮出发跳转事件，。

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

第五步：编写welcome.json文件

{  "navigationBarBackgroundColor": "#b3d4db"  }

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

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