01.微信小程序入門-小程序目錄下的結構、編寫入口頁面

1.1.1目錄下的文件

一個小程序頁面由四個文件組成---js、wxml、wxss、json

1.1.2 app.js：小程序邏輯(系統的方法處理全局文件，也就是說文件中規定的函數和數據，在整個小程序中，每個框架頁面和文件均可以使用this獲取。)

---

app.json：小程序全局配置(用來配置頁面信息：包含設置頁面路徑，設置底部，網絡，調試模式，設置導航頭的顏色，字體大小。具體頁面的配置在頁面的json文件中單獨修改，任何一個頁面都須要在app.json中註冊，若是不在json中添加，頁面是沒法打開的。)

注意：框架中的json優先級高於全局的json優先級。

---

1.1.3 app.wxss：全局的界面美化代碼(用來修飾頁面效果)

注意事項：

一、小程序每一個頁面必須有.wxml和.js文件，其餘兩種類型的文件能夠不須要

二、文件名稱必須與頁面的文件夾名稱相同，如index文件夾，文件只能是index.wxml、index.wxss、index.js和index.json.

---

1.1.4 app.wxml頁面結構

---

1.1.5 pages目錄

pages：主要存放小程序的頁面文件，其中每一個文件夾爲一個頁面，每一個頁面包含四個文件。文件名不須要寫文件後綴，框架會自動去尋找位置

window

用於設置小程序的狀態欄、導航條、標題、窗口背景色。注意的是windows裏的backgroundColor子屬性表明的是下拉當前頁面出現的刷新頁面的窗口的背景顏色，而不是當前頁面的背景顏色

1.1.6 utils

用於存放全局的一些.js文件，公用的方法

1.2.1編寫入口頁面

建立welcome文件夾，以及目錄下的文件

welcome.wxml

<!-- wxml是編寫小程序骨架的文件 -->
<!-- <div> -->
<view class="container">
  <image class="user-avatar" src="/images/IMG_0783.JPG"></image>
  <text class="user-name">庭前雲落</text>
  <view class="moto-container">
    <text class="moto">開啓小程序之旅</text>
  </view>
</view>

welcom.wxss

/* 盒子中心樣式 */
.container {
  display: flex; /*彈性元素*/
  flex-direction: column; /*列垂直排列*/
  align-items: center; /*居中*/
}
/*頭像大小*/
.user-avatar {
  width: 200rpx;
  height: 200rpx;
  margin-top: 160rpx;
}
/* 暱稱樣式 */
.user-name {
  margin-top:100rpx; 
  font-size: 32rpx;
  font-weight: bold;
}
/* 按鈕字體樣式 */
.moto {
  font-size: 22rpx;
  font-weight: bold;
  line-height:80rpx;
}

/* 按鈕盒子樣式 */
.moto-container{
  margin-top: 200rpx;
  border: 1px solid #405f80;
  width:200rpx;
  height:80rpx;
  border-radius:5px;  /*圓角矩形*/
  text-align: center; 
  color: 405f80;
}

/*總體頁面高度和顏色*/
page{
  height:100%;
  background-color: #b3d4db;
}

app.json

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#b3d4db",/*導航欄標題顏色*/
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

text{
  font-family: MycroSoft Yahei;
}

頁面效果：

---

平常學習的總結，主要是爲了本身之後看，固然你們有什麼好的建議，歡迎評論留言。