文章目錄
- 一、第一個入門級小程式
- 1.新建專案
- 2.真機預覽
- 3.代碼上傳
- 4.小程式版本
- 二、小程式目錄結構
- 1.專案組態檔
- 2.主體檔案
- 3.頁面檔案
- 4.其他檔案
- 三、開發者工具功能介紹
- 1.選單欄
- 2.工具列
- 3.模擬器
- 4.編輯器
- 5.除錯器
- 四、推薦小程式（歡迎各位大佬指導）
一、第一個入門級小程式
1.新建專案
步驟1
雙擊微信web開發者工具圖示，管理員或開發者使用微信掃碼二維碼后進入選單畫面，單擊選單中的“小程式專案”選項進入小程式專案管理頁面，
步驟2
其中小程式的AppID可以登錄微信公眾平臺（https://mp.weixin.qq.com）查看，具體查看步驟是：左側”開發“-”開發者管理“-“開發設定”-“開發者ID”標題下方的AppID（小程式ID），
步驟3
其中AppID必須填實際的小程式ID，否則部分功能將無法使用，如果開發者暫時條件受限無法注冊申請小程式ID，可以選擇AppID輸入框下方的體驗小程式，此時也可以在開發者工具進行開發，但無法真機預覽，
步驟4
填寫完畢后單擊“確定”按鈕完成操作，此時會跳轉到開發頁面，
2.真機預覽
步驟1
除了直接在PC端使用滑鼠模擬手機觸屏的點擊效果外，還可以直接在真機上進行程式預覽，單擊“預覽”按鈕，即可自動生成一個預覽專用二維碼，
用手機微信掃描上圖中的二維碼即可進行真機測驗，
步驟2
真機預覽只能看到小程式頁面效果，如果在測驗程序中需要像PC端一樣獲得小程式的狀態資料（例如console陳述句輸出、本地快取資料變化、網路抓包等）需要進行真機除錯，
單擊“遠程除錯”按鈕，即可自動生成一個除錯專用二維碼，同樣用手機微信掃描上圖中的二維碼即可進行真機遠程除錯，
步驟3
手機除錯畫面會比真機預覽多出來一個浮窗，該浮窗會顯示與PC端的通訊狀態，
在除錯程序中手機端的任何操作都可以在PC端除錯器中同步進行實時查看，
3.代碼上傳
1.代碼上傳預覽只能由開發者測驗小程式的性能和表現，如果希望更多人使用小程式，需要進行代碼上傳，只有上傳后的代碼才可以由管理員進一步選擇發布為體驗版或正式版，
首先需要將代碼傳到小程式后臺管理端，單擊開發者工具頂端的“上傳”按鈕準備上傳代碼，
2.提交審核
上傳成功后，就可以登陸小程式管理后臺—“開發管理”選單選項，在開發管理面板中看到剛才提交的版本，
4.小程式版本
-
開發版本
使用開發者工具可將代碼上傳到開發版本中，開發版本只保留每位開發者最新的一份上傳代碼，該版本只有開發者權限用戶可以預覽測驗，開發版本可洗掉，不影響線上版本和審核中版本的代碼，開發版可以由管理員繼續提交為體驗版或審核中版本， -
體驗版本
開發版可以由管理員繼續提交為體驗版，該版本無需審核且只有體驗者權限用戶可以使用，其他用戶無法打開，該版本主要用于正式上線前的測驗體驗， -
審核中版本
開發版全部完成后可以由管理員正式提交上線，小程式正式上線前的待審核狀態稱為審核中版本，同一個小程式所有的開發版本只能有一份處于此狀態，該版本可再更新代碼后重新提交審核，在等待審核的程序中不影響現有正式版的使用， -
線上版本
該版本是審核通過后的版本，所有微信用戶都可以查看和使用，如果有新上傳的代碼重新被審核通過，該版本將被覆寫更新，
二、小程式目錄結構
1.專案組態檔
每個小程式在新建時都會自動生成一個專案組態檔project.config.json，該檔案直接位于專案根目錄下，
其內部代碼可用來定義小程式的專案名稱、appid等內容，
2.主體檔案
主體檔案名稱均為app，根據后綴名不同包括3種型別：
1.app.json：必填檔案，用于描述小程式的公共配置；
2.app.js：必填檔案，用于描述小程式的整體邏輯；
3.app.wxss：可選檔案，小程式公共樣式表，
3.頁面檔案
小程式中一般會在根目錄下創建一個pages檔案夾用于保存所有頁面檔案，每個頁面也有自己獨立的二級目錄，
每一個單獨的頁面基本由4種檔案構成：
wxml檔案：用于構建當前頁面的結構，包括組件、事件等內容，
wxss檔案：可選頁面，用于設定當前頁面的樣式效果，該檔案不會影響其他頁面，
js檔案：可選頁面，用于設定當前頁面的邏輯代碼，
json檔案：可選頁面，用來重新設定app.json中window屬性規定的內容，不會影響其他頁面，
4.其他檔案
除了上述常用檔案外，小程式還允許自定義路徑和檔案名創建一些輔助檔案，例如本章創建的第一個小程式專案中utils檔案夾就是用于存放公共JS檔案的，
檔案夾中的utils.js保存了一些公共JavaScript代碼，可以被其他頁面JS檔案參考，具體的參考方式見第三章，
除此之外，開發者還可以自定義資源檔案夾用于存放其他檔案，例如在根目錄中創建images檔案夾用于存放圖片等，這些可以根據實際需要自行創建，
三、開發者工具功能介紹
開發者工具主要是由選單欄、工具列、模擬器、編輯器和除錯器這5個部分組成，
1.選單欄
選單欄主要包括專案、檔案、編輯、工具、界面、設定和微信開發者工具，
2.工具列
工具列左側區域主要包含：個人中心、模擬器、編輯器和除錯器，
個人中心：賬戶切換和訊息提醒；
模擬器：單擊切換顯示/隱藏模擬器面板；
編輯器：單擊切換顯示/隱藏編輯器面板；
除錯器：單擊切換顯示/隱藏除錯器面板，
工具列中間區域主要包含：小程式模式、編譯模式、編譯、預覽、遠程除錯、切后臺和清快取，
小程式模式：小程式模式和搜索動態頁模式；
編譯模式：普通模式、自定義編譯模式和二維碼編譯模式；
編譯：重新編譯小程式專案；
預覽：生成二維碼進行真機預覽；
遠程除錯：生成二維碼進行真機遠程除錯；
切后臺：可以切換場景值；
清快取：可單獨或同時清除資料快取、檔案快取、授權資料、網路快取、登陸狀態，
工具列右側區域主要包含：上傳、測驗、騰訊云和詳情，
上傳：將代碼上傳為開發版本；
測驗：每24小時可以申請一份測驗報告；
騰訊云：小程式授權的騰訊云服務；
詳情：顯示專案設定、域名資訊和騰訊云狀態，
3.模擬器
模擬器面板可以切換虛擬手機型號、顯示比例以及模擬網路連接狀態，
4.編輯器
在頁面上編輯代碼還可以實作自動提示，以撰寫一個標簽為例，只需要輸入前面幾個字母，就可以出現相關組件的代碼提示，此時可用鍵盤方向鍵上下選擇正確的內容然后按回車鍵即可全部生成，
5.除錯器
除錯器可以在PC端預覽小程式或手機端除錯小程式時使用，用于實時查看小程式運行時的后臺輸出、網路狀況、資料存盤等內容的變化程序，目前主要包含了9個面板，可以用其頂部的tab欄進行切換，
四、推薦小程式（歡迎各位大佬指導）
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/305506.html
標籤：其他
上一篇：一篇文章帶你由淺入深去感受四種自定義型別的魅力——結構體型別，位段，列舉型別，聯合體（共用體）型別
下一篇：海明碼/漢明碼的計算和糾錯