1.3 第一個小程序

完成開發準備后我們便可以開始編寫小程序，微信小程序的開發十分簡單，大家可以快速上手。下面我們利用官方提供的dmeo讓大家對小程序開發有初步認識。

1）打開微信開發者工具。第一次啟動需要掃描二維碼登錄，如圖1-9所示，開發權限配置參照上一小節。

2）登錄后選擇“添加項目”。

3）在填寫項目信息之前，先創建一個空目錄作為項目資源目錄，這里我們以E:\weixin\demo為例。

4）填寫項目信息。如果沒有AppID可以選擇“無AppID”；填寫項目名稱，項目名稱在微信開發者工具中是唯一的；項目目錄選擇剛才創建的空目錄，這里一定要保證剛才創建的目錄為空目錄，這樣下面會出現“在當前目錄中創建quick start項目”選項，勾選這個選項，如圖1-10所示，然后點擊“添加項目”按鈕。

創建好后的界面如圖1-11所示。

這樣我們便成功創建了第一個小程序，這個demo是官方提供的示例，第一個頁面展示了當前登錄的用戶信息，點擊頭像會跳轉到一個記錄當前小程序啟動時間的日志頁面。為了讓大家進一步體驗小程序開發，我們利用Sublime或其他編輯工具打開E:\weixin\demo文件夾，修改index.wxml，將“{{motto}}”替換為“我的第一個小程序”, index.wxml修改后代碼如下：

    <! --index.wxml-->
    <view class="container">
      <view   bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size=
"cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </view>
      <view class="usermotto">
        <! --  修改這句代碼  -->
        <text class="user-motto">我的第一個小程序</text>
      </view>
    </view>

修改后點擊“重啟”，如圖1-12所示。

重啟后，登錄界面提示語由原來的“Hello World”變成了“我的第一個小程序”，如圖1-13所示。

填寫了AppID的項目可以選擇“項目→預覽”（如圖1-14所示），掃描二維碼在微信中體驗項目。

至此我們簡單體驗了一個小程序的創建過程，但對于一個喜歡“刨根問底”的學習者來說，這個案例遠遠不夠，可能會有很多問題，例如：

□小程序啟動入口在哪里？

□index.wxml、index.wxss、index.js等文件是否可以重新命名？它們之間的關系是什么？目錄結構有怎樣的規范？

□WXML、WXSS文件是什么？怎么感覺很像HTML和CSS？

□小程序開發中有哪些限制？

大家可以先按自己理解嘗試修改項目中相關的文件，看看能產生什么效果，把過程中遇到的問題記錄下來，帶著問題閱讀后面的章節。