1. 新建時，不勾選【建立普通快捷啟動模板】
2. 在根目錄下建立3個應用程式檔案 app.json   app.js   app.wxss
3. 在根目錄下建立pages檔案, 在pages檔案下建立welcome資料夾並建立四個頁面檔案 welcome.js   welcome.wxml   welcome.wxss   welcome.json
   

welcome.wxml 輸入要顯示的內容

Welcome, 從零開始建立專案

app.json

{
  "pages":[
    "pages/welcome/welcome"
 

  ]
}

顯示頁面內容，讓小程式的MINA框架知道頁面存在以及頁面具體位置

welcome.js   此檔案不能為空

Page({
  
})

welcome.json   此檔案不能為空

{
  
}

儲存即為執行

在welcome頁面新增一些標籤元素

1. 準備一些微信頭像圖片，將其放在根目錄‘/images/avatar/’資料夾下，沒有就建立它
   真實專案中，圖片資源儘量不要儲存在小程式的目錄中，因為小程式的大小不能超過1MB，超過則無法真機執行和釋出專案，應該將圖片放在伺服器上，讓小程式通過網路來載入圖片資源
   

welcome.wxml

<view> 										#view元件通常作為容器來使用，類似於HTML的div標籤
  <image></image>							#image元件用來顯示一張圖片，類似於HTML的img標籤
  <text>Welcome, 從零開始建立專案</text>		#text元件用來顯示一段文字，類似於HTML中的span標籤
  <view>
    <text>開啟小程式之旅</text>
  </view>
</view>

更改welcome.wxml 內容如下

<view>
  <image src="../../images/avatar/avator-3.jpg"></image>		<!--image元件需要設定一個src屬性，該屬性執行一張圖片的路徑，用來顯示該圖片-->
  <text>Welcome, 從零開始建立專案</text>
  <view>
    <text>開啟小程式之旅</text>
  </view>
</view>

儲存即為執行，結果如下
小程式MINA框架預設高寬為，寬度300px，高度225px

更新welcome.wxml  內容
給每個樣式的元件加入樣式名稱,class name

<view class="container">
  <image class="avtar" src="/images/avatar/avator-3.jpg"></image> <!--image元件需要設定一個src屬性，該屬性執行一張圖片的路徑，用來顯示該圖片-->
  <text class="motto">Welcome, 從零開始建立專案</text>
  <view class="journey-container">
    <text class="journey">開啟小程式之旅</text>
  </view>
</view>

頁面樣式表
welcome.wxss

.container{ /*是所有元件元素的容器*/
  display: flex; /*使用Flex佈局*/
  flex-direction:column;
  align-items:center;
}
.avatar{ /*設定頭像的*/
  width:200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.motto{ /*設定Welcome,從零開始建立專案這句話的樣式*/
  margin-top:100rpx;
  font-size:32rpx;
  font-weight:bold;
  color:9#F4311;
}
.journey-container{ /*設定開啟小程式之旅的外邊框，使其看起來想一個按鈕*/
  margin-top:200rpx;
  border:1px solid#EA5A3C;
  width:200rpx;
  height:80rpx;
  border-radius:5px; /*boader-radius讓外邊框變成圓角矩形*/
  text-align:center;
}
.journety{ /*設定圓角矩形的文字樣式*/
  font-size:22rpx;
  font-weight:bold;
  line-height:80rpx;
  color:#EA5A3C;
}

儲存並執行，執行結果如下

修改頁面整體的背景色

1. 首先嚐試在welcome.wxss 檔案的.container樣式裡追加屬性

background-color:#ECC0A8;

儲存並執行效果

這不是我們想要的效果，在container view容器外邊，小程式還有一個預設的容器元素：page，這是MINA框架預設新增的
page元素代表著頁面的整體
可以在【wxml pannel】模組下看出

調整welcome.wxss程式碼，在末尾追加如下程式碼

page{
  background-color:#ECC0A8;
}

儲存並執行，執行效果如下

修改導航欄的顏色

導航欄是小程式預設的，不可以隱藏或者取消，它必須存在
window配置可用來設定小程式的狀態列、導航欄、標題和視窗的背景色

追加app.json內容

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

儲存並執行，執行效果如下

導航欄已經被隱藏了，但這不是真的被隱藏
window其他屬性
navigationBarTextStyle 配置導航欄文字顏色，只支援 black/white
navigationBarTitleText 配置導航欄文字內容
backgroundColor 配置視窗顏色
backgroundColor 配置視窗顏色
backgroundTextStyle 下拉北京字型，僅支援 dark/light
enablePullDownRefresh 是否開啟下拉重新整理