2.2 “徒手”創(chuàng)建小程序

為了讓開發(fā)者更好地理解小程序框架運行機制，接下來將帶領(lǐng)大家“徒手”創(chuàng)建一個結(jié)構(gòu)最簡單的小程序，這樣每個細(xì)節(jié)都是開發(fā)者自己完成的，這對理解小程序框架有很大幫助。步驟如下：

1）創(chuàng)建項目目錄，這里以E:\weixin\myproject為例。

2）按圖2-2所示的目錄結(jié)構(gòu)創(chuàng)建文件：

3）打開app.json，寫入以下代碼：

    {
      "pages" : [
        /＊ 指定默認(rèn)啟動頁面地址 ＊/
        "mypages/index/index"
      ]
    }

4）打開index.wxml，寫入以下代碼：

    <view bindtap="countClick">我是index頁面，你點擊了{(lán){count}}次</view>

5）打開index.js文件，寫入以下代碼：

    Page( {
      data : {
        count : 0
      }，
      countClick : function() {
        this.setData( {
          count : this.data.count + 1
        } );
      }
    } );

就這么幾步，一個最簡單的小程序便搭建好了，項目中僅包含一個index頁面，這個目錄結(jié)構(gòu)是最簡單、最基礎(chǔ)的小程序結(jié)構(gòu)。接下來我們將它導(dǎo)入開發(fā)者工具中看看運行效果。

6）打開微信開發(fā)者工具，填寫AppId和項目名稱，點擊“選擇”按鈕添加項目，項目目錄選擇剛才創(chuàng)建的目錄E:\weixin\myproject，點擊“添加項目”完成添加，如圖2-3所示：

7）導(dǎo)入項目后我們便能看到運行界面，當(dāng)我們點擊文字時，點擊次數(shù)也會隨之增加（如圖2-4所示）。

這就是最簡單的小程序，所有復(fù)雜的項目都是圍繞這個結(jié)構(gòu)進(jìn)行拓展的。當(dāng)運行這個項目時，框架首先會解析配置文件app.json，通過pages設(shè)置找到默認(rèn)首頁頁面mypages/index/index（pages第一個路徑默認(rèn)為首頁），然后加載mypage/index目錄中index.wxml、index.wxss、index.js、index.json這4個文件進(jìn)行頁面渲染。

在index.wxml文件中，我們簡單使用了<view/>組件，頁面渲染時，框架將邏輯層中data的count屬性與視圖層的count進(jìn)行了綁定，所以一打開頁面會顯示點擊次數(shù)為0。當(dāng)點擊<view/>時，會觸發(fā)tap事件，這時視圖層根據(jù)<view/>組件bindtap屬性值，將綁定的countClick事件發(fā)送給邏輯層，邏輯層根據(jù)方法名找到對應(yīng)的事件處理函數(shù)countClick并執(zhí)行。countClick函數(shù)中，我們調(diào)用了setData方法修改count值，并觸發(fā)視圖層渲染，所以頁面中的數(shù)字隨著點擊次數(shù)增加，這種視圖層和邏輯層之間相互通信的機制便是小程序的數(shù)據(jù)綁定和事件響應(yīng)系統(tǒng)。

在一個完整的小程序中，文件主要分為框架程序主體文件和頁面文件兩大類：

□框架程序主體文件是系統(tǒng)級別文件，一個項目只有一份，分別是app.json、app.js和app.wxss，它們分別控制小程序整體配置、邏輯和整體樣式，小程序啟動時只會執(zhí)行一次。這3個文件必須放在項目根目錄，且文件名必須是app，其中app.json和app. js是必須的。

□一個小程序有一個或多個頁面，一個頁面由．wxml、.wxss、.js和json四個文件組成，它們分別控制頁面的結(jié)構(gòu)、樣式、邏輯和配置，其中．wxml文件和．js文件是必須的，按照框架規(guī)定，同一個頁面的這4個文件必須具有相同的路徑和文件名，所以在這個項目中我們將它們放置在mypages/index路徑下且文件名統(tǒng)一為index，其中index目錄名可以和頁面文件名不一致，為了便于管理我們盡量將頁面目錄名和頁面文件名保持一致。

現(xiàn)在我們對小程序框架有個大致的認(rèn)識，下面，將分別為大家講解框架主體文件和框架頁面的特性及使用方法。