新手怎麼開發第一款微信小程式

在安裝完「微信網路開發者工具」之後，透過開發者的微信掃碼進入後，如圖。

點擊“新增項目”，填入先前獲得的AppID（無AppID可忽略），輸入項目名稱“Hello WXapplet”,選定本機資料夾作為專案目錄。

勾選「在目前目錄中建立quick start專案」後，點擊「新增專案」按鈕，即已成功建立了我們第一個微信小程式專案－Hello WXapplet 。

開發者工具操作與使用

#開發者工具介面基本上分為四大區域： 1區“頂部選單”，2區“導航選單”，3區“目錄檔案新手怎麼開發第一款微信小程式模擬運行”，4區“編輯新手怎麼開發第一款微信小程式調試開發”、1區與2區是固定的。 3區與4區會依選擇導航選單區的不同功能或模式有所不同。

1區“頂部選單”，“設定”是配置開發機運行程式時如何連接網路。 「動作」指「刷新」、「後退」、「前進」等操作，主要在網頁或介面調試時使用。 「幫助」是Web開發者工具的版本與版權聲明等資訊。 親自體驗微信小程式，評估微信小程式。

2區“導航選單”，是開發者經常使用的功能區。特別是其中的「編輯」與「調試」功能將是開發者使用最多的重要功能。

編輯功能

點選編輯按鈕，出現如圖所示的介面。

原來的4區部分變成專案的檔案清單區及對應檔案的程式碼編輯區，我們也稱之為程式碼編輯器。

程式碼編輯器現在支援4種檔案的編輯：wxml、wxss、js以及json檔案。程式碼編輯器也提供了較為完善的自動補全功能，大大方便了開發者。

程式碼編輯器也支援快速鍵操作，部分常用快捷鍵如下：

Ctrl End:移到檔案結尾
  Ctrl Home：移動到檔案開頭
#  Ctrl i:選取目前行
  Shift End:移至行尾
##  Shift End:移動到行尾
  Shift Home：移動到行首
  Ctrl Shift L:選取所有符合
  Ctrl D:選取匹配


# #  Ctrl U:遊標回退
  Shift Al t F:程式碼格式化  Alt Up,Alt Down:上下移動一行

  Alt Up,Alt Down:上下移動一行

#  Shift Alt Up,Shfit Alt Down:向上向下複製一行

  Ctrl Shift Enter:在當前行上方插入一行

調試功能#########偵錯功能是開發者偵測程式碼結果實作與排查問題的核心工具，如圖。 #####################4區此時變成偵錯工具與輸出區。模擬器將如實地模擬微信小程式專案在客戶端的邏輯與操作表現，絕大部分的功能與API呼叫均能在模擬器上正確呈現。 ######

調試工具與輸出區的頂部是一行選單，分別是：Console、Sources、Network、Storage、AppData、Wxml、Senser，最右邊的擴充功能選單項目是自訂與控制開發工具鈕“┆” 。

Console頁：控制台資訊頁，有兩個作用：

1）開發者直接在此輸入程式碼並偵錯。

2）顯示小程式的錯誤輸出。

Sources頁：原始檔案偵錯資訊頁，用於顯示目前專案的腳本檔案。

注意：因小程式框架會對腳本檔案進行編譯工作，在原始檔頁面中我們看到的檔案其實是經過處理後的腳本檔案。所以我們寫的程式碼都被包含在define函數中。對於頁面（page）的程式碼，則在打包腳本檔案尾部，require函數會完成主動呼叫動作。
 Network頁：網路偵錯資訊頁，用於觀察和顯示每個元素請求資訊和套接字（socket）狀態等網路相關的詳細資訊。

Storage頁：資料儲存資訊頁，用於顯示目前專案使用儲存API(wx.setStorage或wx.setStorageSync)接口的資料儲存情況。例如在Console中輸入：wx.setStorage({key:name,data:King}),則在Storage頁面中就可以看到我們儲存了一個Key-Value資料。

#

Storage頁：資料儲存資訊頁，用於顯示目前項目使用儲存API(wx.setStorage或wx.setStorageSync)介面的資料儲存狀況。例如在Console中輸入：wx.setStorage({key:name,data:King}),則在Storage頁面中就可以看到我們儲存了一個Key-Value資料。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

微信小程式開發中全域變數快取的問題處理

微信小程式開發中怎樣實作微信支付

以上是新手怎麼開發第一款微信小程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！