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 })
在这个文件中，程序读取存储的日志信息并在打开页面的时候将其加载出来，同时日期用格式化的形式展示出来。