本文檔將帶你一步步創建完成一個微信小程序，并可以在手機上體驗該小程序的實際效果。

入門篇

開發準備工作

獲取微信小程序的 AppID

登錄 https://mp.weixin.qq.com ，就可以在網站的“設置”-“開發者設置”中，查看到微信小程序的 AppID 了，注意不可直接使用服務號或訂閱號的 AppID 。 

下載開發工具

下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869

新建項目

開發者工具安裝完成后，打開并使用微信掃碼登錄。選擇創建“項目”，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），比如“我的第一個項目”，并選擇一個本地的文件夾作為代碼存儲的目錄，點擊“新建項目”就可以了。 
為方便初學者了解微信小程序的基本代碼結構，在創建過程中，如果選擇的本地文件夾是個空文件夾，開發者工具會提示，是否需要創建一個 quick start 項目。選擇“是”，開發者工具會幫助我們在開發目錄里生成一個簡單的 demo。 

這樣就搭建好了，我們來看一下主界面 

整個開發工具基本分為三塊。 
第一列：table-item 每個按鈕代表一個頁 
第二列：webview 你的頁面在這里實時展示 
第三列：chrome調試工具，暫且這樣叫吧，因為確實是使用了charome的調試工具， 在這里可以調試頁面的樣式,js，網絡檢測，輸入輸出等等。

編寫示例小代碼

創建小程序實例

點擊開發者工具左側導航的“編輯”，我們可以看到這個項目，已經初始化并包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序實例。 
下面我們簡單了解這三個文件的功能，方便修改以及從頭開發自己的微信小程序。 
app.js是小程序的腳本代碼。我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。想了解更多可用 API，可參考 API 文檔。

1. //app.js
2. App({
3. onLaunch: function () {
4. //調用API從本地緩存中獲取數據
5. var logs = wx.getStorageSync('logs') || []
6. logs.unshift(Date.now())
7. wx.setStorageSync('logs', logs)
8. },
9. getUserInfo:function(cb){
10. var that = this;
11. if(this.globalData.userInfo){
12. typeof cb == "function" && cb(this.globalData.userInfo)
13. }else{
14. //調用登錄接口
15. wx.login({
16. success: function () {
17. wx.getUserInfo({
18. success: function (res) {
19. that.globalData.userInfo = res.userInfo;
20. typeof cb == "function" && cb(that.globalData.userInfo)
21. }
22. })
23. }
24. });
25. }
26. },
27. globalData:{
28. userInfo:null
29. }
30. })

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解。

1. {
2. "pages":[
3. "pages/index/index",
4. "pages/logs/logs"
5. ],
6. "window":{
7. "backgroundTextStyle":"light",
8. "navigationBarBackgroundColor": "#fff",