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

小程序的主體由三個(gè)文件組成，這三個(gè)文件要放在項(xiàng)目的根目錄下，分別是

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

2. app.json 公共設(shè)置

3. app.wxss 公共樣式

小程序可以自定義 page，但是 page 需要在 app.json 中做出聲明，不然IDE會(huì)報(bào)錯(cuò)，找不到頁(yè)面。小程序的頁(yè)面由四個(gè)文件組成，分別是

1. .js文件 頁(yè)面邏輯

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

3. .wxss 樣式文件，頁(yè)面樣式表

4. .json 文件，配置文件，頁(yè)面配置

2.小程序配置

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

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

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

2. tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

3. networkTimeout 用來設(shè)置各種網(wǎng)絡(luò)請(qǐng)求超時(shí)時(shí)間

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

3.小程序視圖

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

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

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

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

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

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

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

<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 還提供了另外兩種方式來進(jìn)行應(yīng)用和復(fù)用，import 和 include ，import 有作用域的概念，他只會(huì)引用目標(biāo)文件中定義的模版。include可以將目標(biāo)文件除了<template/>的整個(gè)代碼引入，相當(dāng)于是拷貝到include位置上。

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

1. touchstart 手指觸摸動(dòng)作開始

2. touchmove 手指觸摸后移動(dòng)

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

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

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

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

4.組件樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對(duì)應(yīng)的頁(yè)面，并會(huì)覆蓋 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ā)過移動(dòng)端的前端er 都知道，蘋果手機(jī)有物理像素和邏輯像素的區(qū)別，比如設(shè)備的像素是350px，設(shè)計(jì)稿的像素是750px；一般在開發(fā)過程中，我們會(huì)使用自動(dòng)化構(gòu)建工具去做像素轉(zhuǎn)化，或則是使用預(yù)處理器定義像素轉(zhuǎn)化函數(shù)進(jìn)行處理，在小程序的開發(fā)中，大可不必這么麻煩，小程序提供了一個(gè) rpx 的單位，你可以直接寫上你在設(shè)計(jì)稿中測(cè)量的數(shù)值即可，小程序開發(fā)工具在編譯過程中會(huì)自動(dòng)幫你做轉(zhuǎn)換。

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