教程簡介

• 1、閱讀范圍

本篇教程適合新手閱讀，老手直接略過

• 2、教程難度

  初級

1、小程序的開發環境

1、下載開發工具

• 1、開發工具有三個分別針對windows 64 、 windows 32 、 mac 三個平臺來去下載工具，這沒有什么好說的，然后一路安裝即可。

mini_app_dev.png

對應的下載地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

• 2、新建一個Demo

這里假設你已經安裝了小程序的開發環境，我們直接創建項目。

1、打開開發工具，開發工具長以下樣子

mini_app_devhome.png

注意，如果是首次打開的時候會讓你掃描一下二維來確定登錄開發者工具。并且只有添加項目這個選項。

2、點擊添加項目按鈕

add_project.png

3、點擊添加項目按鈕,此時項目就會創建成功了

app_home.png

到此為止我們的開發環境基本上就講完了，這沒有什么好說的，沒有復雜的配置流程

2、小程序開發工具和項目結構

1、小程序的開發環境簡介

tools_show.png

從圖可知，這基本上也沒有什么說的，我們點點基本上就知道各個功能是干什么的，這里特別要說一點就是，開發工具現在支持ctrl+s保存自動刷新功能(以前是要重新編譯一下才可以),再一個就是在調試環境下就是把chrome的調試功能集成了進來，我們可以快速的定位錯誤和查找問題。

2、小程序的項目結構

小程序的項目結構分為主體部分和頁面部分，主體部分小程序必不可少的部分。

• 1、一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下:

app_main_part.png

由圖可以看出，小程序的主體部分由三部分組成，并且必須放在項目的根目錄，其中樣式表不是必須的。名字必須叫app.js,app.json,app.wxss，不能胡亂更改。

• 2、小程序的界面由四分部分組成

page_part.png

由圖可知，小程序的頁面由四部分組成，其中樣式表和json文件不是必須的。

• 3、對應項目中的結構

project_part.png

3、推薦閱讀

具體細節可以看官方的教程:https://mp.weixin.qq.com/debug/wxadoc/dev/和https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html