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

入門篇

開發(fā)準(zhǔn)備工作

獲取微信小程序的 AppID

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

下載開發(fā)工具

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

新建項目

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

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

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

編寫示例小代碼

1. //app.js
2. App({
3. onLaunch: function () {
4. //調(diào)用API從本地緩存中獲取數(shù)據(jù)
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. //調(diào)用登錄接口
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 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解。

 

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