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 = this11 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.userInfo20 typeof cb == "function" && cb(that.globalData.userInfo)21 }22 })23 }24 })25 }26 },27 globalData:{28 userInfo:null29 }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 = this18 // 调用应用实例的方法获取全局数据19 app.getUserInfo(function(userInfo){20 // 更新数据21 that.setData({22 userInfo:userInfo23 })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 }) 在这个文件中，程序读取存储的日志信息并在打开页面的时候将其加载出来，同时日期用格式化的形式展示出来。