一、形成空白文件
1、點擊打開目錄
2、刪除除了project.config.json（項目配置文件）以外所有文件。
3、新建“app.json”
4、接下來我們在app.json中寫入配置
{}
5、保存，我們可以看到編譯器報錯，因為目前文件為空
二、小程序頁面路徑配置
1、首先在app.json中寫入
{ "pages": [ "pages/index/index" ] }
第一個pages：指的是項目里面有哪些頁面；第二個pages：指的是pages目錄。
保存，一定要先保存要不然建好回車沒有反應。
2、右擊pages新建目錄，命名為index，在index下新建pages命名為index
注意：需要在pages下新建目錄才能新建頁面。現在可以看到開發者工具新建的頁面，自動放入pages數組中。
在 app.json 中，pages 數組是必填的。它規定小程序中所有頁面的地址，同時規定了小程序啟動時的首頁，就是 pages 數組的首位所指的頁面。
3、當 pages 成功配置后，小程序就可以正常運行了（新建頁面文件后，小程序已經正常運行無報錯了）。
但如果想要一些個性化配置，我們依然可以繼續修改 app.json。
三、修改小程序頁面
修改app.json代碼如下：
{ "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#ff0000", "navigationBarTitleText": "我的第一個小程序", "navigationBarTextStyle": "white" } }
是不是看到變化了！
在app.json中，window用於設置小程序的狀態欄，導航條，標題，窗口，背景色。
具體見 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
四、與WXML玩耍
1、插入文字
當我們打開index文件夾下面的index.wxml文件，可以看到開發者工具在自動生成頁面的時候，默認生成代碼如下。
pages/index/index.wxml <text>pages/index/index.wxml</text>
第一行是注釋，對代碼解釋說明。計算機執行程序會自動跳過注釋編譯。第二行代碼前后都是由尖括號擴起來部分中間即是pages/index/index.wxml。
在小程序中， <text>代表文字視覺組件。在它們中間插入的內容，將會直接顯示在小程序的相應位置中
試試：把中間改成hello World!保存運行
<text>Hello World</text>
2、插入圖片
下面我們在小程序中插入一張圖片。
首先在index頁面下打開目錄
新建image文件夾，根目錄下創建
拖一張自己喜歡的圖片進去，再回到開發者工具就回看到文件夾和圖片都出現在目錄下，與根目錄平行，一定要注意別建錯文件夾。
接下來我們在wxml中插入代碼
與
<image src='/image/a.jpg'></image>
效果如下：
3、分割代碼
在開發過程中把屏幕元素分割成不同部分，用獨立的樣式代碼提高編碼效率
例如我們用對元素部分進行區分,增加
這樣我們就可以統一處理圖片的樣式和其他操作。
五、與wxss玩耍
在頁面中打開index.wxss文件
1、處理圖片
從圖片開始處理，我們這樣設置image的屬性。
image { width: 400rpx; height: 150prx; border-radius: 50%; }
看，他變圓了！
2、處理文字
text{ font-size: 64rpx; color:crimson; }
查看文字的變化。
3、調整布局
添加屬性
view { display: flex; flex-direction: column; align-items: center; justify-content: space-around; height: 800rpx; }
在屬性里面，我們首先用到的是flex，隨后我們用到的是flex-direction 屬性，將
align-items 屬性，它用於設定橫向排版模式。將
align-items 值設為
center，就能讓視覺元素居中顯示，
justify-content: space-around 將元素均勻地排布在頁面上，再后來設置view的高度，就像html布局中一個盒子的高度=view中所有元素的高度。
4、長度單位rpx（responsive pixel）:
可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
建議：開發微信小程序時設計師可以用iPhone6作為視覺稿的標准。
六、獲取用戶資料
當用戶對小程序有需求，我們是不是應該添加按鈕或者對話框與用戶進行交互，選擇性的滿足用戶不同需求。下面我們以添加按鈕事件為例。
在WXML文件中添加按鈕
pages/index/index.wxml <view> <text>Hello China</text> <image src='/image/a.jpg'></image> <button open-type='getUserInfo'>我是按鈕點我把</button> </view>
接下來我們開始編寫js文件，接收微信傳給我我們的數據。
我們打開index.js，我們可以看到里面有開發者工具自動生成的生命周期函數，我們直接增加一個方法
像這樣
然后我們開始編寫一個用戶點擊按鈕反饋回去的數據。
新建函數 getProfile當這個函數接收到用戶資料后，就直接輸出到控制台中。
// pages/index/index.js Page({ getProfile(res){ console.log(res) } })
console.log() 函數可以將變量、數據，寫入開發者工具的控制台中
1、完善wxml
pages/index/index.wxml <view> <text>Hello China</text> <image src='/image/a.jpg'></image> <button open-type='getUserInfo' bindgetuserinfo='getProfile'>我是按鈕點我吧</button> </view>
點擊按鈕后，查看控制台
可以看到，在這么多的數據中，微信將用戶數據包裹在這個對象里的 detail.userInfo 中。嘗試輸出其中 detail.userInfo 的內容，就可以看到干凈的用戶資料了。
在js文件中添加
Page({
getProfile(res){
console.log(res.detail.userInfo)
}
})
點擊按鈕查看控制台信息
2、結果輸出到界面
接下來，我們就來嘗試將小程序界面中原本的默認頭像和歡迎語，替換為用戶頭像和昵稱
在小程序中，界面層（WXML）和邏輯層（JS）之間有一種特殊的數據交換方式，名為「數據綁定」。WXML 可以與 JS 中的特殊的變量進行綁定，當 JS 修改變量的時候，變化將會直接傳入界面層。
// pages/index/index.js Page({ getProfile(res){ this.setData({ "profile": res.detail.userInfo }) } })
這里我們新建了一個變量profile，我們把用戶資料寫入變量中，接着可以利用 Page() 對象本身含有的 setData() 函數。回到 index.js，就可以用 setData() 將用戶數據寫入變量。
接着我們在WXML文件中綁定這些變量，將用戶資料輸出到首頁。
pages/index/index.wxml <view> <text>{{profile.nickName}}</text> <image src='{{profile.avatarUrl}}'></image> <button open-type='getUserInfo' bindgetuserinfo='getProfile'>我是按鈕點我吧</button> </view>
到這我們再考慮一種因素，當小程序剛啟動獲取我們的資料有延遲，這樣顯示的界面存在留白怎么處理？
3、優化程序
我們設置一個默認界面，給頁面加載寫入初始化數據
在js文件里面添加一個data對象
// pages/index/index.js Page({ getProfile(res){ this.setData({ "profile": res.detail.userInfo }) }, data:{ "profile":{ nickName:"HELLO CHINA" } } })
保存初始化頁面：當然你可以加圖片哈，我這主要突出一個效果
點擊按鈕后界面
小程序初始化進入的界面是默認界面，點擊按鈕后獲取到用戶資料並自動替換。