分享小程序的开发流程实例

微信小程序还没正式发布就已经迅速成为大家讨论的焦点，那么大家可能觉得只有收到内测邀请才能体验小程序的开发流程，其实不然，大家都可以体验，下面就带大家一起了解。

下载微信 Web 开发者工具

首先，微信给我们提供了它自己的小程序集成开发工具，只需要到这个页面下载即可：

下载完成后，打开开发者工具，会有一个扫码登录界面。 用你的微信扫码就可以登录进来了， 然后开发者工具会帮我们创建一个默认工程，项目的文件结构如下：

所有的代码编辑以及运行预览都可以在这个开发者工具中进行。接下来咱们看看微信小程序的项目结构。

项目结构

如上图，首先在根目录中有三个文件 app.js, app.json, app.wxss。 其中 app.js 是程序主入口的脚本文件， app.json 是全局配置文件, app.wxss 是小程序的样式表文件。

先来看看 app.json :

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
}

这个配置文件中定义了两个节点， pages 是小程序的所有页面对应的路径， window 是小程序窗口的配置信息。

再来看看样式文件 app.wxss :

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

咱们先不用深究它具体定义了什么样式，只需要先了解项目结构即可。接下来再来看看程序的主入口 app.js：

//app.js App({
  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 }
})

这里初始化了一个 App 对象，并且定义了三个方法 onLaunch ， getUserInfo 和 globalData 。 先来看看 onLaunch :

onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

}

首先 wx.getStorageSync 方法会获得本地的一个以 logs 为 key 的缓存数据。 传入这个方法的 logs 本身没有任何特殊含义，只是用于表示我们使用的缓存数据。 这个机制可以理解为和 iOS 的 NSUserDefaults 类似。

然后，我们想这个缓存数组中插入当前的日期 logs.unshift(Date.now()) 。 最后再调用 setStorageSync 方法将我们新的缓存内容写入到本地缓存中。

因为 onLaunch 方法是小程序的生命周期方法，所以在小程序启动的时候就会调用它，并将当前启动的日期记录并写入本地缓存中。 没错 onLaunch 整个方法就干了这件事儿。

我们再来看下 getUserInfo 方法，它通过调用 wx.login 和 wx.getUserInfo 两个微信平台的函数获取当前用户登录信息，并传会给回调函数 cb：

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)
            }
          })
        }
      })
    }

}

至于最开始的 if 判断 if(this.globalData.userInfo) 咱们暂时不用深究，只看 else 部分即可。

页面结构

了解完根目录的几个文件， 咱们再来看看页面文件, 正如咱们刚开始截图中看到的项目结构：

所有的页面都在 pages 文件夹中。 我们这个示例工程中有两个页面 index 和 logs。 还记得我们前面在 app.json 看到的页面配置吗：

"pages":[ "pages/index/index", "pages/logs/logs" ]

正好对应上咱们现在看到的两个目录， 还要记得一点， pages 数组中的第一个元素会作为我们小程序的主页。 切记，index 页面之所以是首页，是因为它是 pages 里面的第一个元素， 而不是因为它的名称是 index。

我们来看看 index 页面的构成， index.js, index.wxml, index.wxss。 index.js 是页面的脚本文件, index.wxml 是页面的 UI 文件， index.wxss 是页面的样式文件。

先看一下 index.js:

//index.js //获取应用实例 var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  }, //事件处理函数 bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs' })
  },
  onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({
        userInfo:userInfo
      })
    })
  }
})

getApp() 方法获取我们的 app 实例。 然后在看 onLoad 方法，