小程式的開發與傳統的web前端開發極其相似，想必各位技術宅們關心的是如何去開發一個小程式，這裡我簡單介紹一下如何簡單上手開發小程式。

第一步：安裝
        首先下載微信開發者工具

        https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201716

直接下載安裝，點選下一步

然後掃碼進入微信公眾號，他會自動獲取你的公眾號和微信

掃碼登入後，選擇 本地小程式專案 ，點選新增專案，然後填寫相關資訊：

AppID: 企業申請後獲得，或受邀參與內測的可以去微信·公眾平臺裡檢視，只是測試用的話，選擇無AppID.

依次填寫專案名稱和專案目錄，在第一次建立專案時，建議勾選建立普通快速啟用模板選項。這會幫助建立一個初始的 demo。

第二步：基本配置
進入建立的初始 demo 後，可以看到如下頁面：

點選編輯後，可以發現右邊目錄結構中有兩個資料夾以及根目錄下的三個檔案，三個檔案分別為app.js、app.json、app.wxss,以下分別介紹這三個檔案的作用：

app.js

app.js為指令碼檔案，我們可以在app.js中監聽並處理小程式的生命週期函式、宣告全域性變數以及呼叫各類提供的 API。如初始demo中呼叫登入介面以及獲取資料。

app.json

該檔案由兩部分組成，我們可以在定義頁面的路徑，也可以在裡面定義一些小程式的視窗背景色，配置導航條樣式，配置預設標題。我們可以發現，這正好對應pages檔案中的兩個頁面。如果我們要新增新的頁面，也需要在這裡先申明路徑，“pages”陣列中的一個頁面為小程式的首頁。

注意：app.json中不能新增任何註釋！！！

app.wxss

app.wxss中定義小程式的公共樣式，這裡申明的樣式我們可以在其他的頁面中直接引用。

第三步：頁面建立
前面介紹過這個初始demo中有兩個頁面，微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中。

每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、 index.wxml、index.wxss、index.json。.js 字尾的檔案是指令碼檔案，.json 字尾的檔案是配置檔案，.wxss 字尾的是樣式表文件，.wxml 字尾的檔案是頁面結構檔案。下面一次看一下每個檔案的內容：

index.wxml為頁面結構，相當於我們寫的.html檔案，index.wxml與.html還是存在一些區別。我們發現上述檔案中的</view>標籤與.html中的</div>標籤很相似。其他<view/>、<image/>、<text/>標籤的使用與.html中類似。

index.js

index.js 是頁面的指令碼檔案，與我們之前的.js檔案的功能一樣。在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項，宣告並處理資料，響應頁面互動事件等。

index.wxss

index.wxss為頁面的樣式表，類似.css。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構檔案中直接使用 app.wxss 中指定的樣式規則。

index.json

頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用 app.json 中的預設配置。

第四步：除錯
點選開發框左側的除錯進入除錯介面：

除錯與chrom除錯程式碼一樣

第五步：專案預覽
開發者工具上側的“設定--專案設定”模組中包括：當前專案細節、上傳以及專案的一些其他設定。

由於沒有AppID，部分功能無法使用。

--------------------- 
作者：zj張靜 
來源：CSDN 
原文：https://blog.csdn.net/zhangjing1019/article/details/79442828 
版權宣告：本文為博主原創文章，轉載請附上博文連結！