1）創建小程序實例。
點擊開發者工具左側導航欄中的「編輯」，可以看到這個項目已經初始化並包含了一些簡單的代碼文件。最關鍵也必不可少的是app.js、app.json、app.wxss等3個文件。其中，.js是腳本文件，.json是配置文件，.wxss是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。
app.js是小程序的腳本代碼。用戶可以在這個文件中監聽並處理小程序的生命週期函數，聲明全局變量，調用框架提供的豐富的API，如這裡的同步存儲及同步讀取本地數據。
app.js的初始代碼如下。
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",
9 "navigationBarTitleText": "WeChat",
10 "navigationBarTextStyle":"black"
11 }
12 }
app.wxss是整個小程序的公共樣式表。用戶可以在頁面組件的class屬性上直接使用app.wxss中聲明的樣式規則。
1 /**app.wxss**/
2 .container {
3 height: 100%;
4 display: flex;
5 flex-direction: column;
6 align-items: center;
7 justify-content: space-between;
8 padding: 200rpx 0;
9 box-sizing: border-box;
10 }
2）創建頁面。
在官方的Demo中有兩個頁面，index頁面和logs頁面，即歡迎頁和小程序啟動日誌的展示頁，它們都位於pages目錄下。微信小程序中每一個頁面的「路徑+頁面名」都需要寫在app.json的pages中，且pages中的第一個頁面是小程序的首頁。
每一個小程序頁面是由同路徑下同名的4個不同擴展名的文件組成的，如index.js、index.wxml、index.wxss、index.json。
index.wxml是頁面的結構文件，其代碼如下。
1 <!--index.wxml-->
2 <view>
3 <view bindtap="bindViewTap">
4 <image src="{{userInfo.avatarUrl}}" background-
size="cover"></ image>
5 <text>{{userInfo.nickName}}</text>
6 </view>
7 <view>
8 <text>{{motto}}</text>
9 </view>
10 </view>
這裡使用了<view/>、<image/>、<text/>來搭建頁面結構，綁定數據和交互處理函數。
index.js是頁面的腳本文件。在這個文件中，可以監聽並處理頁面的生命週期函數，獲取小程序實例，聲明並處理數據，響應頁面交互事件等。index.js的代碼如下。
1 // index.js
2 // 獲取應用實例
3 var app = getApp
4 Page({
5 data: {
6 motto: 'Hello World',
7 userInfo: {}
8 },
9 // 事件處理函數
10 bindViewTap: function {
11 wx.navigateTo({
12 url: '../logs/logs'
13 })
14 },
15 onLoad: function {
16 console.log('onLoad')
17 var that = this
18 // 調用應用實例的方法獲取全局數據
19 app.getUserInfo(function(userInfo){
20 // 更新數據
21 that.setData({
22 userInfo:userInfo
23 })
24 })
25 }
26 })
index.wxss是頁面的樣式表，其代碼如下。頁面的樣式表是非必要的。當有頁面樣式表時，頁面樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用app.wxss中指定的樣式規則。它們之間類似於一種繼承關係。
1 /**index.wxss**/
2 .userinfo {
3 display: flex;
4 flex-direction: column;
5 align-items: center;
6 }
7
8 .userinfo-avatar {
9 width: 128rpx;
10 height: 128rpx;
11 margin: 20rpx;
12 border-radius: 50%;
13 }
14
15 .userinfo-nickname {
16 color: #aaa;
17 }
18
19 .usermotto {
20 margin-top: 200px;
21 }
index.json是頁面的配置文件。在官方的例子中，這個頁面沒有配置文件，不過日誌頁面有這個相應的頁面配置文件。頁面配置文件是非必要的。當有頁面配置文件時，配置項在該頁面會覆蓋app.json的window中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用app.json中的默認配置。
logs的頁面配置文件代碼如下。這裡配置了導航欄的標題文本內容。
<!--log.json-->
{
"navigationBarTitleText": "查看啟動日誌"
}
logs的頁面結構代碼如下。
1 <!--logs.wxml-->
2 <view>
3 <block wx:for="{{logs}}" wx:for-item="log">
4 <text>{{index + 1}}. {{log}}</text>
5 </block>
6 </view>
logs頁面使用<block/>標籤來組織代碼，在<block/>上使用wx:for綁定logs數據，並將logs數據循環展開節點。
logs的頁面腳本文件代碼如下。
1 // logs.js
2 var util = require('../../utils/util.js')
3 Page({
4 data: {
5 logs:
6 },
7 onLoad: function {
8 this.setData({
9 logs: (wx.getStorageSync('logs') || ).map(function (log) {
10 return util.formatTime(new Date(log))
11 })
12 })
13 }
14 })
在這個文件中，程序讀取存儲的日誌信息並在打開頁面的時候將其加載出來，同時日期用格式化的形式展示出來。