进入官网，我们能看到所需的工具和向导非常详细。
个人为windows操作系统，安装后，登陆自己微信，创建一个本地小程序后，打开是这个样子：

微信开发者工具视图

文件结构如下：

文件结构
接下来一一进行讲解：

utils

这个里面配置的都是一些全局的东西。
拿出app.js：

//app.js
App({
  //当程序初始化的时候执行OnLauch里面的内容
  onLaunch: function () {
    //调用API从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  //全局的方法
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //调用登录接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  //全局的属性
  globalData:{
    userInfo:null
  }
})

当程序初始化的时候执行OnLauch里面的内容，全局的方法getUserInfo，以后进行详细介绍。
学过H5的同学应该知道在不同的页面之间数据的传递相当让人头疼，但是有了这个配置以后就可以很方便的在全局传递数据。
接下来是app.json：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "微信",
    "navigationBarTextStyle":"white"
  }
}

可以在app.json里面配置小程序是由哪些页面组成的，以及配置小程序的窗口，例如我们可以改"navigationBarBackgroundColor": "#000"背景就变成白色的了，若为"#fff"则为黑色的。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

是用来调节页面属性的。

index

在index.is里面