1.目錄結(jié)構(gòu)

小程序的主體由三個文件組成，這三個文件要放在項目的根目錄下，分別是

1. app.js 配置小程序的邏輯

2. app.json 公共設置

3. app.wxss 公共樣式

小程序可以自定義 page，但是 page 需要在 app.json 中做出聲明，不然IDE會報錯，找不到頁面。小程序的頁面由四個文件組成，分別是

1. .js文件 頁面邏輯

2. .wxml 視圖層文件，頁面結(jié)構(gòu)

3. .wxss 樣式文件，頁面樣式表

4. .json 文件，配置文件，頁面配置

2.小程序配置

app.json 決定頁面文件的路徑、窗口表現(xiàn)、設置網(wǎng)絡超時時間、設置多少 tab 。

在 pages 對象里定義頁面路徑，pages 接受由字符串組成的數(shù)組，pages數(shù)組的第一個元素就是小程序的首頁。

1. window 用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色。

2. tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應頁面。

3. networkTimeout 用來設置各種網(wǎng)絡請求超時時間

4. debug 是布爾類型，用來配置是否在開發(fā)者工具中開啟 debug 模式

3.小程序視圖

在小程序中，你不能繼續(xù)用 html 中的標簽來構(gòu)造你的頁面，MANA 框架有特定的容器組件，view，scroll-view 以及 swiper。

1. view 是視圖容器，類似于 html 中的 div ，但是不同的是，用 view 包裹的內(nèi)容，在超出設備窗口的時候，它實現(xiàn)的效果如 css 樣式設置的 overflow：hidden

2. 如果你需要實現(xiàn)類似通訊錄或則聊天列表的滾動效果，你需要使用 scroll-view 滾動容器組件，它實現(xiàn)的效果如 css 樣式設置的 overflow:scroll 。

3. swiper 是滑塊視圖組件，如果你要實現(xiàn)類似輪播圖的效果的話，他是你的不二之選，你能通過屬性配置來控制是否顯示圓點，是否自動播放，切換時間，以及切換間隔時間等。小程序的MANA也實現(xiàn)了數(shù)據(jù)的綁定，寫法類似于 Angular 和 Vue，通過雙括號的形式 如：{{data}} 即可，值得注意的是，如果你寫在容器（為了便于描述和理解，下文會以標簽來描述）于之間的話，你直接把變量寫在雙括號里即可，如：<view>{{data}}</view> ，但是如果你給標簽的屬性綁定變量，你需要將雙括號放在雙引號內(nèi)，如：<view wx:if=”{{data}}”></view>,類似于Angular 和 Vue，你也能在雙括號內(nèi)進行簡單的運算，如：<view hidden=”{flag?true:false}”></view>。

細心的同學可能發(fā)現(xiàn)了在介紹數(shù)據(jù)綁定的時候我們用了wx:if 的屬性，這是 MANA 提供的條件渲染，通過判斷 wx:if 傳布爾值（非布爾類型進行隱士轉(zhuǎn)化）來控制是否渲染標簽中的內(nèi)容。在 MANA 中還有一個屬性能控制內(nèi)容的顯隱，不同的是，wx:if 只有在為 true 的時候才回去渲染標簽中的內(nèi)容，而 hidden 始終會渲染內(nèi)容，只是根據(jù)條件來控制內(nèi)容的顯示與否。

此外MANA 也為我們提供了較為實用的列表渲染，wx:for 接受一個數(shù)組,在頁面中能根據(jù)數(shù)組中的值來渲染頁面列表

除了使用列表渲染來復用一塊視圖外，你還可以通過模版來進行復用，你能在 template 中定義一塊代碼片段，然后在不同的頁面中引用，如：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

除了 template 外，MANA 還提供了另外兩種方式來進行應用和復用，import 和 include ，import 有作用域的概念，他只會引用目標文件中定義的模版。include可以將目標文件除了<template/>的整個代碼引入，相當于是拷貝到include位置上。

除MANA 同樣也定義了常用的事件分類，如

1. touchstart 手指觸摸動作開始

2. touchmove 手指觸摸后移動

3. touchcancel 手指觸摸動作被打斷，如來電提醒，彈窗

4. touchend 手指觸摸動作結(jié)束

5. tap 手指觸摸后馬上離開

6. longtap 手指觸摸后，超過350ms再離開

4.組件樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋 app.wxss 中相同的選擇器。如果你寫過 css ，那你就能輕松駕馭 wxss,wxss 在選擇器上做了限制，目前支持的選擇器有：

1. .class 如：.intro 選擇所有擁有 class=”intro” 的組件

2. #id 如：#firstname 選擇擁有 id=”firstname” 的組件

3. element 如： view 選擇所有 view 組件

4. element, 如： element view checkbox 選擇所有文檔的 view 組件和所有的 checkbox 組件

5. ::after 如：view::after 在 view 組件后邊插入內(nèi)容

6. ::before 如：view::before 在 view 組件前邊插入內(nèi)容

開發(fā)過移動端的前端er 都知道，蘋果手機有物理像素和邏輯像素的區(qū)別，比如設備的像素是350px，設計稿的像素是750px；一般在開發(fā)過程中，我們會使用自動化構(gòu)建工具去做像素轉(zhuǎn)化，或則是使用預處理器定義像素轉(zhuǎn)化函數(shù)進行處理，在小程序的開發(fā)中，大可不必這么麻煩，小程序提供了一個 rpx 的單位，你可以直接寫上你在設計稿中測量的數(shù)值即可，小程序開發(fā)工具在編譯過程中會自動幫你做轉(zhuǎn)換。

在下次小程序分享《小程序開發(fā)踩坑（二）》的時候，會教大家如何與后端進行數(shù)據(jù)交互，歡迎感興趣的小伙伴訂閱博客。