1.小程式的基本檔案結構

（1）根目錄下面有三個檔案，app.js、app.json、app.wxss。一個小程式都必須有這三個檔案，他們必須放在應用程式的根目錄下面，否則小程式會提示找不到app.json檔案。

（2）app.js，表示小程式的邏輯檔案，app.json表示小程式的配置檔案，app.wsxx，表示全域性公共樣式檔案。

（3）每個頁面都包含有四個檔案，主要為.js、.wxml、.wxss、.json檔案，wxml檔案類似於我們熟悉的html檔案，用來編寫頁面的標籤和骨架，不同的是wxml檔案裡面的標籤元素不可以使用html標籤，只能使用小程式封裝的一些元件。wsxx檔案的作用類似於我們熟悉的css檔案，json檔案用來配置頁面的樣式和行為，js檔案用來配置我們前端中的javaScript檔案，用來編寫小程式的頁面邏輯。

    wxml檔案內容：

<!--pages/posts/post.wxml-->
<!--滑動檢視容器介面-->
<swiper indicator-dots='true' autoplay='true' interval='1000'>
<!--
（1）indictor-dots表示用來顯示面板指示點；
（2）autoplay表示用來顯示自動播放；
（3）interval表示用來設定swiper-item的切換時間間隔；
（4）
 -->
<swiper-item>
<image src='/images/post/1.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/post/2.jpg'></image>
</swiper-item>
<swiper-item>
<image src='/images/post/3.jpg'></image>
</swiper-item>
</swiper>
<view class='post-container'>
<view class='post-author-date'>
<image src='/images/avator/5.jpg'></image>
<text>Jan 28 2018</text>
</view>
<text class='post-title'>一隻可愛的小貓</text>
<image src='/images/post/4.jpg'></image>
<text class='psot-content'>這是一隻可愛的小貓咪，也就是我們經常所說的喵星人！</text>
<view class='post-like'></view>
<image src='/images/post/2.jpg'></image>
<text>The cat!</text>
<image src='/images/post/3.jpg'></image>
<text>The rabbit!!</text>
</view>
 

    wsxx檔案內容：

/* pages/posts/post.wxss */
swiper{
  width: 100%;
  height: 600rpx;
}

swiper image{
  width: 100%;
  height: 600rpx;
}

.post-container{
  flex-direction: column;
  display: flex;
  margin: 20rpx 0 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid  #ededed;
  padding-bottom: 5px;
}

.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
post-author-date image{
  width: 100%;
  height: 100%;
}
.post-author-date text{
  margin-left: 20rpx;
}
.post-image{
  width: 100%;
  height: 340rpx;
  margin-top: 15px;
}
.post-date{
  font-size: 26rpx;
  margin-bottom: 10rpx;
}
.post-title{
  font-size: 16rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10rpx;
  margin-left: 10rpx;
}

.post-content{
  color: #666;
  font-size: 26rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like{
  display: flex;
  flex-direction: row;
  font-size: 13rpx;
  line-height: 16rpx;
  margin-left: 10rpx;
  align-items: center;
}
 

（4）我們在我們建立好的wxml檔案中編寫我們頁面元素和一些標籤元素，新增一些基本的元件和標籤。

2.小程式所支援的CSS選擇器

（1）.class，選擇擁有class=‘name’的元件；

（2）#id，選擇擁有id=‘name’的元件；

（3）element，元素選擇器，選擇所有view元件；

（4）：：after，view：：after，在view元件後面插入內容；

（5）：：befire,view：：before，在view元件前面插入內容；

    需要注意的是：本地資源在wxss中是無法使用的。我們可以使用網路圖片來代替本地圖片。

3.Flex佈局（彈性佈局）

（1）主要作用在容器上，他將頁面中的所有元素都包括起來。

（2）使用display：flex，將view變成一個彈性盒子。display-direction表示指定元素內的排列方向。這個屬性可以為row(正向排列，沿著X軸方向排列)，row-reverse（反向排列，沿著X軸反方向排列），column（從上到下排列，沿著Y軸反方向進行佈局），column-reverse（正向排列，沿著Y軸方向排列）；align-item表示定義元素在交叉軸上該如何對齊。

4.小程式自適應單位長度單位rpx，根據不同的模式進行大小的自適應。

5.全域性樣式檔案app.wsxx檔案，如果不想使用全域性預設樣式，那麼只需要在相應的頁wsxx檔案中重新定義這個樣式即可。小程式會優先選擇頁面的wsxx檔案，而不是app.wsxx檔案。

6.頁面的根元素page，整個頁面元素的配置、以及樣式的顯示。

7.app.json中的window配置項

（1）window表示當前視窗導航欄的配置。

（2）屬性介紹

    navigationBarTextStyle，配置導航欄文字顏色，只支援black/white；

    navigationBarTitleText配置導航欄文字內容；

    backgroundColor配置視窗顏色；

    backgroundTextStyle下拉背景字型，僅支援dark\light

    enablePullDownRefersh是否開啟下拉重新整理功能；

 "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程式",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false